Кирпич выбирают для дома, а не для корзины.
За выбором кирпича стоит будущий фасад. Я спроектировала визуальную систему Винзер, в которой впечатление от материала связано с характеристиками, примерами зданий и инструментами подбора.
Выбратьматериал-значитпредставитьбудущийдом.
На фотографии кирпич выглядит убедительно. Но для решения нужны еще фактура кладки, технические параметры и понимание того, как материал будет смотреться на фасаде.
Я работала на основе переданных прототипов и материалов бренда. Моя задача была выстроить визуальную иерархию и связать каталог, примеры объектов и инструменты подбора в последовательный опыт выбора.
В каталоге одновременно конкурируют фотографии, характеристики, цены и фильтры. Я разделила их по задачам: слева - уточнение выбора, над выдачей - порядок просмотра, внутри карточки - информация о конкретном материале.
Крупное изображение дает первое впечатление. Название, формат и единицы цены позволяют перейти к предметному сравнению. Акценты помогают найти действие, не превращая каждую карточку в отдельный рекламный баннер.
В карточке товара я разделила выбор внешнего вида и проверку параметров. Цвет, фактура и условия заказа остаются в одном контексте: человеку проще сопоставить впечатление от материала с конкретными характеристиками.
Цвет - отдельный уровень выбора
Я отделила палитру от фактур. Цвет можно просмотреть компактным рядом, сохраняя перед глазами сам товар.
Фактуру нужно увидеть
Для поверхности использовала изображения кладки. Выбранный вариант выделен рамкой: его можно различить не только по названию.
Параметры рядом с действием
Характеристики, количество и цена собраны справа от материала. Единица цены остается рядом с суммой, а оформление заказа завершает эту последовательность.
Один кирпич. Совсем другой масштаб.
Отдельный образец не отвечает на вопрос «как будет выглядеть мой дом?». Поэтому в карточке товара я связала предметное фото, кладку и примеры зданий через единую галерею.
Страница объекта продолжает эту логику с другой стороны: сначала архитектура, затем использованный материал. Так визуальное впечатление получает конкретное продолжение в каталоге.
Внешний вид кладки зависит не только от кирпича: рисунок и цвет шва меняют общее впечатление. В интерфейсе я разделила настройку, сравнение и просмотр результата, чтобы инструменты не заслоняли сам материал.
Настройки рядом с результатом
Панель параметров собрана слева, большая область кладки - справа. Кирпич, тип кладки и шов разнесены по вкладкам: в фокусе остается одна группа настроек.
Два варианта в одном поле зрения
Для сравнения предусмотрено отдельное состояние с двумя образцами. Различия можно увидеть рядом, без необходимости запоминать предыдущую комбинацию.
Больше пространства для материала
Панель можно свернуть. Когда параметры выбраны, управление уступает место крупной фактуре, ее удобнее оценить без визуального шума.
Красивого фасада недостаточно, если дальше нужно готовить проект. Я выделила профессиональный вход для архитекторов и упорядочила дополнительные материалы в карточке товара.
У файлов видны формат и размер; документация отделена от визуальных материалов. Такие небольшие детали помогают заранее понять, что именно будет скачано, и делают каталог полезным рабочим инструментом.
Числатожетребуютдизайна.
В калькуляторе я отделила исходные данные от результата и развела расчет по площади и по объему. Подписи и единицы измерения находятся рядом с полями, а итог собран в самостоятельную контрастную полосу.
Здесь визуальная иерархия работает на точность: сначала понятно, что вводить, затем - где искать ответ.
Для прайса я подготовила отдельные компоновки на узком и широком экране. В мобильной версии информация о товаре собрана вертикально: название, изображение, характеристики и цена читаются последовательно.
Это сохраняет смысл каждого блока и не требует уменьшать всю десктопную страницу до неразборчивого масштаба.
Кнопки, поля, переключатели и иконки собраны в общий набор компонентов. Я проработала варианты и состояния повторяющихся элементов, чтобы каталог, сервисы и информационные страницы говорили на одном визуальном языке.
Страницам для застройщиков, визуализации проекта и портфолио нужны разные акценты. Где-то важнее услуга и следующий шаг, где-то - сам объект. Я сохранила общие правила типографики и действий, меняя композицию под содержание.
В результате я объединила эмоциональную и техническую стороны продукта: крупную подачу материала, понятную структуру каталога и подробные рабочие сценарии.
Ценность этой работы - в связи между экранами. Человек может рассмотреть кирпич, оценить кладку, изучить объект и перейти к расчету или документации в рамках одной системы.
