| Продукт | Крупный e-commerce интернет-магазин электроники и гаджетов |
| Формат проекта | Продуктовый UI/UX дизайн под ключ на условиях субподряда (NDA) |
| Объём Figma-макета | 60+ проработанных фреймов (Десктоп + Мобильные адаптивы) |
| Ключевые страницы | Каталог с фильтрами, Карточка товара, Корзина, Личный кабинет, Чек-аут |
| Проработка сценариев | Умный поиск, выбор модификаций, покупка в 1 клик, отображение ошибок, попапы |
| Дополнительные материалы | 5 промо-баннеров для Hero-слайдера + дизайн-макеты транзакционных e-mail писем |
| Типографика | Raleway (чистый геометрический шрифт для E-commerce) |
| Палитра | Фиолетово-лиловый, кислотный аквамарин, тёмно-серый, градиент «Неоновый космос» |
| Сроки разработки | 3 недели (Октябрь 2024 г.) |
| Категории услуг | Сайт-каталог, Услуги веб-дизайна |
Контекст: проектирование сложного e-commerce интерфейса
В октябре 2024 года команда Webplustudio.ru была привлечена на условиях субподряда для проектирования интерфейса крупного интернет-магазина цифровой техники и гаджетов (реальное название бренда не разглашается согласно условиям соглашения NDA).
Особенности проектирования интернет-магазинов электроники:
Электроника — одна из самых сложных ниш в e-commerce с точки зрения взаимодействия пользователя (User Flow):
- Покупатели тщательно сравнивают модификации (объём памяти, цвет корпуса, тип процессора).
- Пользователям необходимы быстрые фильтры, наглядные статусы наличия на складах и удобный просмотр характеристик.
- Процесс оформления заказа (Checkout) должен быть предельно простым, чтобы снизить процент брошенных корзин.
Задача: Спроектировать удобный, визуально трендовый и продуманный до мелочей интерфейс магазина в Figma со всеми мобильными экранами и состояниями.
Этапы проектирования в Figma (60+ фреймов)
1. Проработка сценариев взаимодействия (User Flow)
Мы зафиксировали ключевые сценарии пользователей: от поиска конкретной модели через строку умного поиска до выбора комплектации, добавления в корзину, применения промокода и онлайн-оплаты.
2. Проектирование ключевых e-commerce страниц
В Figma было отрисовано более 60 уникальных экранов:
- Каталог товаров: с быстрыми тегами, выбором вида сетки и мультифильтрами.
- Карточка товара: интерактивный выбор цвета/памяти, галерея 360°, блок отзывов с фото и гарантийные условия.
- Корзина и Личный кабинет: отслеживание статуса доставки, история заказов, бонусы и избранное.
- Оформление заказа: лаконичная форма без лишних полей для максимальной конверсии.
3. Детализация состояний элементов и попапов
Мы проработали все варианты поведения интерфейса: подсказки строки поиска, всплывающие окна быстрой покупки, эффекты загрузки, состояние пустой корзины и варианты отображения ошибок ввода данных.
4. Мобильная версия (Mobile-First)
Для каждого из 60+ фреймов была спроектирована отдельная мобильная адаптивная версия. Навигационная панель (Bottom Navigation Bar) обеспечивает удобное управление магазином с любого смартфона одной рукой.
5. Баннеры и e-mail шаблоны
Дополнительно в Photoshop и Фигме мы создали 5 сочных продающих баннеров с гаджетами для главного Hero-слайдера, а также разработали единый стиль для транзакционных e-mail писем (подтверждение заказа, чек, статус доставки).
Дизайн-система и неоновый стиль интернет-магазина
Для магазина электроники мы создали современный и технологичный визуальный стиль:
- Гарнитура Raleway: лёгкий и стильный шрифт, идеальный для сканирования таблиц характеристик и крупных ценников.
- Цветовая схема: фиолетово-лиловая база в сочетании с кислотным аквамарином на кнопках покупки («В корзину», «Оформить»).
- Акцентный градиент «Неоновый космос»: придает интерфейсу цифровой и сочный вид.
Результаты работы
За 3 недели продуктовая команда Webplustudio полностью выполнила задачу:
- ✅ Спроектировано более 60 фреймов в Figma (десктоп + мобайл).
- ✅ Детально проработаны сценарии User Flow и все функциональные состояния.
- ✅ Отрисованы 5 Hero-баннеров и макеты e-mail рассылок.
- ✅ Подготовлен UI-Kit и исходники, переданные команде разработки.
Галерея дизайн-макета интернет-магазина
