CUDGI.
Современная классика. Цифровой гардероб.
Мой вклад
Веб-дизайн и реализация с помощью Codex. От композиции страниц до взаимодействий и мобильной версии.
Формат
Демонстрация сайта
Главная / Коллекция — экран опубликованной версии
Контекст
CUDGI — сайт мужской одежды. Здесь две задачи встречаются в одном интерфейсе: передать спокойный характер коллекции и помочь выбрать конкретную вещь. Главная знакомит с брендом; каталог и карточка товара переводят это впечатление в действие.
Задача
Передать характер бренда через онлайн-витрину и сделать путь от коллекции к конкретному товару понятным.
Границы проекта
В публичной версии используются демонстрационные товары, цены и наличие. Поэтому кейс показывает устройство интерфейса и сценарии выбора; готовность коммерческого запуска и показатели продаж не заявляются.
Решения в деталях
Реальные экраны публичной версии. Каждый можно открыть крупнее.
Сначала характер коллекции
Первый экран должен знакомить с одеждой и атмосферой бренда, сохраняя понятный вход в коллекцию.
Крупная фотография, короткий заголовок и один основной переход задают иерархию. Ниже категории позволяют сразу выбрать направление, а блок о бренде продолжает визуальную историю.
Каталог помогает сузить выбор
Когда посетитель уже знает, что ищет, ему нужен быстрый доступ к категории и параметрам вещи.
Поиск, категория, размер, цвет и сортировка собраны над товарами. Применённые фильтры можно убрать отдельно или сбросить полностью. Карточки показывают название, категорию и цену без дополнительного открытия.
Карточка ведёт к конкретному варианту
Перед добавлением вещи нужно понять, какой цвет и размер выбран и доступен ли этот вариант.
Фотография и сведения о товаре соседствуют с выбором цвета, размера и количества. До выбора размера кнопка объясняет следующий шаг. После добавления корзина показывает вещь, её вариант и сумму.
Путь по интерфейсу
Сценарий, проверенный в опубликованном демо.
Открыть коллекцию
Переход с главной открывает каталог с сортировкой новинок.
Выбрать вещь и размер
Из карточки каталога можно перейти к товару. Выбор M активирует добавление в корзину.
Проверить корзину
После добавления появляется корзина с выбранным размером, количеством и суммой. Реальный заказ в рамках кейса не оформляется.
Что получилось
Работающий публичный интерфейс: от знакомства с коллекцией до выбора варианта товара и проверки корзины. Десктопная и мобильная композиции сохраняют один путь по магазину.
- Главная и категории коллекции
- Каталог с поиском и фильтрами
- Карточка товара, варианты и корзина
- Адаптивные страницы и взаимодействия
Публичная демонстрация интерфейса. Не является подтверждением готовности приёма реальных заказов и оплаты.
Попробовать проект