Функциональный дизайн интернет-магазина для поставщика производственного оборудования

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

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

До редизайна:

После:

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

Блок «каталог» ДО:

Блок «каталог» ПОСЛЕ:

Дизайн страницы каталога мы продумывали до мелочей – от вида карточки товара до элементов фильтра.

Было:

Стало:

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

Поэтому мы уделили разработке мобильной версии особое внимание. Учли потребности разной целевой аудитории и сделали адаптив максимально простым и удобным в использовании.

Прототип:

Дизайн мобильной версии:

1. Цветовая палитра: контраст и акценты

   Чёрно-белая основа создаёт ощущение профессионализма, соответствует индустриальной эстетике.

   • Белый фон: улучшает читаемость, делает контент воздушным.

   • Чёрные элементы (текст, разделители, рамки): добавляют чёткость и структуру.

   Акцентный оранжевый направляет внимание на ключевые действия:

   • Кнопки «Каталог», «Узнать стоимость», «В корзину».

   • Важные статусы (скидки, выгодные предложения).

   • Интерактивные элементы (ховеры, иконки).

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

   

2. Типографика: чёткость и читабельность

   Шрифты без засечек (у нас это Manrope):

   • Основной текст:: лёгкий, с хорошим межстрочным интервалом.

   • Заголовки: полужирные, с увеличенным кернингом для лучшего восприятия.

   Иерархия текста:

   • Чёткое разделение на заголовки H1-H4.

   • Акценты оранжевым (например, цены или сроки поставки).

3. Компоновка и UX-решения

   • Строгая модульная сетка упорядочивает сложный каталог оборудования.

   • Крупные фото оборудования на темном фоне (как в каталогах B2B).

   • Минимум декора — только функциональные элементы:

     • Чёткие фильтры по параметрам (категории, размер заготовки, наличие ЧПУ и т.д).

     • «Умное» сравнение моделей в 1 клик.

     • Лёгкая корзина, где пользователь может узнать стоимость и расчитать лизинг.

   

4. Интерактивность и микроанимации

   Акцентные элементы «оживают» – кнопки плавно меняют цвет при наведении (черный или белый → оранжевый).

   Интерактивные подсказки по наведению на кнопки с иконками в карточке товара (например кнопка скачать технический паспорт оборудования).

   

   Также усилили дизайн маркетинговыми элементами (акционный баннер на странице каталога):

   

   В результате нам удалось добиться:

   • Строгого имиджа бренда: чёрно-белая гамма вызывает доверие у корпоративных клиентов.

   • Ясности: пользователь не отвлекается на лишнее, фокус на выборе оборудования.

   • Запоминаемости: оранжевые акценты делают бренд узнаваемым.

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

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

1. Пользователь выбирает категорию товара – либо в шапке сайта по кнопке «Каталог», либо на главной странице в блоке «Оборудование», либо через разводящую страницу.

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

3. Если пользователь не знает, какое оборудование ему больше подходит, мы предусмотрели функцию «Сравнение».

4. Далее пользователь может добавить товар в корзину. В корзине предусмотрены кнопки «Узнать стоимость» и «Рассчитать лизинг», которые ведут на консультацию с менеджером и дальнейшую продажу.

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

Сейчас мы продолжаем работать над проектом и приступаем к верстке.