SÉRA

SÉRA — мультибрендовый beauty-магазин, в котором skincare, makeup, hair и fragrance объединены в одну целостную систему.

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

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

1. 02.01Создать узнаваемую premium beauty-айдентику без типичного вида маркетплейса.
2. 02.02Построить масштабируемую e-commerce структуру для большого количества категорий, брендов и товаров.
3. 02.03Сделать каталог простым в навигации: категории, фильтры, сортировка, поиск, concerns и подборки.
4. 02.04Продумать полноценную карточку товара с характеристиками, составом, отзывами, рейтингом, рекомендациями и сопутствующими товарами.
5. 02.05Построить полный пользовательский сценарий: поиск → выбор → wishlist / bag → checkout → account.
6. 02.06Добавить инструменты, которые помогают выбирать продукты, а не просто просматривать каталог — Routine Builder, подборки, бестселлеры, новинки и категории по потребностям.
7. 02.07Создать полноценную адаптивную систему для desktop, tablet и mobile без потери функциональности.
8. 02.08Сохранить единую дизайн-систему на большом количестве страниц, компонентов и состояний интерфейса.

Мы построили SÉRA как сочетание premium editorial aesthetics и функциональности большого e-commerce.

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

Каталог построен как масштабируемая система: пользователь может переходить между skincare, makeup, hair и fragrance, просматривать бренды, бестселлеры, новинки и товары под конкретные потребности.

Отдельное внимание уделили product experience. Карточка товара не заканчивается фотографией и кнопкой Add to bag — в ней состав, ключевые свойства, рейтинг, отзывы с фото, рекомендации, pair-with товары и готовые сценарии использования.

Магазин дополнен полноценной системой аккаунта, wishlist, shopping bag, поиском, фильтрами и сервисными страницами.

1. 04.01Полная e-commerce структура — главная, каталог, категории, новинки, бестселлеры, sale, бренды, страницы брендов, страницы товаров и тематические подборки.
2. 04.02Каталог и навигация — фильтрация, сортировка, категории, поиск по товарам и брендам, навигация по skincare concerns и быстрый доступ к ключевым направлениям магазина.
3. 04.03Product pages — галерея товара, цена, варианты, характеристики, full ingredients, key benefits, рейтинг, отзывы, фото покупателей, pair-with recommendations и связанные продукты.
4. 04.04Reviews system — рейтинг товара, распределение оценок, сортировка отзывов, пагинация, verified purchase, фото в отзывах и отдельный pop-up для добавления нового отзыва.
5. 04.05Routine Builder — интерактивный сценарий, который помогает пользователю собрать последовательность ухода и понять роль каждого этапа.
6. 04.06Wishlist, Bag и Account — сохранённые товары, shopping bag, изменение количества, рекомендации, история заказов и личный кабинет пользователя.
7. 04.07Search experience — отдельный поисковый интерфейс с популярными запросами, поиском по потребностям, брендам и товарам.
8. 04.08Brand experience — отдельные страницы брендов с их историей, позиционированием, ключевыми характеристиками и ассортиментом в SÉRA.
9. 04.09Service pages — FAQ, доставка, возврат, контакты, About, Privacy, Terms, Cookies и другие вспомогательные страницы оформлены в той же визуальной системе, что и магазин.
10. 04.10Auth и user flows — login, registration, password flows и сценарии работы с аккаунтом.
11. 04.11Mobile experience — меню, каталог, категории, карточки товаров, поиск, cart, account и сложные интерактивные блоки получили собственную mobile-логику.
12. 04.12Дизайн-система — унифицированные типографика, отступы, сетки, карточки, divider lines, buttons, transitions и responsive behaviour для всего магазина.
13. 04.13Motion и micro-interactions — плавные fade-in появления, transitions, hover / touch states, marquee брендов, drawers, pop-ups и лёгкий branded preloader.

SÉRA — это не набор отдельных красивых страниц, а большая взаимосвязанная система.

Мы проработали каталог, карточки товаров, бренды, подборки, отзывы, поиск, фильтры, wishlist, shopping bag, account, authentication, Routine Builder, информационные и юридические страницы.

Каждый ключевой сценарий адаптирован для desktop и mobile, а компоненты построены так, чтобы магазин можно было расширять новыми брендами, категориями и товарами без разрушения визуальной системы.

Адаптивность в SÉRA не была просто уменьшением desktop-версии.

Для мобильных устройств отдельно проработаны navigation, search, categories, filters, product cards, account, shopping bag, interactive blocks и touch states.

Функциональность магазина сохраняется на любом размере экрана, но интерфейс адаптируется к способу взаимодействия пользователя.

Адаптивность в SÉRA не была просто уменьшением desktop-версии.

Для мобильных устройств отдельно проработаны navigation, search, categories, filters, product cards, account, shopping bag, interactive blocks и touch states.

Функциональность магазина сохраняется на любом размере экрана, но интерфейс адаптируется к способу взаимодействия пользователя.

SÉRA показывает, как большой интернет-магазин может оставаться чистым, эмоциональным и узнаваемым даже тогда, когда за визуальной простотой стоит сложная e-commerce система.