Редизайн сайта «Гидрамакс»: новая страница как основа для обновления всего сайта
Компания «Гидрамакс» занимается ремонтом и обслуживанием гидравлики и поставляет запчасти из Китая.
Задача проекта была не в том, чтобы одномоментно переделать весь сайт. Нужно было начать с одной новой страницы и на её основе сформировать новую визуальную систему, которую позже можно будет постепенно распространить на остальные разделы.
При этом важно было сохранить фирменные цвета и технический характер бренда.
Что было в исходной версии
Старая страница выполняла свою функцию, но визуально уже устарела.
Основные сложности:
- слабая визуальная иерархия;
- много мелкого текста;
- разные карточки и блоки выглядели разрозненно;
- длинную страницу было сложно быстро просмотреть;
- важные действия и преимущества терялись среди большого объёма информации;
- не хватало единой системы оформления, которую можно было бы масштабировать на другие страницы.
При этом полностью менять фирменный образ компании не требовалось.
Что нужно было сделать
Основная задача:
- разработать новую страницу в современном дизайне;
- сохранить фирменную цветовую гамму;
- сделать информацию легче для восприятия;
- выстроить понятную структуру;
- показать ассортимент комплектующих;
- объяснить, как происходит подбор запчастей;
- продумать единый стиль блоков;
- создать основу для дальнейшего редизайна всего сайта.
Новый визуальный подход
В дизайне сохранили основные фирменные цвета: чёрный, белый, серый и красный акцент.
Но сама подача стала заметно современнее.
Мы добавили больше воздуха, усилили контраст между смысловыми блоками, унифицировали карточки и сделали акценты более понятными.
Первый экран стал сразу объяснять, чему посвящена страница и какое решение предлагает компания.
При этом дизайн остался техническим и деловым — без лишней декоративности, которая была бы неуместна для B2B-направления.
Структура страницы
Здесь было важно не просто показать красивые карточки с комплектующими.
Пользователь должен понять:
- какие гидравлические комплектующие можно заказать;
- для какой техники они подходят;
- как происходит поставка;
- как специалисты помогают с подбором;
- что делать, если точный артикул или модель неизвестны;
- какие данные можно предоставить для поиска нужной детали;
- как оформить запрос.
То есть страница должна работать не только для человека, который уже точно знает, какую запчасть ему нужно заказать.
Часто клиент понимает только задачу или неисправность, но не знает конкретную модель комплектующего. Поэтому отдельно показали, что специалисты могут помочь с подбором по имеющейся информации, параметрам и технике.
Что изменили
Переработали первый экран
Сделали более сильный заголовок, понятное предложение и заметное целевое действие.
Разделили длинную страницу на смысловые блоки
Пользователь может быстро просмотреть страницу и найти интересующий раздел.
Показали ассортимент комплектующих
Отдельные категории получили более понятную визуальную подачу.
Объяснили процесс подбора
Важно было снять барьер: клиенту не обязательно самому знать точный артикул детали.
Унифицировали карточки и элементы интерфейса
Преимущества, этапы работы, FAQ, формы и другие блоки теперь выглядят как части одной системы.
Продумали дальнейшее масштабирование
Новый дизайн создавался так, чтобы его можно было использовать для других страниц сайта без необходимости каждый раз придумывать стиль заново.
Результат
На первом этапе была создана новая страница, которая стала основой будущего редизайна сайта.
В результате:
- сохранён фирменный стиль компании;
- страница стала современнее и визуально чище;
- улучшилась читаемость;
- появилась понятная логика подачи услуги;
- пользователю проще разобраться в ассортименте и процессе подбора;
- создана единая система блоков для дальнейшего развития сайта.
Итог
Этот проект хорошо показывает, что редизайн большого сайта необязательно начинать с полной переделки всего проекта.
Иногда разумнее сначала создать одну сильную страницу, сформировать на ней новую визуальную и UX-систему, а затем постепенно переносить её на остальные разделы.
Задача: редизайн страницы и создание основы для нового дизайна сайта
Сфера: гидравлические комплектующие / B2B
Формат работы: поэтапный редизайн
Результат: новая масштабируемая дизайн-система с сохранением фирменного стиля