Дизайн интернет-магазина доставки цветов «Артфлора»

О клиенте

«Артфлора» — сеть цветочных салонов в Санкт-Петербурге. Компания работает с 2003 года, занимается розничной и оптовой продажей цветов, держит собственную сеть точек самовывоза по городу и круглосуточную доставку букетов по Санкт-Петербургу и Ленинградской области.

К моменту работы над проектом у компании было 50 точек выдачи по городу — и это стало одной из опорных идей всего интерфейса.

Что входило в проект

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

Что сделано:

• дизайн 14 типов страниц интернет-магазина;
• три раскладки для каждой страницы — десктоп 1920, планшет 1024 и мобильные 360;
• состояния и всплывающие окна: раскрытое меню каталога, поиск, попапы быстрого заказа и обратного звонка, фиксированное меню при прокрутке;
• дизайн-система: палитра, типографика, товарные карточки, кнопки, формы;
• 7 фирменных иллюстраций с единым персонажем.

Дизайн-система: три акцента вместо одного

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

Решение — сдержанная система из трёх акцентов, у каждого свой тёмный тон и своя светлая подложка:

Роль	Основной	Тёмный	Подложка
Зелёный — действия и цены	#1F9C3D	#177E30	#EFFDF2
Розовый — акции и бренд	#D8589E	#C44088	#FCF0F7
Фиолетовый — доп. блоки	#6A61B1	#554D90	#F2F0FD

Плюс градация серого от #323232 до #F6F6F6 для текста и разделителей и отдельный красный #F25C5C для ошибок.

Зелёный закреплён за одним смыслом: кнопка «Купить», «В корзину», «Оформить заказ», актуальная цена. Розовый и фиолетовый работают на промо и не претендуют на роль кнопок — покупатель ни на одной странице не путается, куда нажимать.

Типографика — две гарнитуры: Manrope Bold для заголовков (72 / 62 / 52 / 42 / 32 / 24) и Inter для текста (22 / 18 / 14 / 12) в начертаниях Regular и Semi Bold. Отдельно заведены капслок-стили Manrope для бейджей и рубрик.

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

Главная: витрина вместо длинного каталога

Главная собрана как витрина поводов, а не как список товаров:

• Промо-сетка из плиток разного размера — «Красивые букеты к 1 Сентября», «Авторские букеты», «Композиции с цветами», «Корзина с цветами», «Цветы поштучно».
• Товарные подборки — «Розы с доставкой», «Наборы», «Хиты продаж».
• Ближайшие праздники — отдельная лента с датами: 1 сентября, 30 октября, 15 ноября, 31 декабря. Активная дата подсвечивается зелёной карточкой с кнопкой «Выбрать букет».
• Каталог цветов — плитки разделов на цветных подложках.
• Новости и статьи — две ленты внизу.
• Блок пунктов выдачи с картой города.

Логика простая: цветы покупают под повод, а не «просто посмотреть каталог». Поэтому поводы вынесены выше товаров.

Меню каталога: вся структура в одном экране

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

В дизайне меню раскрывается на всю ширину и показывает структуру целиком: колонки разделов («Букеты роз», «15 роз», «25 роз», «51 роза», «101 роза», «Розы Россия», «Корзины роз») рядом с колонкой поводов и типов («Композиции с цветами», «Аксессуары к цветам», «Подарки», «Наборы», «Цветы на похороны», «Альстромерии», «Гербера», «Хризантемы»). Слева — промо-плитки, чтобы меню не выглядело простыней ссылок.

Каталог: промо внутри товарной ленты

В каталоге собраны инструменты, которые обычно живут порознь:

• подкатегории плитками сверху — быстрый переход внутрь раздела;
• сортировка чипсами — «По популярности», «Дешевле», «Дороже», «Хиты», «Новинки»;
• сетка карточек 4 в ряд;
• пагинация и кнопка «Показать ещё букеты» одновременно;
• SEO-текст внизу под кат «Показать полностью».

Главный приём — промо-баннеры встроены прямо в товарную сетку: через каждые несколько рядов лента разрывается блоком «Композиции с цветами», «Красивые букеты к 1 Сентября», «Элитные букеты на День Рождения со скидкой до 50%». Длинная выдача перестаёт быть монотонной, а магазин получает место под акции там, где покупатель уже листает товары.

Товарная карточка: два сценария покупки

В карточке товара на сетке всегда две кнопки: «Купить» — обычный сценарий через корзину, и «Быстрый заказ» — короткая форма, когда человек не хочет проходить оформление целиком.

Кроме того, в карточке размечены:

• бейджи «Хит», «Доставка 0 ₽», «Упаковка в подарок», процент скидки;
• подсказка размера — «Как 51 роза»: букет сложно оценить по фото, поэтому масштаб задан привычной мерой;
• старая цена зачёркиванием и текущая зелёным;
• состояние наведения — карточка подсвечивается зелёной рамкой.

Страница букета: блок покупки не уезжает

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

Поэтому блок покупки закреплён справа и остаётся на месте при прокрутке. В нём собрано всё для решения: цена, старая цена и размер экономии, счётчик количества, «В корзину» и «Быстрый заказ», иконки платёжных систем.

Содержание разнесено по вкладкам — Описание, Доставка, Оплата, Самовывоз, Отзывы со счётчиком. Состав букета в описании расписан по цветам: георгин, пионовидные розы Джульетта, эустома, оксипеталум, розы Капучино, диантус, скабиоза Стеллата, гвоздика. Внизу — «С этим товаром покупают», «Хиты продаж» и облако разделов, в которых размещён букет.

Отзывы: оценки и форма в самой карточке

Отзывы не спрятаны в отдельный раздел, а лежат вкладкой в карточке букета — вместе с ответами администрации магазина. Тут же форма «Оставить отзыв» с выбором типа обращения (похвала, вопрос, предложение, жалоба) и рейтингом звёздами.

Отдельная страница отзывов тоже есть — с фильтрами и общей формой.

Корзина и оформление: одна панель поверх сайта

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

В верхней части панели — состав заказа: товары с артикулами, счётчики количества, удаление, поле промокода и итог со скидкой и доставкой. Следом — «Добавьте к заказу»: мини-открытка с пожеланием, топпер, кекс к букету, каждое по +50 ₽.

Дальше в той же панели — оформление, разбитое на четыре пронумерованных шага:

1. Контактные данные — имя, телефон, e-mail.
2. Способ получения — самовывоз, доставка по СПб, доставка по ЛО. Для самовывоза — выбор пункта списком или на карте. Тут же переключатель «Получу Я» / «Получу не Я» с полями получателя и опцией не сообщать ему, кто заказал: цветы чаще всего дарят, и интерфейс это учитывает.
3. Дата и время получения — интервал «от» и «до», опция созвониться с получателем, комментарий к заказу.
4. Оплата — онлайн или при получении, поля карты, согласия.

Итоговая сумма закреплена в нижней плашке и видна на любом шаге.

Самовывоз из 50 точек

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

• блок с картой и пинами прямо на главной — «50 пунктов выдачи онлайн-заказов в Санкт-Петербурге»;
• отдельная страница пунктов выдачи с картой и списком адресов;
• вкладка «Самовывоз» в карточке букета;
• выбор точки на карте прямо в оформлении заказа.

Иллюстрации: персонаж для скучных страниц

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

Мы предложили нарисовать серию фирменных иллюстраций и поставить их именно на эти страницы. Работа велась параллельно с дизайном сайта и оплачивалась отдельно.

Получился единый персонаж — тюльпан в зелёной толстовке с логотипом «Артфлоры» — и 7 сцен под конкретные страницы:

Иллюстрация	Где стоит
Курьер на мопеде с корзиной цветов	Доставка
Оплата картой за ноутбуком	Оплата
Флорист собирает букет за прилавком	Состав букета
Грустный подсолнух и возврат денег	Возврат и обмен
Персонаж с отзывами, звёздами и кубком	Оставить отзыв
Витрина салона с вывеской	О компании
Шары, конфетти и палец вверх	Спасибо за заказ

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

Как это выглядит на самой странице — иллюстрация встроена в блок «Доставка курьером»:

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

Под контент сделан отдельный набор шаблонов: список статей, страница статьи, лента новостей и внутренняя страница новости, «О компании», вакансии с формой, страница благодарности и 404.

Три раскладки

Каждая страница отрисована под три ширины — 1920, 1024 и 360.

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

Объём работы

Параметр	Сделано
Типов страниц	14 (главная, каталог, категория, карточка товара, корзина и оформление, пункты выдачи, доставка и оплата, отзывы, блог, статья, новость, о компании, вакансии, спасибо, 404)
Раскладок на страницу	3 (1920 / 1024 / 360)
Состояний и попапов	Раскрытое меню, поиск и поиск с вводом, быстрый заказ, обратный звонок, фиксированное меню, выбор пункта выдачи, hover карточек
Дизайн-система	3 акцента × 2 тона, 3 подложки, 7 градаций серого, цвет ошибки
Типографика	Manrope (6 уровней заголовков) + Inter (4 размера × 2 начертания) + 3 капслок-стиля
Иллюстрации	7 сцен с единым персонажем
Не входило в проект	Вёрстка, разработка, интеграции, запуск

Что стоит учесть в похожих проектах

1. Пёстрый товар требует сдержанного интерфейса. Букеты дают на экране всю палитру сразу. Если интерфейс тоже яркий, страница превращается в кашу. Три акцента с закреплёнными ролями и светлые подложки — рабочая рамка для такого товара.

2. Цветы покупают под повод. Витрина поводов и лента ближайших праздников на главной попадают в реальный сценарий лучше, чем сразу выложенный каталог.

3. Размер букета не читается по фото. Подсказка «Как 51 роза» на карточке снимает главный вопрос покупателя до перехода в товар.

4. Получатель — не заказчик. Цветы почти всегда дарят. Переключатель «Получу не Я», поля получателя и опция анонимности — не мелочь, а основной сценарий магазина.

5. Оформление шагами по разным страницам теряет заказы. Панель поверх сайта с пронумерованными шагами и закреплённым итогом позволяет не терять контекст каталога.

6. Текстовые страницы нельзя оставлять голыми. Доставка, оплата, возврат — это страницы, которые читают перед покупкой. Иллюстрации с фирменным персонажем удерживают на них внимание.

Заключение

Проект «Артфлора» — пример дизайнерской работы, где интерфейс выстроен вокруг двух особенностей бизнеса: цветы покупают под повод и почти всегда кому-то в подарок, а забрать их удобно рядом с домом из одной из 50 точек.

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