Определить задачу
Интерактивный дом и раздел «Решения» ведут к подбору для скатной кровли, фасада, перегородок, полов и перекрытий.
Редизайн сайта · 2026
Теплокровля
Каталог стройматериалов, в котором выбор начинается с задачи
Спроектировали сайт поставщика теплоизоляции, кровельных и фасадных материалов. Связали каталог с решениями для дома и собрали понятный путь от поиска материала до запроса на комплектацию.
368карточек товаров
4сценария подбора
9статей в журнале
Видео · 10 секунд
Первый экран в движении
Главная знакомит с материалами и показывает, куда идти дальше. Каталог, подбор по конструкции и журнал доступны прямо с первого экрана.
Посмотреть на сайте01 / Задача
Два способа начать подбор
Покупатель может прийти с названием утеплителя или с вопросом «чем утеплить крышу?». В исходной версии главная открывалась баннерами производителей. В новой версии первый экран знакомит с «Теплокровлей», а навигация сразу предлагает каталог и подбор по конструкции.
Сравнить материалы
Поиск по названию и бренду, фильтры, сортировка и страницы категорий помогают сузить выбор. В карточке видны варианты, параметры упаковки и похожие товары.
Подготовить запрос
Материалы можно собрать в список для расчёта и обсуждения комплектации. Блоки доставки, документов и контактов помогают подготовиться к разговору с поставщиком.
02 / Сравнение
Главная до и после
В редизайне вместо отдельной витрины каждого производителя появился общий визуальный язык «Теплокровли». Меню показывает основные разделы, а первый экран даёт прямой вход в каталог, решения и журнал.
Оба экрана сняты при ширине 1440 px. Исходная версия зафиксирована 9 ноября 2026 года. Нажмите на кадр, чтобы увеличить.
03 / Интерфейсы
Как устроен новый сайт
Крупные фотографии показывают материалы в контексте стройки. Синие акценты отмечают действия и сохраняют связь с фирменным знаком. Каталог и карточки используют спокойную сетку для сравнения параметров.
Каталог
↗Разделы, поиск, фильтры и сортировка на одном экране.
Карточка товара
↗Исполнение, упаковка, характеристики и похожие материалы на отдельном URL.
Подбор по конструкции
↗Четыре сценария с объяснением состава конструкции и примерами материалов.
Журнал
↗Девять материалов о конструкциях, выборе утеплителя и подготовке заказа.
Мобильная версия
От первого экрана до категории
На узком экране меню складывается, а элементы поиска, выбора конструкции и карточки перестраиваются в одну колонку. Интерфейс проверили на ширинах 390 и 320 px.
04 / Визуальный контент
Фотобанк для каталога и журнала
Подготовили фотореалистичные иллюстрации по сценариям использования материалов. Крупные планы показывают устройство конструкций, а общие планы помогают представить результат.
Примеры из серии, созданной с помощью генеративной графики. Иллюстрации используются в решениях, статьях и разделах каталога.
05 / Подход к редизайну
Что важно для редизайна
Мой подход начинается с маршрута покупателя. Затем проверяю, как этот маршрут работает в интерфейсе и какие условия нужно выполнить при запуске на домене компании.
01 / Проектирование
Навигация и связи
- На главной выделили два маршрута, через каталог и через задачу по утеплению.
- Связали решения и статьи с нужными категориями и карточками товаров.
- Дали разделам и товарам отдельные адреса, добавили хлебные крошки и похожие материалы.
02 / Контроль качества
Проверка макета
- Протестировали поиск, фильтры, выбор исполнения и добавление товара в список.
- Проверили интерфейс на ширинах 320, 390 и 1280 px.
- На 456 страницах проверили ссылки, уникальность заголовков, метаописания, canonical и JSON-LD.
03 / Переход на домен
Чек-лист перед запуском
- Сопоставить старые и новые адреса, настроить перенаправления 301.
- Проверить sitemap и правила индексации на рабочем домене.
- Сверить цены и наличие, подключить отправку заявок и провести тестовую отправку.
Сейчас редизайн работает в демонстрационном режиме. Форма показывает сценарий запроса, а индексация демо отключена.
Результат проекта
Редизайн доступен в браузере
Можно пройти от главной к решению, открыть конкретный товар и собрать список материалов.