Бренд женской одежды · интернет-магазин

Сайт бренда одежды GLVR

Спроектировали и собрали интернет-магазин на Flutter Web: минималистичная витрина, lookbook с капсулами, каталог, корзина и оплата — в единой эстетике бренда.

Обсудить проект Открыть glvr-wear.com ↗

КлиентGLVR, бренд группы Gulliver
ОтрасльFashion, женская одежда и аксессуары
ЗадачаИнтернет-магазин в эстетике бренда
ТехнологияFlutter Web
Что сделалиПроектирование, UX/UI и разработка

О бренде

GLVR — бренд женской одежды и аксессуаров группы Gulliver. Он собирает не отдельные вещи, а капсулы: трендовые и классические мини-коллекции от стилистов, где всё сочетается между собой. Покупатель приходит не за одним жакетом, а за готовым образом.

Из этого выросло главное требование к сайту: он должен работать как витрина модного дома, а не как обычный каталог с фильтрами. Крупные кадры, воздух, спокойная монохромная графика — и при этом полноценный e-commerce с корзиной, доставкой по всей России и личным кабинетом.

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

Блок трендовой капсулы на сайте GLVR — Капсула — основной формат подачи коллекций

Задача

Бренду был нужен интернет-магазин, который продаёт образами и не ломает премиальное впечатление от съёмок. Ключевые требования:

01Витрина вместо каталога. Главная строится вокруг крупных кадров коллекции, а категории и подборки подключаются вторым слоем.
02Капсулы как отдельная сущность. Lookbook и коллекции нужно показывать целиком — с переходом от образа к конкретным товарам.
03Полный e-commerce. Корзина, промокоды, сплит-оплата, доставка по России, избранное и личный кабинет.
04Единый визуальный язык с приложением. Одна типографика, одна сетка, одни компоненты — чтобы бренд читался одинаково на любом экране.

Решение

Собрали сайт на Flutter Web — том же стеке, на котором мы делаем мобильные приложения. Это дало одну дизайн-систему и одинаковое поведение интерфейса на десктопе и в мобильном вебе. Разберём ключевые экраны.

Блок категорий на главной странице сайта GLVR

Витрина: сначала образ, потом категория

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

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

Подборки, которые не спорят со съёмкой

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

Цена, размеры и избранное вынесены в нижнюю часть карточки — они не перетягивают внимание на витрине, но доступны без перехода в товар.

Блоки категорий «Сумки» и «Обувь» на сайте GLVR

Аксессуары — отдельным ритмом

Сумки и обувь показываем парными блоками «фото + белое поле»: предметная съёмка слева, крупное название и ссылка справа. Такой ритм разбивает длинную страницу и подсказывает, чем дополнить образ из капсулы.

Страница Lookbook с капсулами на сайте GLVR — Lookbook: капсулы «Бежевая», «Розовый», «Голубая», «Белая»

Lookbook: от капсулы к товару

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

Так мы закрыли главный сценарий бренда: человек выбирает настроение — бежевое, розовое, белое — и уже внутри него смотрит конкретные вещи.

Страница коллекции украшений на сайте GLVR — Страница коллекции с редакционным текстом

Коллекции: место для истории бренда

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

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

Корзина с промокодом, сплит-оплатой и рекомендациями на сайте GLVR — Корзина: выбор позиций, промокод, сплит-оплата

Корзина: вся математика заказа на виду

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

оплата сплитом — четыре платежа с графиком прямо в корзине;
блок «нужно к заказу» с выбором размера и цвета без перехода в карточку;
персональные рекомендации под составом заказа.

Апселл здесь встроен в сам сценарий оформления — и при этом не мешает дойти до кнопки оплаты.

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

Макеты вели в четырёх брейкпоинтах — 375, 768, 1920 и 2560 px. На смартфоне витрина не сжимается, а пересобирается: слайдер занимает высоту экрана, категории выстраиваются в две колонки, подписи уходят внутрь кадра.

Отдельно проверяли, чтобы на 2560 px сайт не «растекался»: сетка и размеры кадров рассчитаны под широкие мониторы, на которых чаще всего и смотрят коллекции.

Категории и подборки на сайте GLVR на смартфоне

Технологии и интеграции

Сайт работает на Flutter Web с рендерером CanvasKit. Для fashion-проекта это удобно: типографика и композиция кадра выглядят одинаково во всех браузерах, а компоненты интерфейса переиспользуются вместе с мобильным приложением бренда.

Платформа
Flutter Web

Одна кодовая база и одна дизайн-система на веб и мобильные экраны: правка компонента доходит до всех платформ сразу.
Коммуникации
CDP и рассылки

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

Оплата картой или четырьмя платежами: график списаний покупатель видит прямо в корзине, до оформления.
Поддержка
Онлайн-консультант

Чат с поддержкой на всех страницах и выбор города доставки — сценарии, без которых fashion-магазин не работает.
Аналитика
Электронная торговля

Сквозная аналитика e-commerce: от просмотра карточки до оформленного заказа.
Мобильные
Приложения в сторах

Сайт связан с мобильными приложениями бренда — ссылки на App Store, Google Play и другие сторы в подвале.

Дизайн и фирменный стиль

Интерфейс построен по принципу «чем меньше, тем дороже»: ахроматическая палитра, тонкая разрядка в заголовках, отсутствие скруглений и теней. Единственный цвет на странице — сама одежда.

Графит — основа

Текст, логотип и кнопки. Никакого чистого чёрного: он спорит с глубиной съёмки.
Светло-серый — подложка

Фон карточек товара. Отделяет предметную съёмку от белого поля страницы, не добавляя рамок.
Белое поле

Воздух между блоками. Работает как паспарту для кадров коллекции.

Разрядка вместо жирного. Навигация и кнопки набраны прописными с увеличенным межбуквенным расстоянием — приём из печатных лукбуков.

Прямые углы. Ни у одного элемента нет скруглений: карточки, кнопки и поля ввода — строгие прямоугольники.

Кадр во всю ширину. Ключевые съёмки выходят за пределы контентной сетки — так страница дышит как разворот журнала.

Итог

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

Витрина в стиле бренда. Крупные кадры и монохромный интерфейс вместо типового каталога.
Капсулы как сценарий покупки. Lookbook и коллекции ведут от образа к конкретным товарам.
Полный e-commerce. Корзина, промокоды, сплит-оплата, избранное и личный кабинет.
Один язык с приложением. Flutter Web даёт общие компоненты для веба и мобильных.
Адаптив от 375 до 2560 px. Сайт одинаково собран на смартфоне и широком мониторе.

Готовый сайт бренда одежды GLVR — glvr-wear.com

ОТЗЫВЫ О НАС

Retail Rocket

«Работаем с Fittin не первый год — это партнёрство, где обе стороны усиливают друг друга. Команда отлично чувствует задачи e-commerce и помогает быстро запускать качественные мобильные приложения. Такие партнёрства особенно ценны, и мы точно планируем их развивать дальше.»

Европа

«На протяжении нескольких лет работаем с Фиттин и ни разу не пожалели о выборе. Команда оперативно реагирует на запросы, проявляет ответственность на всех этапах работы и предлагает эффективные решения. Рекомендуем их как надёжного и компетентного исполнителя.»

Цветовик

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

Частые вопросы

Сколько стоит разработка сайта интернет-магазина одежды?

Стоимость зависит от объёма каталога, набора интеграций (оплата, доставка, CRM, учётная система) и глубины дизайна. Типовые сценарии и стартовые цены опубликованы на странице тарифов; точная смета фиксируется после согласования технического задания.

Зачем делать сайт магазина на Flutter Web?

Flutter Web даёт одинаковый результат во всех браузерах: типографика, отступы и композиция кадра не «плывут». Для fashion-проектов это важно — страница остаётся такой же, какой её собрал дизайнер. Плюс компоненты интерфейса переиспользуются вместе с мобильным приложением бренда.

Можно ли сделать сайт и мобильное приложение на одной базе?

Да, это наш основной сценарий для e-commerce: общая дизайн-система, общие компоненты и общий backend. Правка в карточке товара или корзине доходит до веба и мобильных приложений одновременно. Подробнее — на странице «Приложение + сайт на одной базе».

Кто наполняет витрину и lookbook после запуска?

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

Сколько времени занимает такой проект?

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

Хотите такой же сайт?

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

Обсудить проект

Я даю согласие на обработку персональных данных в соответствии с Политикой конфиденциальности

Сайт бренда одежды GLVR

О бренде

Задача

Решение

Витрина: сначала образ, потом категория

Подборки, которые не спорят со съёмкой

Аксессуары — отдельным ритмом

Lookbook: от капсулы к товару

Коллекции: место для истории бренда

Корзина: вся математика заказа на виду

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

Технологии и интеграции

Flutter Web

CDP и рассылки

Сплит и карты

Онлайн-консультант

Электронная торговля

Приложения в сторах

Дизайн и фирменный стиль

Графит — основа

Светло-серый — подложка

Белое поле

Итог

Похожие кейсы

Услуги FITTIN

ОТЗЫВЫ О НАС

Частые вопросы

Хотите такой же сайт?

Обсудить проект

Контакты