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

Для автоматизированного управления технологическими процессами Группа компаний SCAD tech разрабатывает комплексные решения. Они предназначены для нефтегазового сектора, горно-металлургической промышленности, энергетики, транспорта и инфраструктуры. Специалисты ГК проектируют и внедряют системы для управления объектами (ЕСДУ и СДКУ), разрабатывают математические модели для регулирования движения нефти, производят программные продукты для работы автоматизированных систем (блок-контейнерная продукция, шкафы автоматики и телемеханики, и т. д.).

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

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

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

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

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

Другая фишка главной — карта с географией проектов с отрисованными симпатичными промышленными объектами. Её реализовали уже во втором спринте, поскольку первый релиз был нужен к выставке — мы запустили облегченную версию сайта, на которую сейчас накатываем фичи и обновления.

Страница «О компании» — одна из важнейших, поскольку пользователям нужно сложить впечатление о потенциальном бизнес-партнёре. Здесь, помимо текстового описания, появляется аккуратный таймлайн с вехами развития группы компаний и блок с ценностями.

Немножко забегаем вперёд — смотрите, как классно слайдится таймлайн:

На страничке «Наше руководство» мы разместили слайдер с большими фотографиями и алыми плашками. В сочетании с красочной профессиональной съемкой от заказчика получилось очень эффектно:

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

Главная фишка сайта — пирамида на главной: с помощью масок внутри каждого её блока при наведении появляются фотографии, соответствующие одному из комплексных решений. При скролле она служит своеобразным оглавлением, а при клике на раздел пользователь «проваливается» в нужный сегмент:

Мы любим зашивать микроанимации в пользовательские взаимодействия: например, мини-промышленные объекты на карте с главной страницы забавно подпрыгивают при наведении. Как и контакты в футере. А на страничке «Контакты» точки расположения офисов спускаются на карту сразу при загрузке страницы, а при клике преобразуются в геометку.

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

На сайте SCAD tech есть и другая форма — для обратной связи по любому вопросу, которая учитывает, с какой страницы задаётся вопрос, и распределяет запросы на почты разных отделов:

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

На адаптиве в раскрывающемся меню сразу видна вся структура сайта — это помогает пользователям быстро сориентироваться и найти нужное: