Выполнено в рамках работы в студии 4-6
Из стандартного каталога товаров и услуг — в выразительную цифровую витрину премиального автотюнинга. Выполнен редизайн старого сайта, новый дизайн строится вокруг сочных фотографий, поэкранной подачи и технической отрисованной графики.
Роль
Primary Web-designer
Зона ответственности
Визуальная концепция, UI-дизайн, ключевые страницы, адаптивные версии, графические элементы, ведение проекта
Посетить сайт:
https://rng-t.ru
Год / рынок / статус
2025 / Международныйе / Завершён
Автотюнинг Renegade
Основой концепции стала визуальная ценность самого продукта: автомобилей, деталей и результатов тюнинга. Вместо небольших фотографий и плотных информационных блоков новый дизайн использует крупные изображения, выразительные композиции и последовательную поэкранную подачу.
Тёмный фон создаёт глубину и поддерживает премиальное позиционирование. Светлая типографика формирует чёткую иерархию, а красные акценты используются для навигации, активных состояний и основных действий. Нестандартная форма кнопок отсылает к форме спидометра и колёс, что подчеркивается текстом по контуру и стрелкой внутри.
Тёмный фон создаёт глубину и поддерживает премиальное позиционирование. Светлая типографика формирует чёткую иерархию, а красные акценты используются для навигации, активных состояний и основных действий. Нестандартная форма кнопок отсылает к форме спидометра и колёс, что подчеркивается текстом по контуру и стрелкой внутри.
Визуальное направление
Digital showroom для премиального автомобильного бренда
На прежнем сайте визуальная подача не соответствовала качеству и стоимости продукта. Фотографии использовались слишком мелко, часть материалов терялась внутри плотной структуры, а интерфейс не создавал ощущения премиального автомобильного бренда.
При этом сайт хорошо работал как коммерческий и SEO-инструмент: на нём существовало большое количество посадочных страниц, товаров, услуг и проиндексированных ссылок. Поэтому задача заключалась не в полной перестройке архитектуры, а в обновлении визуальной системы с максимальным сохранением существующей структуры и URL.
Нужно было сделать сайт:
При этом сайт хорошо работал как коммерческий и SEO-инструмент: на нём существовало большое количество посадочных страниц, товаров, услуг и проиндексированных ссылок. Поэтому задача заключалась не в полной перестройке архитектуры, а в обновлении визуальной системы с максимальным сохранением существующей структуры и URL.
Нужно было сделать сайт:
- более выразительным и эмоциональным;
- технологичным, но не перегруженным;
- ориентированным на крупный визуальный контент;
- понятным при работе со сложным каталогом;
- последовательным на десктопе и мобильных устройствах;
- достаточно гибким для товаров и проектов с разным объёмом материалов.
Задача
Обновить визуальный образ, сохранив рабочую структуру сайта
Исследование было сосредоточено на визуальном языке международного премиального автомобильного сегмента: подаче фотографий, ритме страниц, взаимодействии типографики с изображением и способах демонстрации технических деталей.
Мы решили уйти от прямых продаж, перегруженных рекламных блоков и визуального давления. Вместо этого доверие должно было формироваться через качество подачи, масштаб изображений, детальную демонстрацию продукта и сильные реализованные проекты.
Параллельно был проведён аудит существующего сайта. Он помог определить основные проблемы:
Мы решили уйти от прямых продаж, перегруженных рекламных блоков и визуального давления. Вместо этого доверие должно было формироваться через качество подачи, масштаб изображений, детальную демонстрацию продукта и сильные реализованные проекты.
Параллельно был проведён аудит существующего сайта. Он помог определить основные проблемы:
- изображения не выполняли роль главного носителя ценности;
- товары и проекты выглядели слишком однотипно;
- техническая информация была визуально отделена от общей стилистики;
- SEO-тексты были сложны для восприятия из-за плотной вёрстки;
- мобильная версия не сохраняла эмоциональность десктопной подачи;
- сложная структура каталога требовала более понятной навигации.
Исследование и аудит
Как премиальные automotive-бренды формируют доверие
Сайт объединяет большой каталог деталей и направлений тюнинга. Пользователь может искать продукт двумя основными способами:
В каталоге представлены обвесы, кованые диски, тормозные и выхлопные системы, бамперы, диффузоры, капоты, пороги, сплиттеры, спойлеры и другие элементы.
Главной задачей навигации было сохранить доступ ко всему ассортименту, но не превращать меню в длинный неструктурированный список. Категории были разделены на уровни, а переход между марками автомобилей и типами деталей стал частью единой навигационной системы.
Основной сценарий:
Марка автомобиля → Категория тюнинга → Товар → Детальная информация → Консультация или заказ
Пользователь также может начать с категории товара и затем уточнить совместимую марку или модель автомобиля.
- по марке автомобиля;
- по типу детали или категории тюнинга.
В каталоге представлены обвесы, кованые диски, тормозные и выхлопные системы, бамперы, диффузоры, капоты, пороги, сплиттеры, спойлеры и другие элементы.
Главной задачей навигации было сохранить доступ ко всему ассортименту, но не превращать меню в длинный неструктурированный список. Категории были разделены на уровни, а переход между марками автомобилей и типами деталей стал частью единой навигационной системы.
Основной сценарий:
Марка автомобиля → Категория тюнинга → Товар → Детальная информация → Консультация или заказ
Пользователь также может начать с категории товара и затем уточнить совместимую марку или модель автомобиля.
Каталог и навигация
Сложная товарная система без ощущения перегруженности
На десктопе крупные горизонтальные композиции позволяют показать автомобиль в пространстве и создать ощущение цифрового шоурума. Фотография, текст и технические детали объединяются в самостоятельные поэкранные блоки.
На мобильных устройствах эта логика перестраивается в последовательную вертикальную историю. Изображения, характеристики, описание и основные действия располагаются в понятном порядке, не теряя визуального масштаба.
Отдельное внимание уделялось мобильной навигации по каталогу. Большое количество брендов и категорий должно было оставаться доступным без перегрузки одного экрана. Для этого меню разделено на последовательные уровни выбора.
На мобильных устройствах эта логика перестраивается в последовательную вертикальную историю. Изображения, характеристики, описание и основные действия располагаются в понятном порядке, не теряя визуального масштаба.
Отдельное внимание уделялось мобильной навигации по каталогу. Большое количество брендов и категорий должно было оставаться доступным без перегрузки одного экрана. Для этого меню разделено на последовательные уровни выбора.
Поэкранная подача и адаптивность
Сохранить эмоциональность на разных устройствах
Помимо основных экранов, для сайта были разработаны дополнительные графические материалы: технические схемы, карты, иллюстрации деталей и визуализации оборудования.
Их нужно было привести к единому стилю, чтобы они не выглядели как случайные изображения из разных источников.
Графический язык строится на тёмной палитре, тонких линиях, модульных композициях и красных акцентах. Такие элементы поддерживают ощущение точности, технологичности и инженерной экспертизы бренда. Техническая информация становится не отдельным служебным слоем, а продолжением общей визуальной системы сайта.
Их нужно было привести к единому стилю, чтобы они не выглядели как случайные изображения из разных источников.
Графический язык строится на тёмной палитре, тонких линиях, модульных композициях и красных акцентах. Такие элементы поддерживают ощущение точности, технологичности и инженерной экспертизы бренда. Техническая информация становится не отдельным служебным слоем, а продолжением общей визуальной системы сайта.
Техническая графика
Инженерная информация как часть айдентики
В результате международный сайт премиального автотюнинга получил новую визуальную систему, соответствующую качеству и стоимости продукта.
Редизайн сохранил существующую структуру каталога и посадочных страниц, но сделал взаимодействие с ними более понятным и визуально последовательным. Крупные фотографии стали главным носителем бренда, техническая графика вошла в единую систему, а сложная навигация по маркам автомобилей и категориям деталей стала более структурированной.
Сайт продолжает работать как каталог товаров и услуг, но теперь воспринимается шире — как цифровой шоурум, в котором ассортимент, услуги и завершённые проекты формируют единый премиальный опыт.
Редизайн сохранил существующую структуру каталога и посадочных страниц, но сделал взаимодействие с ними более понятным и визуально последовательным. Крупные фотографии стали главным носителем бренда, техническая графика вошла в единую систему, а сложная навигация по маркам автомобилей и категориям деталей стала более структурированной.
Сайт продолжает работать как каталог товаров и услуг, но теперь воспринимается шире — как цифровой шоурум, в котором ассортимент, услуги и завершённые проекты формируют единый премиальный опыт.
Результат
Результат
