Проект выполнен в рамках работы в API Media
UX/UI-дизайн многостраничного B2B-сайта
Я разработала дизайн-макеты в Figma на основе структуры, предоставленной командой проекта. Сайт предназначался для архитекторов, проектировщиков и корпоративных клиентов, которым важно удобно изучать ассортимент и технические характеристики продукции.
Моя зона ответственности — визуальная концепция и интерфейсы главной и внутренних страниц. Программную реализацию выполнял разработчик.
- Дизайн главной и внутренних страниц
- Разработка визуальной концепции
- Проработка иерархии контента и навигации
- Дизайн каталога и карточек продукции
- Подготовка адаптивных макетов в Figma
- Передача макетов в разработку
Задача проекта
Задача дизайна — представить ассортимент коммерческого освещения в понятной структуре и помочь профессиональной аудитории находить нужные товары и характеристики без лишней визуальной нагрузки.
Ключевые требования к интерфейсу:
- понятная структура каталога
- удобная навигация между разделами
- чёткая техническая информация
- акцент на визуальном восприятии продукции
- единый современный стиль для всех страниц
Визуальная концепция
В основе концепции — тёмная нейтральная палитра, которая не отвлекает от продукции и поддерживает технологичный характер бренда.
Гротескная типографика, выразительная иерархия заголовков и аккуратная работа с отступами помогают упорядочить контент и сохранить читаемость технических характеристик.
Решение
При проектировании интерфейсов я сделала акцент на понятной структуре, заметной продукции и удобном доступе к техническим данным.
Основные решения:
- минимум визуального шума
- чёткая иерархия заголовков и характеристик
- крупные изображения продукции
- логичное расположение технических данных
- единая сетка и система отступов
Результат моей работы
Подготовлены макеты главной и внутренних страниц B2B-сайта в Figma и переданы в разработку. В них проработаны визуальная концепция, структура контента, каталог продукции и подача технических характеристик.
В макетах предусмотрены:
- понятная навигация по разделам
- выразительная подача продукции
- чёткая иерархия технической информации
- единая визуальная система для страниц сайта
Главная страница Armator
Страница 404 сайта Armator
