Дизайн интернет-магазина: каталог, карточка товара, оформление заказа и личный кабинет в Figma

Частое заблуждение новичка — начинать магазин с главной страницы. Решение о покупке человек принимает в каталоге и карточке, а теряется чаще всего на оформлении. Поэтому сначала рисуют самый скучный сценарий: покупатель пришёл из поиска в карточку, выбрал размер, увидел цену с доставкой и оформил заказ без регистрации. Главная появляется позже.

Чем магазин отличается от лендинга и кому нужен навык

Лендинг решает одну задачу на одной странице, и дизайнер контролирует каждый заголовок. В магазине десяток шаблонов наполняется сотнями товаров, а тексты пишет не дизайнер. Название в три строки, товар без фото, двадцать вариантов цвета — макет должен выдержать любые реальные данные, поэтому основная работа здесь — компоненты и правила их поведения.

Навык нужен веб-дизайнеру, который берёт заказы на магазины, продуктовому дизайнеру в e-commerce-команде и владельцу магазина на конструкторе, которому важно понимать, что менять в шаблоне. Другой подход нужен, если вы продаёте только на маркетплейсах: там интерфейс задаёт площадка, а продавец работает с контентом карточек по её правилам. Бизнес-сторона онлайн-торговли — оплата, касса, логистика — тоже отдельная тема; здесь речь об интерфейсе собственного магазина.

Учебный пример: магазин велозапчастей

Возьмём учебную ситуацию: небольшой магазин продаёт около восьмисот запчастей для велосипедов. Покупатель знает свой велосипед, но не помнит, какой диаметр колеса и тип тормозов ему подходит. Значит, каталог должен помогать подобрать совместимое.

Дизайнер начинает с фильтров, которые отвечают на вопрос покупателя, — «диаметр колеса», «тип тормоза», — и ставит их выше «бренда» и «цвета». Рядом с каждым значением показано число товаров, чтобы человек не выбрал вариант с пустым результатом. Выбранные фильтры видны над списком плашками с крестиком. На телефоне фильтры открываются нижней панелью с кнопкой «Показать 37 товаров».

В карточке товара всё, что влияет на решение, видно до кнопки покупки: цена, наличие, срок доставки, блок «Подходит для» с параметрами совместимости. Характеристики и отзывы идут ниже. Для каждого элемента дизайнер рисует состояния: товар закончился (кнопка меняется на «Сообщить о поступлении»), нет фото, цена со скидкой. В Figma это варианты одного компонента, и разработчик видит их все.

Корзина и оформление заказа: где теряются покупатели

Подробные данные об отказах на этом этапе публикует Baymard Institute — исследовательская компания, которая много лет тестирует оформление заказов в крупных интернет-магазинах. На странице Cart Abandonment Rate, обновлённой 22 сентября 2025 года, средняя доля брошенных корзин оценена в 70,22 % по сводке 50 исследований. Часть отказов дизайном не исправить: 42 % опрошенных американских покупателей бросали корзину, потому что просто смотрели товары и не собирались покупать.

Интереснее причины у тех, кто собирался купить. По тому же опросу 40 % ушли из-за неожиданных дополнительных расходов — доставки, налогов, сборов, 18 % — из-за требования создать аккаунт, 17 % — из-за слишком длинного или сложного оформления, 12 % — потому что не смогли заранее увидеть или посчитать итоговую стоимость заказа. Каждая из этих причин — прямое задание для дизайнера: показать стоимость доставки ещё в карточке или корзине, сделать заказ без регистрации основным путём и убрать лишние поля.

Лишние поля Baymard измерил отдельно. По его данным, оформление заказа в американском интернет-магазине в среднем показывает по умолчанию 23,48 элемента формы, из них 14,88 полей для ввода, а хорошо спроектированному оформлению хватает 12–14 элементов, или 7–8 полей. Это удобная мерка для своего макета: посчитайте всё, что видит покупатель, — поля, переключатели, чекбоксы, списки. Если элементов заметно больше ориентира, ищите, что объединить или скрыть: отдельные поля имени и фамилии, повтор адреса, развёрнутый по умолчанию комментарий. Ограничение одно: данные американские, а выбор пункта выдачи или постамата в российских магазинах добавляет свои шаги.

Доверие: продавец, доставка и возврат на виду

Покупатель незнакомого магазина ищет признаки того, что деньги не пропадут, и часть этой информации — обязанность продавца. По ст. 26.1 Закона о защите прав потребителей до заключения договора покупатель должен получить сведения о продавце, основных свойствах товара, цене, условиях оплаты и доставки, а также о порядке и сроках возврата. Для дизайнера это означает конкретные места в макете: реквизиты и адрес продавца в подвале и на странице «О магазине», условия доставки и возврата одним кликом из карточки и корзины, а не в глубине раздела «Помощь».

С возвратом стоит заглянуть вперёд. Конституционный суд в постановлении от 17 февраля 2026 года № 7-П указал, что покупатель, купивший товар дистанционно, должен иметь возможность и вернуть его дистанционно. В июле 2026 года в Госдуму внесли законопроект с поправками в ст. 26.1 с планируемым вступлением в силу 1 марта 2027 года; на момент подготовки статьи он не принят. Сценарий возврата лучше спроектировать сразу: у заказа в личном кабинете — кнопка заявки, выбор способа отправки и статус.

Сам личный кабинет редко нуждается в десятке разделов: покупателю нужны заказы со статусами, повтор заказа, адреса, возвраты и уведомления. Отзывы — ещё один элемент доверия: рейтинг и число оценок стоят рядом с ценой, а в карточке отзывы можно отфильтровать по оценке.

Мобильная версия и скорость

На телефоне каталог обычно укладывается в две колонки, и цена с кнопкой должны остаться в каждой. В карточке кнопку «В корзину» закрепляют внизу экрана, а поля оформления получают нужную клавиатуру: цифровую для телефона и индекса. Скорость тоже отчасти решает дизайнер: слайдер из восьми фото в каждой карточке каталога замедлит страницу, как бы ни старался разработчик. Договоритесь заранее об одном фото в списке и заглушках-скелетонах на время загрузки.

С чего начать и в каком порядке осваивать

Порядок ниже идёт от денег назад: сначала экраны, где решение принимается и теряется, затем то, что приводит людей в каталог. Так вы раньше получите проверяемый сценарий от карточки до заказа, а главная не съест время, пока не работает основное.

1. Разберите два-три магазина своей ниши: пройдите путь от поиска до последнего шага перед оплатой и запишите, что мешало.
2. Соберите в Figma компоненты: карточку товара в списке, кнопки, поля формы, плашки фильтров — с вариантами состояний.
3. Спроектируйте карточку товара на реальных данных: самое длинное название, товар без фото, товар, которого нет в наличии.
4. Нарисуйте корзину и оформление заказа без регистрации, посчитайте элементы формы и сравните с ориентиром Baymard.
5. Сделайте каталог с фильтрами и пустым состоянием «ничего не найдено».
6. Добавьте личный кабинет с заказами и возвратом, затем мобильные версии всех экранов и только потом главную.

Тем, кому нужен длинный маршрут с дипломом о переподготовке, стоит посмотреть программу НАРХСИ «Веб-дизайн. Профессиональный курс: проектирование, дизайн и анимация интерфейса»: из 770 академических часов модулю «Интернет-магазин в Figma» отведены две части на 72 и 60 часов. Что именно разбирают внутри модуля, на странице не раскрыто, поэтому состав тем стоит уточнить у школы.

Упражнения, проверка и типичные ошибки

Упражнения лучше брать такие, где ошибку видно сразу. Перенесите в Figma оформление заказа любимого магазина и сократите его, не потеряв данных для доставки. Сделайте карточку товара с пятью цветами и тремя размерами, из которых один закончился. Нарисуйте экраны после «Оплатить»: успех, отказ банка, повторная попытка.

Проверять макет можно без лаборатории: дайте прототип двум-трём знакомым с задачей «найдите тормозные колодки для своего велосипеда и оформите доставку» и молча наблюдайте, где они останавливаются. A/B-тест — сравнение двух версий страницы на живых посетителях — подходит работающему магазину с заметным трафиком; на маленьком потоке он неделями не даст надёжного ответа.

Типичные ошибки новичков: фильтры по признакам, важным магазину, а не покупателю; доставка, стоимость которой видна только на последнем шаге; обязательная регистрация; макет только для идеального товара с короткой подписью; нет экранов ошибок. Всё это вскрывается, если пройти прототип с реальными данными, а не с текстом-рыбой.

Если вам удобнее учиться с наставником и регулярными занятиями, у Компьютерной Академии TOP есть программа «Веб-дизайн с ИИ: сайты и приложения» на 11 месяцев: третий модуль посвящён интернет-магазину на продвинутой Figma. Входят ли в него каталог и оформление заказа, страница не уточняет — спросите об этом до оплаты.

Как навык влияет на доход

Открытых данных о зарплатах именно по дизайну интернет-магазинов нет: отчёты считают веб-дизайнеров и дизайнеров интерфейсов целиком, не выделяя e-commerce. Честнее говорить о задачах: дизайнер, который умеет проектировать каталог и оформление заказа, берётся за многостраничные проекты, а не только за лендинги, и такие заказы длиннее и часто включают доработки после запуска.

Чтобы посмотреть актуальные цифры, ищите на сайтах вакансий по словам «дизайнер интерфейсов» и «e-commerce», фильтруйте по региону и опыту и смотрите на медиану, а не на максимум вилки. Во фрилансе цену проекта определяют число уникальных шаблонов, мобильная версия, личный кабинет и то, кто готовит тексты и фото товаров.

Что проверить при выборе обучения

Хорошая программа даёт сквозной проект магазина, а не разрозненные экраны. Проверьте, будут ли в нём каталог с фильтрами, оформление заказа и личный кабинет, смотрит ли наставник состояния компонентов и мобильную версию.

Ближе всего к этому списку из трёх программ описание Skillbox: на онлайн-курсе «Веб-дизайн 3.0» на уровне Junior появляются онлайн-витрина и карточки товаров, а на уровне Pre-middle — каталог, оформление покупки и доставки, личный кабинет и адаптация под разные устройства. Обучение длится 9 месяцев.

Сравните и формат: сколько живой обратной связи, какой документ выдают, какую недельную нагрузку придётся совмещать с работой.

Сопоставить школы по этим параметрам поможет рейтинг онлайн-школ по веб-дизайну — он шире темы магазинов и охватывает веб-дизайн целиком, поэтому программу конкретного курса всё равно стоит открыть и проверить на наличие проекта интернет-магазина.