Задача
Главная сложность в том, что четыре продуктовых направления обслуживают четырёх разных покупателей. Бронежилет для силовой структуры, реплика шлема для страйкбольной команды, мотошлем для мотоциклиста и наколенники для картинга — это разные люди с разными вопросами, и каждый должен попасть в свою часть каталога, не спотыкаясь о чужую.
Отсюда остальные требования:
- изделие важнее карточки товара. Снабженцу нужны конструкция, назначение и характеристики: из чего собран бронежилет, на какой рост и размер подгоняется, какого класса защита. Кнопка «в корзину» в этом разговоре вообще не главная;
- вместо покупки — заявка. Пользователь набирает изделия в подборку, указывает вид заказа и объём партии и отправляет заявку от организации;
- доверие через документы. На этом рынке сертификаты, дипломы и награды — не украшение страницы «О компании», а часть коммерческого разговора, и им нужен собственный раздел;
- язык. Предприятие работает и за пределами Беларуси, поэтому переключатель языка заложен в макет с самого начала.
Решение
Каталог из четырёх направлений. Бронезащита «для силовых структур», реплики «для военных игр», мотошлемы и гражданская противоударная экипировка. Каждое направление получает на главной свой полноэкранный блок: тёмная репортажная фотография, крупное название, мелкий надзаголовок аудитории, под ним — сетка изделий на светлом фоне и набор подкатегорий. Главная — это лента таких блоков, между которыми вставлены материалы из «Медиа»: новость о новом материале брони стоит прямо рядом с продукцией, которой она касается.
Навигация в двух состояниях. Вся навигация вынесена в левую колонку. В раскрытом виде это полноценное меню: логотип, направления, горячая линия и почта. В свёрнутом — узкая вертикальная лента иконок: шлем, балаклава, защита корпуса, очки, перчатка, по пиктограмме на категорию, плюс телефон и почта внизу. Пользователь всё время видит, где он находится, но лента не отъедает экран у фотографий изделий. Сверху — переключатель языка, «Обратная связь», поиск и корзина заявки со счётчиком позиций; справа у края экрана — вертикальный указатель прокрутки.
Страница направления. Та же обложка, под ней строка подкатегорий и сетка изделий, разбитая на именованные секции — «Бронежилеты», «Защитные шлемы» и так далее. Плитки намеренно разного размера: крупные кадры на моделях чередуются с предметной съёмкой на светлом фоне и тёмными промоплитками материалов. На плитках предусмотрены значки кругового обзора и видео, чтобы изделие можно было осмотреть, не заходя в карточку.
Карточка изделия. Обложка с хлебными крошками направления, крупным названием и переходами «Вернуться к списку» и «Следующий продукт» — снабженец, сравнивающий модели, листает их подряд. Дальше фотоблок: крупный основной кадр, дополнительные ракурсы, видео, увеличение, кнопка добавления в заявку прямо на главном кадре. Под фотографиями — вкладки «описание конструкции», «назначение» и «характеристики изделия». Технический текст разложен в две колонки и сворачивается кнопкой «Подробнее», чтобы длинная справка не растягивала страницу. Внизу — похожая продукция.
Заявка вместо покупки. Корзина собирает изделия как магазин, но показывает по каждой позиции фотографию, название, краткое описание конструкции и ссылку на полное — вместо цены и количества. Под подборкой панель параметров: вид заказа (например, постоянный оптовый) и общее количество партии. Форма заявки собрана под организацию: ФИО, название организации, e-mail, телефон, страна или регион и свободное поле «Дополнительно». В макете прорисованы все состояния полей — активное, заполненное, успешно проверенное с зелёной галочкой и ошибочное с красной заливкой и подсказкой «Проверьте ваш текст!», — чтобы разработчику не пришлось додумывать поведение валидации.
Остальные разделы. «О компании» — не абзац о миссии, а пресс-релиз с историей производства и фигурой в полной экипировке, у которой выноски ведут на конкретные изделия, так что история читается заодно как продуктовая линейка. «Сертификаты» — три вкладки документов с раскрытием пояснения по каждому. Правовой блок — правила продажи, политика конфиденциальности и обработка персональных данных с вложенными вкладками. «Медиа» — общая лента новостей и блога плитками, с типом материала и датой поверх фотографии.
Визуальный язык. Контраст двух миров: тёмные репортажные обложки направлений и почти стерильные светлые сетки изделий. Ни одного декоративного элемента — вся выразительность в фотографии, крупной типографике и ритме плиток. Акценты только функциональные: чёрная кнопка «Оформить заявку», красная заливка ошибки, зелёная галочка проверенного поля. Платформой сайта был WordPress, макеты передавались в разработку со всеми состояниями интерфейса.
Результат
Предприятие получило каталог, который говорит на языке своего покупателя: четыре аудитории разведены по направлениям, изделие описано как изделие — конструкцией, назначением и характеристиками, — а сделка начинается с заявки на партию, а не с корзины покупок. Сертификаты, дипломы и награды вынесены в отдельный раздел и работают как аргумент, а не как страница «о нас».
Дизайн сделан с нуля и целиком: главная, страница направления, карточка изделия, корзина заявки с формой и валидацией, «Медиа», «О компании», «Сертификаты» и правовой блок — восемь полных макетов страниц, по которым можно собирать сайт без домысливания.
