Shop.co — концепт интернет-магазина одежды
Shop.co Concept — концептуальный дизайн интернет-магазина одежды на условном бренде: иерархия товаров, подбор по стилю и короткий путь к заказу. Главная страница собрана из семи смысловых блоков и восьми карточек товаров с ценой и рейтингом.
Задача
Shop.co Concept — дизайн-концепт, а не действующий магазин и не заказ клиента: бренд и ассортимент в макетах условные. Мы проработали интернет-магазин повседневной, деловой, праздничной и спортивной одежды для мужчин и женщин, который вдохновляет образами и при этом быстро ведёт покупателя от витрины к оформлению заказа.
Дизайн интернет-магазина одежды решает две задачи сразу: он должен вдохновлять образами и при этом быстро доводить до покупки. На условном магазине Shop.co — без реального бренда, склада и продаж, зато с полным сценарием покупателя — мы проверяли, как совместить выразительную витрину и удобство.
Ассортимент одежды многослоен: новинки, хиты продаж, товары со скидкой, бренды, стили и поводы. Если показать всё одновременно, главная превращается в пёструю ленту, где взгляду не за что зацепиться. Нужна была понятная иерархия: что увидеть первым, что вторым и куда нажать, когда вещь понравилась.
Карточка товара в каталоге одежды — главный рабочий элемент. По ней покупатель за секунду решает, стоит ли открывать вещь, поэтому ему нужны фото, название, цена, размер скидки и мнение других покупателей. Всё это должно помещаться в компактную карточку и читаться одинаково в любой ленте.
И наконец, путь от понравившейся вещи до заказа. Фильтры каталога, корзина и оформление должны оставаться короткими и на десктопе, и на телефоне: каждый лишний шаг или неудобное поле на маленьком экране повышает шанс, что человек закроет вкладку.
Решение
Мы выстроили главную как ленту с ясной иерархией: полоса с предложением за регистрацию, крупный первый экран с одной кнопкой, лента брендов, «Новинки», «Хиты продаж», подбор по стилю, отзывы и подписка на рассылку. Каждый блок отвечает на один вопрос покупателя и заканчивается понятным действием.
Карточка показывает вещь на нейтральном фоне, название, рейтинг звёздами с оценкой, цену, зачёркнутую старую цену и бейдж скидки, поэтому сравнивать товары можно прямо в ленте. Подбор по стилю ведёт в каталог с фильтрами, а оттуда короткий путь идёт через корзину к оформлению заказа, продуманному и для мобильного экрана.
Концепт собран в Figma на повторяющихся компонентах: карточки товаров и отзывов, кнопки-«таблетки», бейджи скидок, поля поиска и подписки. Палитра чёрно-белая, чтобы цвет давали сами вещи, а контрастная типографика — широкий гротеск заглавными в заголовках и спокойный шрифт в тексте — держит ритм длинной страницы.
Первый экран с одной кнопкой
Крупный заголовок заглавными, короткое пояснение и чёрная кнопка «Shop Now» стоят слева, фото пары в джинсовых куртках — справа. Под кнопкой идёт строка с цифрами магазина, а над шапкой — закрываемая полоса с предложением скидки за регистрацию.
Новинки и хиты продаж
Две ленты по четыре товара показывают свежие поступления и самые популярные вещи. Каждая лента заканчивается кнопкой «View All», которая ведёт в полный каталог, так что главная не перегружается, а весь ассортимент остаётся в одном клике.
Карточка товара для сравнения
Вещь снята на светло-сером фоне, под ней — название, рейтинг звёздами с числовой оценкой, цена, зачёркнутая старая цена и красный бейдж скидки. Все карточки одного размера, поэтому цены и оценки легко сравнивать взглядом по строке.
Подбор одежды по стилю
Блок «Browse by Dress Style» собран как бенто-сетка из четырёх фотокарточек разной ширины: повседневный, деловой, праздничный и спортивный стиль. Покупатель выбирает повод, а не категорию из меню, и сразу попадает в подходящую подборку.
Отзывы и подписка на рассылку
Карусель отзывов показывает оценку, имя с зелёной отметкой проверенного покупателя и текст, а крайние карточки уходят за край экрана и подсказывают прокрутку. Ниже — чёрный блок подписки с полем e-mail, который наполовину заходит на подвал.
Короткий путь к заказу
Поиск по товарам и иконки корзины и профиля всегда в шапке, а каталог с фильтрами, корзина и оформление заказа проработаны с учётом мобильного экрана. В подвале собраны помощь, доставка, заказы и оплата, а значки платёжных систем снимают вопрос, чем расплатиться.
Результаты
Главные итоги проекта в цифрах.
- 8Карточек товаров на главной
Ленты «Новинки» и «Хиты продаж» — по четыре вещи с ценой, рейтингом и бейджем скидки.
- 4Стиля в подборе одежды
Повседневный, деловой, праздничный и спортивный — выбор по поводу, а не по названию категории.
- 7Смысловых блоков главной
Первый экран, бренды, новинки, хиты, стили, отзывы и подписка идут в порядке принятия решения.
- 12 дн.Работа над концептом
Структура магазина, компоненты и макеты в Figma заняли двенадцать дней.
Дизайн и интерфейсы
Ключевые экраны и интерфейсы проекта.
Технологии в проекте
Стек, на котором мы строили решение под задачи клиента.
- Figma
Похожие кейсы
Готовы стать следующим кейсом?
Расскажите о задаче — менеджер соберёт команду, посчитает смету и пришлёт коммерческое предложение в первый час после заявки. Без обязательств и без рассылок.