Пересобрали интерфейс «Дельты»: редизайн сайта производителя армирующих профилей

Привет, на связи Webest! В этой статье расскажем, как полностью обновили визуальную подачу и структуру сайта «Дельты» — производителя армирующих профилей для оконных систем.

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

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

О проблеме и задаче

Предыдущий сайт перестал соответствовать самому продукту. У компании сложный ассортимент, несколько направлений и много технической информации, которую важно донести до клиента.

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

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

Начали с новой визуальной концепции

Вместо декоративного редизайна мы построили новый визуальный язык вокруг самого продукта и характера компании.

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

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

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

Перестроили подачу информации о компании

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

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

Компания перестала восприниматься просто как поставщик профилей — сайт показывает, кто стоит за продуктом и какие возможности есть у производителя.

Сделали продукцию заметной частью интерфейса

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

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

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

Адаптировали интерфейс для мобильных устройств

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

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

Упростили навигацию по большому объёму информации

На сайте много разных сущностей: продукция, характеристики, направления, информация о компании, документы, новости и другие разделы.

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

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

Переработали карточки и продуктовые сценарии

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

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

Проработали больше 100 экранов

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

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

Главное изменение — сайт перестал быть просто набором информационных страниц

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

Хотите обновить визуальный образ компании и превратить сайт в полноценный инструмент презентации продукта? Оставьте заявку на сайте webest.ru