Разработка сайта для завода по производству радиоэлектронной аппаратуры

АО «Завод ПРОТОН» — производственная компания в г. Зеленограде, которая изготавливает сложную электронику, печатные платы, радиоэлектронную аппаратуру, а также занимается металлообработкой. Завод основан более 50 лет назад. Это передовое предприятие, которое обслуживает военно-промышленный комплекс, космическое машиностроение, научные центры, а продукция завода экспортируется в 30 стран мира. Но сайт компании не соответствовал её мощным достижениям и лидирующим позициям на рынке: он устарел, передавал вайб совкового завода, а не продвинутого инновационного предприятия, где разрабатываются высокие технологии.

Нам предстояло решить эту задачу. Сделать современный, эстетичный, технологичный сайт, при этом, сохранив фирменный стиль компании, её узнаваемость, чтобы с первых секунд пользователь понимал, что это сайт завода.

Мы провели глубокое исследование продукта, чтобы лучше понять, чем занимается компания, в чём особенности и преимущества её услуг, что она может предложить клиентам, и почему надо выбрать именно её.

Мы изучили десятки сайтов конкурентов, и поняли, что у всех одна проблема: сайт непонятный. Это касается всего: запутанной структуры, нелогичной навигации, неадекватного названия кнопок. А таких нечитаемых текстов мы не видели ещё ни в одной нише — вообще непонятно, что предлагается. Исходя из этих слабых сторон конкурентов, мы уделили большое внимание проработке юзабилити на сайте и улучшению пользовательского опыта.

Мы проработали сценарии взаимодействия пользователя с сайтом, построили логичную понятную структуру, чтобы найти нужную услугу можно было в пару кликов. Это оказалось непростой задачей, так как сайт предполагал множество страниц, направлений, услуг. Всё это надо было выстроить в единую систему.

Сложность заключалась ещё и в том, что компания занимается как продукцией военного, так и гражданского назначения. Как оказывает услуги под ключ — от изобретения до запуска продукта в массовое производство, так и выполняет отдельные технологические операции. Эту информацию нужно было так разнести на сайте, чтобы не запутать пользователей, а также чтобы аудитория попадала на правильные страницы, соответствующие тем услугам, которые она ищет.

Проект крупный, при этом, контент распределён неравномерно: только у одного раздела есть вложенность.

Мы решили эту проблему, заложив функционал поиска, и включив в шапку сайта меню бургер, чтобы упростить восприятие информации и навигацию по сайту для пользователя.

Проект создан на основе простой, лаконичной, функциональной трёхколоночной сетки. Она упорядочивает контент, помогает красиво расположить его в блоках, независимо от объёма и вида, будь-то: текст, список от 1 до 8 пунктов, графика, видео. Такой подход делает сайт гибким и легко масштабируемым.

Сайт информативный, предусматривает большое количество текста. Чтобы его было удобно читать и воспринимать, он разбит на списки, тезисы, подпункты. Но контент в списках размещён неравномерно: если об одной услуге достаточно рассказать в двух словах, то для раскрытия другой может понадобиться приличных размеров текст, из-за чего пункты списка выглядели бы неодинаково и неаккуратно.

Чтобы решить эту задачу, мы оставили важные части текста на виду, а подробности вынесли в поп-ап окна, всплывающие по клику на кнопку «Подробнее». Так мы смогли разместить большое количество текста в описании, не испортив красивый визуал блока.

В блоках с призывом использовали открытые формы, так как они более удобны для пользователей: не нужно лишний раз кликать, чтобы оставить заявку.

Некоторые блоки спроектированы в нескольких вариантах, поскольку задачи, которые они выполняют, можно было эффективно решить несколькими способами.

Для блока «Направления работы» предложено 3 варианта оформления:

• Полноэкранный горизонтальный скролл с масштабными 3D моделями. Позволяет продемонстрировать продукт, а горизонтальный скролл делает визуал нестандартным и интересным.
• Список. Простой и понятный для восприятия, при этом, позволяет легко масштабировать проект: добавлять новые пункты, по мере появления новых направлений.
• Слайдер. Интересное решение с анимацией, которая добавляет WOW-эффект в проект, при этом, не перегружает экран, не заставляет пользователя бесконечно скролить страницу. Но есть минус: часть контента скрыта от пользователя, и надо быть готовым к тому, что никто не будет листать, и всё, что спрятано, так и останется непрочитанным.

Предложено 3 варианта оформления блока с сертификатами:

Первый вариант смотрелся гармонично и целостно, но на этапе прототипирования не было известно точное количество сертификатов. А такое расположение элементов в блоке — плохо масштабируемое решение. Была вероятность, что на этапе дизайна число сертификатов окажется настолько большим, что уравновешенный визуал блока будет нещадно похерен.

Поэтому мы заложили альтернативное решение — слайдер, в который можно добавить любое количество сертификатов. Но так как сертификаты могут выглядеть разрозненно, неодинаково и неаккуратно, предложили ещё один вариант блока с модульным расположением превью документов. Концепция легко масштабируется и предусматривает возможность добавить ещё 1−3 документа с сохранением идеи визуала.

Так как изначально в этом варианте сертификаты уменьшены, мы заложили возможность увеличить их по клику на превью. При клике открывается поп-ап окно, в котором можно перелистывать и просматривать все сертификаты, не возвращаясь каждый раз к блоку.

Дизайнерская фишка проекта — сложные анимированные 3D модели, которые реагируют на движение мыши. На них построен весь визуал сайта. В отличие от обычных фотографий, которые используют все конкуренты, сайт с 3D моделями выглядит технологично, инновационно, внушительно. Они вызывают WOW-эффект, производят впечатление о компании, как о современном, высокотехнологичном промышленном предприятии.

3D модель — это мощный акцент, якорный объект, который притягивает к себе максимум внимания. Поэтому, при создании дизайна сайта, мы использовали простые решения с минимальным количеством анимации, чтобы не переборщить с визуальными эффектами, сохранить простоту восприятия.

Веб-дизайн — ключевое направление нашей студии. Мы создаём прототипы с максимальной детализацией, а не просто наваливаем на страницу серых квадратов. Поэтому частично визуал сайта вырисовывается уже на этапе прототипа, а на этапе дизайна остаётся только финализировать макеты.

Фирменные цвета заказчика — тёмно-синий и оранжевый. Причём оба довольно насыщенные и активные. Мы взяли за основу синий, а акцентным, для небольших элементов, сделали оранжевый.

Части заголовков выделены цветом, чтобы придать проекту индивидуальности. Дизайн сайта строгий, аккуратный, минималистичный. При этом, он не выглядит скучно или шаблонно.

Поскольку сайт завода не предполагает сложного функционала или нестандартных интеграций, а в визуале не использовались навороченные эффекты, с точки зрения вёрстки проект был простым, что позволило в кратчайшие сроки запустить сайт.

Но наши разработчики и дизайнеры проявили креатив, реализовав необычную анимацию наплыва блоков со скруглением. Это эффектная микроанимация, которая делает взаимодействие с сайтом более приятным, а визуал — эстетичным. При этом, она неакцентная, не перетягивает на себя излишнее внимание, не отвлекает от контента, и, скорей, ощущается, чем заметна глазу. Этим и отличаются премиальные современные сайты в духе минимализма.