Как мы нашли красоту и эстетику в электронных модулях, и показали ее пользователям

Тоже считаете, что сайты производственных предприятий просто обязаны перестать быть скучными? Мы с вами полностью согласны!

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

Отдельно стоит сказать о масштабе заказчика. Фортэкс – научно-производственное предприятие, занимающееся разработкой и производством информационно-измерительных модулей различного назначения. Заказчик работает с государственными структурами, крупными производственными предприятиями и осуществляет полный комплекс услуг: от разработки до выпуска готовой продукции.

Что было сделано на проекте: 

1. Провели необходимую аналитику для каждого этапа работ

2. Обновили логотип, брендбук и носители фирменного стиля

3. Полностью переработали структуру будущего сайта. Собрали прототип с простыми и понятными разделами, сделали путь пользователя логичным и удобным

4. Посетили предприятие, собрали фактуру и провели фото- и видеосъёмку для наполнения сайта контентом

5. Разработали несколько дизайн-концепций будущего сайта

6. Спроектировали и интегрировали 3D визуализацию

7. Сделали адаптивную верстку для всех устройств

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

На этапе прототипирования мы разложили блоки контента на сценарии и представили клиенту 2 варианта развития событий будущего сайта: классическая схема и упрощенная. 

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

Основная задача – структурировать контент в удобные разделы и сделать акцент на преимуществах компании и уникальных отличиях от конкурентов. Это прежде всего собственное производство, передовое оборудование, лучшие специалисты в отрасли и скрупулезный подход к тестированию продукции перед реализацией – количество брака практически стремится к нулю (чем не могут похвастаться многие крупные лидеры этой отрасли).

Классическая схема карты сайта в этом проекте сработает наилучшим образом. Гибкость такой структуры позволяет решить все маркетинговые задачи. Каждая страница может содержать уникальный набор блоков и максимально выгодно отражать суть предложения. Дальнейшее развитие сайта и добавление новых страниц не будет конфликтовать с общей структурой и логикой повествования. Особое внимание на прототипе мы уделили главной странице, разделу «О компании» и блоку с услугами. 

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

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

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

Выводы дизайн-аналитики:

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

2. Совмещение футера с контактами компании может улучшить пользовательский опыт на сайте. Так как у пользователя на каждой странице сайта внизу будет возможность связаться с компанией и обсудить условия сотрудничества.

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

4. Продемонстрировать комплексно процесс работы на главной странице возможно и с помощью брендированной линейной иллюстрации. Это только позитивно скажется на взаимодействии пользователя с сайтом

На обсуждение заказчику мы вынесли 2 варианта дизайн-концепции. В обоих случаях были использованы фирменные цвета клиента и паттерны из брендбука, которые работают на поддержание общего фирстиля. 

Она направлена на демонстрацию устойчивости, точности и надёжности компании. Основная идея в использовании сетки, которая формирует направляющие и ведёт пользователя, а также в использовании стилизованной линейной иллюстрации.

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

Главный экран

Дизайн выполнен в сдержанной цветовой гамме с добавлением акцентных цветов для заголовков и кнопок.

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

Альтернативный вариант: блок имеет центральную композицию и стилизованную линейную иллюстрацию, состоящую из частей плат.

При прокручивании страницы происходит анимация – которая имитирует процесс сборки платы в единое целое.

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

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

На главной странице показываем лучшие проекты.

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

В него можно перейти, нажав на карточку проекта.

Раздел Документация. На блоке «Документы» не делаем большой акцент, выделяем пока только три направления. Они будут являться фильтром, при переходе на выбранное направление, статьи будут отсортированы. При необходимости, данный блок можно легко скрыть и это не повлияет на дизайн главной страницы.

Контакты и футер

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

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

Главный экран

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

Показываем карточки решений в раскрытом виде и иллюстрируем их абстрактными фигурами (объёмными или линейными). Карточки сменяют друг друга горизонтально при прокрутке страницы. 

3 альтернативных варианта:

Проекты

Карточки проектов расположены списком. Такое решение подходит для демонстрации большого количества проектов в блоке.

Перейти в проект возможно нажав на строку проекта.

Документация

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

Футер

Делаем акцент на номер телефона. Повторяем эффект главного экрана с ярким фоном.

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

Особенностью проекта является 3D визуализация: от изготовления сложных микросхем и плат, сборки и тестирования до упаковки и доставки заказчику. То, что недоступно человеческому глазу, мы представили в виде визуально привлекательных моделей, где каждый увидит в этом красоту и эстетику. 

Суть идеи: воплотить в графике негласный слоган «от идеи до продукта», показать уникальные решения и преимущества не просто на словах, а с погружением в реальный процесс. 

Так мы отрисовали и анимировали в каждом блоке этапы производства. На главном экране пользователя встречает детально проработанная печатная плата с точностью повторяющая оригинал. Модель на 100% визуально не отличима от производимых плат на производстве. Для этого мы использовали чертеж оригинальной платы из автокада и воспроизвели с точностью до мельчайших деталей в 3D графике.

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

Контент повторяет визуальный контекст, но честно говоря, и без текстового сопровождения результат сильно впечатляет. Хочется разглядывать каждую деталь, настолько достоверно и тщательно они проработаны.

У нас получилось в сроки сделать качественный имиджевый продукт под ключ: от фирстиля до готового сайта, который выглядит стильно, современно и выделяет заказчика среди однотипных сайтов в подобной нише. Необычные решения – 3D визуализация процесса производства смотрятся по-новому в данном формате сайтов, поддерживая общую миссию компании – «воплощение нестандартных идей». Такая стилистика позволит сайту оставаться актуальным еще долгие годы, а качественная внутрянка поддержит это актуальность.