Кейс по проектированию дизайна сайта для компании ТН Система. Разработали лаконичный интерфейс интернет-магазина стройматериалов, создали адаптивы для всех устройств и передали готовый макет в разработку.
История проекта
ТН Система — официальный дилер корпорации ТЕХНОНИКОЛЬ. Компания занимается оптовой и розничной продажей строительных материалов для изоляции, кровли и фасадов. Ассортимент включает теплоизоляцию, рулонную гидроизоляцию, ПВХ-мембраны, мастики, праймеры и фасадные системы. Помимо дистрибуции, ТН Система имеет собственное производство профлиста, клиновидной изоляции и фасонных изделий. Инфраструктура компании включает автопарк из 16 грузовых автомобилей.
С этим заказчиком мы работаем на постоянной основе: ранее выполняли дизайн рекламных поверхностей и брендирование транспорта. Следующим этапом сотрудничества стала разработка дизайна интернет-магазина.
Заказчик предоставил подробное техническое задание с комментариями и пожеланиями по структуре и визуальному оформлению.
Задачи и точки роста
На старте проекта мы провели аудит материалов и выделили три ключевых направления работы:
— Визуальная идентификация
Требовалось разработать интерфейс, соответствующий статусу официального дилера ТЕХНОНИКОЛЬ. Важно было сохранить узнаваемость бренда через акцентный красный цвет и при этом создать лаконичные, не перегруженные страницы для удобной работы с каталогом строительных материалов.
— Структура интернет-магазина
Заказчик предоставил подробное ТЗ с перечнем необходимых страниц: главная, каталог, карточка товара, корзина, контакты, услуги, личный кабинет. Требовалось спроектировать логичную навигацию внутри разделов с учётом специфики ассортимента — технически сложные позиции с множеством характеристик.
— Адаптивность под все устройства
Сайт должен был корректно отображаться на любых разрешениях экранов, так как целевая аудитория часто использует мобильные устройства. Интерфейс обязан сохранять функциональность и читаемость вне зависимости от типа устройства.
Процесс и применённые решения
1. Утверждение визуальной концепции
Для ускорения согласования общего стиля мы подготовили два варианта оформления первых экранов. Это позволило клиенту на старте выбрать направление дизайна и избежать итераций на этапе отрисовки всех страниц. После утверждения концепции мы применили её ко всему проекту.
2. Визуальные решения
• Цветовая схема: белый фон страниц создаёт ощущение чистоты и порядка, что важно для каталога с большим количеством технических позиций. Акцентный красный цвет используется в кнопках, элементах навигации и маркёрах важной информации.
• Стилистика: минимализм и лаконичность. Интерфейс не перегружен декоративными элементами, всё подчинено удобству поиска и выбора товара.
• Шрифт: Gilroy обеспечивает чёткую иерархию текста: заголовки выглядят плотно и уверенно, основной текст комфортно читается с любого устройства.
3. Спроектированные страницы
В рамках проекта разработаны макеты:
• Главной страницы с презентацией ключевых преимуществ дилера и категорий товаров.
• Каталога с удобной фильтрацией и карточками продукции.
• Карточки товара с подробными характеристиками, блоками наличия и сопутствующих позиций.
• Страницы услуг и контактов.
• Корзины и личного кабинета для управления заказами и данными.
Каждая страница спроектирована так, чтобы сокращать путь клиента до целевого действия — оформления заявки или заказа.
4. Адаптивный дизайн
Мы подготовили макеты для всех разрешений экранов — от смартфонов до широкоформатных мониторов. Благодаря этому сайт сохраняет лаконичный и аккуратный вид на любом устройстве, а разработчики получают готовую базу для вёрстки без дополнительных доработок.
Итог и результат
Работы выполнены и переданы заказчику. Общий срок реализации с учётом всех согласований составил 3 недели.
Что получил клиент:
• Полный комплект дизайн-макетов для интернет-магазина строительных материалов.
• Адаптивный интерфейс, готовый к передаче в разработку.
• Визуальное решение, подчёркивающее статус официального дилера ТЕХНОНИКОЛЬ и наличие собственного производства.
• Удобную навигацию, которая помогает посетителю быстрее находить нужный товар и оформлять заказ.
