SHOP.CO — прототип интернет-магазина одежды в Figma
Спроектировали в Figma прототип интернет-магазина одежды SHOP.CO: главная, каталог с фильтрами, карточка товара и корзина для компьютера и смартфона. Это макеты интерфейса, а не запущенный магазин: путь покупателя доведён до оформления заказа.
Задача
SHOP.CO — вымышленный бренд магазина одежды, на котором мы построили этот прототип: реального заказчика, запуска и продаж за проектом нет. В макетах — повседневный гардероб из футболок, рубашек, джинсов, шорт и худи: одна только категория «Casual» насчитывает сотню товаров, а фильтры каталога охватывают девять размеров и десять цветов.
Прототип интернет-магазина одежды в первую очередь проверяет, найдёт ли покупатель вещь в большом ассортименте. Даже в макете категория «Casual» насчитывает сотню товаров, и без удобных фильтров человек листает бесконечную сетку, устаёт и уходит, так и не найдя нужное.
В одежде покупку решают размер, цвет и посадка, а фотография лишь привлекает внимание. Карточка товара должна ответить на эти вопросы до того, как вещь окажется в корзине, а отзывы других покупателей для одежды весят особенно много: по ним судят о ткани, размерной сетке и качестве.
Корзина — место, где заказы теряются чаще всего. Покупатель хочет видеть итоговую сумму до оформления: скидку, стоимость доставки, промокод — без сюрпризов на последнем шаге. Если что-то непонятно, проще закрыть вкладку, чем разбираться.
Те же сценарии должны работать на телефоне, где боковой панели фильтров и широкой сетке товаров просто не хватает места. Нужны были обе версии на одном наборе элементов, чтобы по макетам можно было собрать магазин, не переделывая логику экранов.
Решение
Мы выстроили прототип вокруг пути покупателя: главная, каталог, карточка товара и корзина. Каждый экран отвечает на один вопрос — что есть в магазине, что подходит именно мне, стоит ли вещь своих денег и сколько выйдет в итоге. Экраны существуют только в Figma, рабочего сайта за ними нет, поэтому функции показаны на уровне интерфейса.
Главная служит точкой входа: поиск в шапке, первый экран с кнопкой «Shop Now», новинки и подборки ведут в каталог. Там слева фильтры по категории, цене, цвету, размеру и стилю, справа — сетка товаров с сортировкой и пагинацией. Карточка товара даёт выбрать цвет, размер и количество, а корзина считает скидку, доставку и итог и принимает промокод.
Макеты мы собрали в Figma для компьютера и смартфона. Шапка с поиском, карточка товара, звёзды рейтинга, ценник со скидкой и кнопки повторяются на всех экранах как общие элементы, а в подвале есть подписка на рассылку и значки платёжных систем — Visa, Mastercard, PayPal, Apple Pay и Google Pay.
Каталог с фильтрами по размеру
Боковая панель собирает пять групп фильтров: категория, диапазон цены с ползунком, десять цветов, девять размеров от XX-Small до 4X-Large и стиль одежды. Фильтры применяются одной кнопкой «Apply Filter», когда покупатель выставил все параметры.
Сортировка, счётчик и пагинация
Над сеткой каталога видно, сколько товаров найдено — «Showing 1–10 of 100 Products», — и как они отсортированы: по умолчанию по популярности. Внизу страницы стоят номера страниц и кнопки «Previous» и «Next», а хлебные крошки над заголовком возвращают на уровень выше.
Карточка товара с выбором размера
Галерея из трёх фото, рейтинг, текущая и зачёркнутая цена с плашкой скидки, выбор цвета и размера, счётчик количества и кнопка «Add to Cart» собраны на первом экране карточки. Решить, подходит ли вещь, покупатель может, не прокручивая страницу.
Отзывы и вопросы под товаром
Под карточкой три вкладки: описание, отзывы с оценками и частые вопросы. В разделе отзывов есть сортировка по дате, фильтр и кнопка «Write a Review», а у каждого отзыва видны дата публикации и отметка проверенного покупателя.
Корзина с прозрачным итогом
В корзине у каждой позиции видны размер, цвет и цена, количество меняется кнопками, удаление — иконкой корзины. Блок «Order Summary» показывает сумму, скидку, доставку и итог, принимает промокод и ведёт к оформлению кнопкой «Go to Checkout».
Версии для компьютера и смартфона
Все четыре экрана подготовлены в двух версиях — для широкого экрана и для телефона. Общие элементы — шапка с поиском, карточка товара, подвал с подпиской и значками пяти платёжных систем — повторяются в обеих версиях, поэтому интерфейс узнаётся на любом устройстве.
Результаты
Главные итоги проекта в цифрах.
- 4Ключевых экрана
Главная, каталог, карточка товара и корзина — весь путь покупателя до кнопки оформления заказа.
- 2Версии макетов
Каждый экран показан в версии для компьютера и в версии для смартфона.
- 5Групп фильтров в каталоге
Категория, цена, цвет, размер и стиль одежды сужают выдачу до подходящих вещей.
- 3Вкладки в карточке товара
Описание, отзывы и частые вопросы открываются под товаром и не уводят со страницы.
Дизайн и интерфейсы
Ключевые экраны и интерфейсы проекта.
Технологии в проекте
Стек, на котором мы строили решение под задачи клиента.
- Figma
Похожие кейсы
Готовы стать следующим кейсом?
Расскажите о задаче — менеджер соберёт команду, посчитает смету и пришлёт коммерческое предложение в первый час после заявки. Без обязательств и без рассылок.