ООО “Оптовые системы Альфаснаб” - компания, специализирующаяся на производстве и продаже комплектующих для систем электрического обогрева и отопления бытовых помещений и промышленных объектов. Также предприятие занимается реализацией средств учета ресурсов и LED освещения от ведущих российских и зарубежных производителей.
Задача
Перед командой стояла цель — обновить визуальное оформление корпоративного сайта, созданного на шаблоне Aspro Next. Этот шаблон был выпущен в 2017 году, и дизайн ресурса соответствовал тем стандартам. Однако за прошедшие годы рынок e-commerce значительно изменился, усилилась конкуренция, выросли ожидания пользователей. В результате сайт стал восприниматься как устаревший, что могло негативно сказаться на доверии к компании и повлечь снижение конверсии.
Варианты решения
Рассматривались два подхода:
- Проведение редизайна с использованием существующего шаблона и его стандартных компонентов.
- Полный перенос сайта на современный шаблон.
Почему выбран редизайн на текущем шаблоне
Несмотря на привлекательность идеи переноса на новый шаблон, от неё отказались по ряду объективных причин. За годы эксплуатации сайт наполнился большим объёмом уникального контента — новостями, статьями, лендингами, акциями и баннерами. Также были внедрены кастомные доработки на уровне кода, которые обеспечивали специфический функционал. Перенос всех этих элементов на новую платформу потребовал бы значительных затрат времени и ресурсов.
Дополнительно было важно сохранить узнаваемость интерфейса — дизайн сайта уже стал привычным для постоянных клиентов, и любые кардинальные изменения могли нарушить пользовательский опыт.
Решение
Было принято компромиссное решение — провести визуальное обновление существующего шаблона. Такой подход позволил улучшить внешний вид сайта, сохранив при этом все функциональные особенности и структуру, к которой привыкли пользователи.
Обновление шапки сайта
Исследования, включая работу Якоба Нильсена, показывают, что пользователи сканируют веб-страницы по шаблону, напоминающему букву "F" — сначала обращая внимание на верхнюю часть экрана. Именно поэтому шапка сайта играет ключевую роль в формировании первого впечатления.
Изначально верхняя часть сайта содержала визуально перегруженный логотип с большим количеством текстовых элементов. Такой подход ранее мог восприниматься как надёжный и убедительный, однако с течением времени визуальные предпочтения аудитории изменились. Кроме того, организация уже использовала актуальный логотип с лаконичным графическим элементом — нефтяной вышкой — который лучше соответствовал текущему стилю и восприятию бренда.
С учётом специфики B2B-сегмента и практических пожеланий со стороны клиента, шапка сайта была переработана с акцентом на функциональность и простоту. В неё были добавлены:
- Адрес электронной почты для быстрой связи — позволяет оперативно задать вопросы по наличию, срокам поставки, условиям сотрудничества и т.д.
- Номер телефона с возможностью связи через WhatsApp — всё больше специалистов по снабжению и закупке отдают предпочтение мессенджерам как более быстрому и удобному каналу коммуникации.
- Более заметная кнопка "Заказать обратный звонок" — как инструмент моментального запроса связи без необходимости покидать страницу.
Обновлённая шапка стала более лаконичной и при этом функциональной, отражая как современные UX-подходы, так и реальные сценарии взаимодействия целевой аудитории с сайтом.
Оптимизация баннеров
Визуальные баннеры на сайте не соответствовали современным стандартам дизайна — использовались низкокачественные изображения, компоновка выглядела устаревшей и перегруженной. Основной причиной этого была нехватка качественного визуального контента от производителей: фотографии товаров часто доступны только в одном ракурсе и ограниченном разрешении (как правило, не более 500×500 пикселей). Это значительно усложняет создание эстетичных и информативных баннеров.
Для решения этой проблемы было принято решение перейти к работе с 3D-графикой. Были подготовлены:
- Унифицированная сцена для размещения товаров;
- Набор из 15 трёхмерных моделей ключевой продукции, предназначенных для дальнейшего использования в визуальных материалах.
Дополнительно была переработана текстовая часть баннеров:
- Все тексты приведены к единому стилю;
- Использованы лаконичные и строгие шрифты;
- Ключевые фразы визуально выделены — размещены в красных прямоугольниках, что позволяет акцентировать внимание пользователя на главной информации.
Обновлённые баннеры стали не только визуально привлекательнее, но и эффективнее с точки зрения восприятия и коммуникации с целевой аудиторией.
Обновление иконок в каталоге
Иконки — важный элемент UI-дизайна, влияющий на восприятие структуры каталога и скорость ориентирования пользователя. В предыдущей версии сайта иконки соответствовали визуальным стандартам 2017 года, однако со временем они начали восприниматься как устаревшие. Вместо помощи в навигации они стали создавать визуальный шум.
В рамках обновления были разработаны новые иконки:
- Выполнены в стилистике упрощённого 3D — с сохранением объёмности и формы реального товара, но с минималистичной детализацией. Такой подход перекликается с современными тенденциями интерфейсного дизайна, где достигается баланс между реалистичностью и чистотой изображения.
- Отказ от использования агрессивных красных оттенков позволил сделать визуальное восприятие страницы более спокойным и сбалансированным. Это снизило конфликт между графическими элементами и улучшило общую читаемость интерфейса.
Превью для новостей и статей
Обновлённые иконки не только усилили визуальную целостность каталога, но и повысили удобство взаимодействия пользователей с сайтом.
Изначально для иллюстрации статей и новостей использовались фотографии, скачанные из открытых источников в интернете. Такой подход нёс серьёзные риски: нередко возникали претензии со стороны правообладателей, включая угрозы судебных исков за незаконное использование изображений. Помимо юридических последствий, это влияло и на визуальное восприятие — изображения были разностильными, не сочетались между собой, что снижало уровень визуальной целостности сайта.
Для решения этих проблем было предложено следующее решение:
- Все превью стали единообразными: используется нейтральный серый фон и размещённые на нём ключевые объекты, связанные с содержанием статьи.
- Все элементы визуализированы в 3D, что обеспечивает согласованный стиль и высокое качество изображения вне зависимости от содержания материала.
- Дополнительно была реализована возможность самостоятельной генерации новых превью на основе нейросетевых алгоритмов. Заказчику предоставлены готовые примеры и оптимизированный промпт, что позволяет автоматически создавать изображения в том же визуальном стиле, без необходимости обращения к дизайнеру.
Такой подход обеспечил юридическую безопасность, единый визуальный стиль и упростил процесс создания контента.
Результаты и выводы
Комплексное визуальное и функциональное обновление сайта дало ощутимые результаты.
Добавление контактных каналов в шапке сайта — таких как email и WhatsApp — позволило пользователям быстрее инициировать коммуникацию. Это особенно важно для B2B-сегмента, где оперативность часто определяет успех сделки. В результате количество входящих заявок увеличилось в 2–3 раза, по сравнению с аналогичным периодом до обновления.
Обновлённые баннеры, выполненные с использованием 3D-графики и продуманной типографики, стали эффективными точками входа в ключевые разделы. Это повысило кликабельность и увеличило глубину просмотра — пользователи стали чаще переходить в рубрики новостей и статей, проводить на сайте больше времени и вовлекаться в изучение контента.
Редизайн иконок каталога сделал интерфейс более читаемым и минималистичным, устранив визуальный шум и повысив удобство навигации.
Новая система превью для статей и новостей, основанная на унифицированной 3D-графике и генерации изображений с помощью нейросети, не только решила проблему с авторскими правами, но и придала сайту профессиональный и визуально согласованный облик.
Проект показал, что даже без смены шаблона можно существенно освежить и улучшить пользовательский опыт, если подойти к задаче системно. Были соблюдены ограничения по сохранению структуры и внешнего вида, что особенно важно для постоянных клиентов, привыкших к текущему интерфейсу. В то же время за счёт продуманного визуального апдейта, акцента на удобстве и вниманию к деталям удалось добиться реальных бизнес-результатов: рост заявок, вовлечённости и пользовательской активности.
