[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fManyO1g2ZmPRIw6G1A_VcNezFCB1Xv53ddZmPC1K7Ug":3},{"slug":4,"title":5,"published":6,"publishedAt":7,"createdAt":8,"section":9,"preview":10,"heroImage":11,"previewImage":12,"headMarkup":13,"bodyMd":36,"bodyHtml":37},"artflora","Дизайн интернет-магазина доставки цветов «Артфлора»",true,"2023-05-17T00:00:00+03:00","2026-07-17T00:00:00.000Z","sites","Дизайн интернет-магазина сети цветочных салонов в Санкт-Петербурге: 14 типов страниц в трёх раскладках, корзина и оформление заказа на одном экране, самовывоз из 50 точек и серия фирменных иллюстраций с персонажем-тюльпаном.",null,"\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F01_home.webp",[14],{"tag":15,"type":16,"key":17,"json":18},"script","application\u002Fld+json","faq-case-artflora",{"@context":19,"@type":20,"mainEntity":21},"https:\u002F\u002Fschema.org","FAQPage",[22,28,32],{"@type":23,"name":24,"acceptedAnswer":25},"Question","Какие работы выполнялись по проекту «Артфлора»?",{"@type":26,"text":27},"Answer","По проекту выполнен только дизайн: макеты интернет-магазина в трёх раскладках — 1920, 1024 и 360 пикселей — и серия фирменных иллюстраций. Разработка, вёрстка и интеграции в объём работ не входили.",{"@type":23,"name":29,"acceptedAnswer":30},"Как в дизайне «Артфлоры» устроено оформление заказа?",{"@type":26,"text":31},"Корзина и оформление заказа собраны в одной выдвижной панели поверх сайта. Покупатель не уходит с текущей страницы: в одном экране он меняет состав заказа, вводит промокод, добавляет дополнения, выбирает способ получения, дату и оплату, а итоговая сумма закреплена в нижней плашке.",{"@type":23,"name":33,"acceptedAnswer":34},"Зачем интернет-магазину цветов фирменные иллюстрации?",{"@type":26,"text":35},"Иллюстрации нарисованы для страниц, где много текста и нет фотографий букетов: доставка, оплата, возврат и обмен, о компании, отзывы, спасибо за заказ. Единый персонаж-тюльпан удерживает внимание на таких страницах и добавляет магазину узнаваемости.","## О клиенте\n\n«Артфлора» — сеть цветочных салонов в Санкт-Петербурге. Компания работает с 2003 года, занимается розничной и оптовой продажей цветов, держит собственную сеть точек самовывоза по городу и круглосуточную доставку букетов по Санкт-Петербургу и Ленинградской области.\n\nК моменту работы над проектом у компании было 50 точек выдачи по городу — и это стало одной из опорных идей всего интерфейса.\n\n## Что входило в проект\n\n**Мы делали только дизайн.** В объём работ вошли макеты интернет-магазина и серия фирменных иллюстраций. Вёрстка, разработка, интеграции с учётными системами и запуск сайта в проект не входили — поэтому в кейсе мы рассказываем про интерфейсные решения, а не про технологии.\n\nЧто сделано:\n\n- дизайн 14 типов страниц интернет-магазина;\n- три раскладки для каждой страницы — десктоп 1920, планшет 1024 и мобильные 360;\n- состояния и всплывающие окна: раскрытое меню каталога, поиск, попапы быстрого заказа и обратного звонка, фиксированное меню при прокрутке;\n- дизайн-система: палитра, типографика, товарные карточки, кнопки, формы;\n- 7 фирменных иллюстраций с единым персонажем.\n\n![Главная страница интернет-магазина](\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F01_home.webp)\n\n## Дизайн-система: три акцента вместо одного\n\nЦветочный магазин — товар с максимально пёстрыми фотографиями. Букеты уже дают на странице всю палитру, какая только бывает, поэтому интерфейс должен не спорить с ними, а держать структуру.\n\nРешение — сдержанная система из трёх акцентов, у каждого свой тёмный тон и своя светлая подложка:\n\n| Роль | Основной | Тёмный | Подложка |\n|---|---|---|---|\n| Зелёный — действия и цены | `#1F9C3D` | `#177E30` | `#EFFDF2` |\n| Розовый — акции и бренд | `#D8589E` | `#C44088` | `#FCF0F7` |\n| Фиолетовый — доп. блоки | `#6A61B1` | `#554D90` | `#F2F0FD` |\n\nПлюс градация серого от `#323232` до `#F6F6F6` для текста и разделителей и отдельный красный `#F25C5C` для ошибок.\n\nЗелёный закреплён за одним смыслом: кнопка «Купить», «В корзину», «Оформить заказ», актуальная цена. Розовый и фиолетовый работают на промо и не претендуют на роль кнопок — покупатель ни на одной странице не путается, куда нажимать.\n\nТипографика — две гарнитуры: **Manrope Bold** для заголовков (72 \u002F 62 \u002F 52 \u002F 42 \u002F 32 \u002F 24) и **Inter** для текста (22 \u002F 18 \u002F 14 \u002F 12) в начертаниях Regular и Semi Bold. Отдельно заведены капслок-стили Manrope для бейджей и рубрик.\n\nПастельные подложки стали основным приёмом главной: промо-плитки лежат на мятном, розовом, лавандовом и песочном фоне, и фотографии букетов на них читаются, не смешиваясь друг с другом.\n\n## Главная: витрина вместо длинного каталога\n\nГлавная собрана как витрина поводов, а не как список товаров:\n\n- **Промо-сетка** из плиток разного размера — «Красивые букеты к 1 Сентября», «Авторские букеты», «Композиции с цветами», «Корзина с цветами», «Цветы поштучно».\n- **Товарные подборки** — «Розы с доставкой», «Наборы», «Хиты продаж».\n- **Ближайшие праздники** — отдельная лента с датами: 1 сентября, 30 октября, 15 ноября, 31 декабря. Активная дата подсвечивается зелёной карточкой с кнопкой «Выбрать букет».\n- **Каталог цветов** — плитки разделов на цветных подложках.\n- **Новости и статьи** — две ленты внизу.\n- **Блок пунктов выдачи** с картой города.\n\nЛогика простая: цветы покупают под повод, а не «просто посмотреть каталог». Поэтому поводы вынесены выше товаров.\n\n## Меню каталога: вся структура в одном экране\n\nКаталог цветов — это десятки пересекающихся разделов: по цветку, по количеству, по упаковке, по поводу. Прятать это в многоуровневое дерево значит заставить покупателя угадывать, где лежит нужный букет.\n\nВ дизайне меню раскрывается на всю ширину и показывает структуру целиком: колонки разделов («Букеты роз», «15 роз», «25 роз», «51 роза», «101 роза», «Розы Россия», «Корзины роз») рядом с колонкой поводов и типов («Композиции с цветами», «Аксессуары к цветам», «Подарки», «Наборы», «Цветы на похороны», «Альстромерии», «Гербера», «Хризантемы»). Слева — промо-плитки, чтобы меню не выглядело простыней ссылок.\n\n![Раскрытое меню каталога](\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F02_menu.webp)\n\n## Каталог: промо внутри товарной ленты\n\nВ каталоге собраны инструменты, которые обычно живут порознь:\n\n- подкатегории плитками сверху — быстрый переход внутрь раздела;\n- сортировка чипсами — «По популярности», «Дешевле», «Дороже», «Хиты», «Новинки»;\n- сетка карточек 4 в ряд;\n- пагинация и кнопка «Показать ещё букеты» одновременно;\n- SEO-текст внизу под кат «Показать полностью».\n\nГлавный приём — **промо-баннеры встроены прямо в товарную сетку**: через каждые несколько рядов лента разрывается блоком «Композиции с цветами», «Красивые букеты к 1 Сентября», «Элитные букеты на День Рождения со скидкой до 50%». Длинная выдача перестаёт быть монотонной, а магазин получает место под акции там, где покупатель уже листает товары.\n\n![Каталог букетов](\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F03_catalog.webp)\n\n![Страница категории](\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F04_category.webp)\n\n## Товарная карточка: два сценария покупки\n\nВ карточке товара на сетке всегда две кнопки: **«Купить»** — обычный сценарий через корзину, и **«Быстрый заказ»** — короткая форма, когда человек не хочет проходить оформление целиком.\n\nКроме того, в карточке размечены:\n\n- бейджи «Хит», «Доставка 0 ₽», «Упаковка в подарок», процент скидки;\n- подсказка размера — «Как 51 роза»: букет сложно оценить по фото, поэтому масштаб задан привычной мерой;\n- старая цена зачёркиванием и текущая зелёным;\n- состояние наведения — карточка подсвечивается зелёной рамкой.\n\n## Страница букета: блок покупки не уезжает\n\nСтраница товара длинная: галерея с видео, описание состава, вкладки, две товарные подборки и облако разделов. Если блок с ценой оставить наверху, к моменту, когда покупатель дочитал состав букета, кнопки уже нет на экране.\n\nПоэтому **блок покупки закреплён справа и остаётся на месте при прокрутке**. В нём собрано всё для решения: цена, старая цена и размер экономии, счётчик количества, «В корзину» и «Быстрый заказ», иконки платёжных систем.\n\nСодержание разнесено по вкладкам — **Описание, Доставка, Оплата, Самовывоз, Отзывы** со счётчиком. Состав букета в описании расписан по цветам: георгин, пионовидные розы Джульетта, эустома, оксипеталум, розы Капучино, диантус, скабиоза Стеллата, гвоздика. Внизу — «С этим товаром покупают», «Хиты продаж» и облако разделов, в которых размещён букет.\n\n![Карточка букета](\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F05_product.webp)\n\n## Отзывы: оценки и форма в самой карточке\n\nОтзывы не спрятаны в отдельный раздел, а лежат вкладкой в карточке букета — вместе с ответами администрации магазина. Тут же форма «Оставить отзыв» с выбором типа обращения (похвала, вопрос, предложение, жалоба) и рейтингом звёздами.\n\n![Отзывы в карточке букета](\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F06_reviews_product.webp)\n\nОтдельная страница отзывов тоже есть — с фильтрами и общей формой.\n\n![Раздел отзывов](\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F11_reviews.webp)\n\n## Корзина и оформление: одна панель поверх сайта\n\nКлючевое решение проекта. Корзина и оформление заказа собраны **в одну выдвижную панель поверх страницы** — покупатель не уходит из каталога и не переходит по шагам между страницами.\n\nВ верхней части панели — состав заказа: товары с артикулами, счётчики количества, удаление, поле промокода и итог со скидкой и доставкой. Следом — **«Добавьте к заказу»**: мини-открытка с пожеланием, топпер, кекс к букету, каждое по +50 ₽.\n\n![Панель корзины](\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F07_cart.webp)\n\nДальше в той же панели — оформление, разбитое на четыре пронумерованных шага:\n\n1. **Контактные данные** — имя, телефон, e-mail.\n2. **Способ получения** — самовывоз, доставка по СПб, доставка по ЛО. Для самовывоза — выбор пункта списком или на карте. Тут же переключатель **«Получу Я» \u002F «Получу не Я»** с полями получателя и опцией не сообщать ему, кто заказал: цветы чаще всего дарят, и интерфейс это учитывает.\n3. **Дата и время получения** — интервал «от» и «до», опция созвониться с получателем, комментарий к заказу.\n4. **Оплата** — онлайн или при получении, поля карты, согласия.\n\nИтоговая сумма закреплена в нижней плашке и видна на любом шаге.\n\n![Шаги оформления заказа](\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F08_checkout.webp)\n\n## Самовывоз из 50 точек\n\n50 салонов по городу — сильная сторона бизнеса, поэтому самовывоз в дизайне не спрятан в примечания:\n\n- блок с картой и пинами прямо на главной — «50 пунктов выдачи онлайн-заказов в Санкт-Петербурге»;\n- отдельная страница пунктов выдачи с картой и списком адресов;\n- вкладка «Самовывоз» в карточке букета;\n- выбор точки на карте прямо в оформлении заказа.\n\n![Страница пунктов выдачи](\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F09_pickup.webp)\n\n## Иллюстрации: персонаж для скучных страниц\n\nВ любом интернет-магазине есть страницы, которые нечем показать: доставка и оплата, возврат и обмен, о компании, отзывы, спасибо за заказ. Фотографий букетов там нет, а текста много — такие страницы выглядят пустыми и их не дочитывают.\n\nМы предложили нарисовать серию фирменных иллюстраций и поставить их именно на эти страницы. Работа велась параллельно с дизайном сайта и оплачивалась отдельно.\n\nПолучился единый персонаж — **тюльпан в зелёной толстовке с логотипом «Артфлоры»** — и 7 сцен под конкретные страницы:\n\n| Иллюстрация | Где стоит |\n|---|---|\n| Курьер на мопеде с корзиной цветов | Доставка |\n| Оплата картой за ноутбуком | Оплата |\n| Флорист собирает букет за прилавком | Состав букета |\n| Грустный подсолнух и возврат денег | Возврат и обмен |\n| Персонаж с отзывами, звёздами и кубком | Оставить отзыв |\n| Витрина салона с вывеской | О компании |\n| Шары, конфетти и палец вверх | Спасибо за заказ |\n\nПерсонаж собран из той же палитры, что и интерфейс: розовый бутон, зелёная одежда, фиолетовые и жёлтые детали окружения — иллюстрации не выглядят чужими на страницах магазина.\n\n![Фирменные иллюстрации](\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F15_illustrations.webp)\n\nКак это выглядит на самой странице — иллюстрация встроена в блок «Доставка курьером»:\n\n![Страница доставки и оплаты](\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F10_delivery.webp)\n\n## Блог и текстовые страницы\n\nПод контент сделан отдельный набор шаблонов: список статей, страница статьи, лента новостей и внутренняя страница новости, «О компании», вакансии с формой, страница благодарности и 404.\n\n![Блог и статьи](\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F12_blog.webp)\n\n## Три раскладки\n\nКаждая страница отрисована под три ширины — 1920, 1024 и 360.\n\n![Планшетная раскладка](\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F13_tablet.webp)\n\nМобильная версия — не сжатый десктоп, а переработанная навигация: иконочная панель с поиском, счётчиками корзины и пунктов выдачи, горизонтальные ленты товаров вместо сеток, раскрывающийся футер, отдельные экраны поиска и выбора пункта выдачи.\n\n![Мобильная версия](\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F14_mobile.webp)\n\n## Объём работы\n\n| Параметр | Сделано |\n|---|---|\n| Типов страниц | 14 (главная, каталог, категория, карточка товара, корзина и оформление, пункты выдачи, доставка и оплата, отзывы, блог, статья, новость, о компании, вакансии, спасибо, 404) |\n| Раскладок на страницу | 3 (1920 \u002F 1024 \u002F 360) |\n| Состояний и попапов | Раскрытое меню, поиск и поиск с вводом, быстрый заказ, обратный звонок, фиксированное меню, выбор пункта выдачи, hover карточек |\n| Дизайн-система | 3 акцента × 2 тона, 3 подложки, 7 градаций серого, цвет ошибки |\n| Типографика | Manrope (6 уровней заголовков) + Inter (4 размера × 2 начертания) + 3 капслок-стиля |\n| Иллюстрации | 7 сцен с единым персонажем |\n| Не входило в проект | Вёрстка, разработка, интеграции, запуск |\n\n## Что стоит учесть в похожих проектах\n\n**1. Пёстрый товар требует сдержанного интерфейса.** Букеты дают на экране всю палитру сразу. Если интерфейс тоже яркий, страница превращается в кашу. Три акцента с закреплёнными ролями и светлые подложки — рабочая рамка для такого товара.\n\n**2. Цветы покупают под повод.** Витрина поводов и лента ближайших праздников на главной попадают в реальный сценарий лучше, чем сразу выложенный каталог.\n\n**3. Размер букета не читается по фото.** Подсказка «Как 51 роза» на карточке снимает главный вопрос покупателя до перехода в товар.\n\n**4. Получатель — не заказчик.** Цветы почти всегда дарят. Переключатель «Получу не Я», поля получателя и опция анонимности — не мелочь, а основной сценарий магазина.\n\n**5. Оформление шагами по разным страницам теряет заказы.** Панель поверх сайта с пронумерованными шагами и закреплённым итогом позволяет не терять контекст каталога.\n\n**6. Текстовые страницы нельзя оставлять голыми.** Доставка, оплата, возврат — это страницы, которые читают перед покупкой. Иллюстрации с фирменным персонажем удерживают на них внимание.\n\n## Заключение\n\nПроект «Артфлора» — пример дизайнерской работы, где интерфейс выстроен вокруг двух особенностей бизнеса: цветы покупают под повод и почти всегда кому-то в подарок, а забрать их удобно рядом с домом из одной из 50 точек.\n\nОтсюда все ключевые решения макета: витрина поводов вместо каталога на главной, подсказка размера букета в карточке, получатель отдельно от заказчика в оформлении, самовывоз, проведённый через все страницы, и корзина, которая не выкидывает покупателя из каталога. Фирменные иллюстрации закрыли слабое место любого интернет-магазина — страницы, на которых нечего показать, кроме текста.\n","\u003Ch2>О клиенте\u003C\u002Fh2>\n\u003Cp>«Артфлора» — сеть цветочных салонов в Санкт-Петербурге. Компания работает с 2003 года, занимается розничной и оптовой продажей цветов, держит собственную сеть точек самовывоза по городу и круглосуточную доставку букетов по Санкт-Петербургу и Ленинградской области.\u003C\u002Fp>\n\u003Cp>К моменту работы над проектом у компании было 50 точек выдачи по городу — и это стало одной из опорных идей всего интерфейса.\u003C\u002Fp>\n\u003Ch2>Что входило в проект\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>Мы делали только дизайн.\u003C\u002Fstrong> В объём работ вошли макеты интернет-магазина и серия фирменных иллюстраций. Вёрстка, разработка, интеграции с учётными системами и запуск сайта в проект не входили — поэтому в кейсе мы рассказываем про интерфейсные решения, а не про технологии.\u003C\u002Fp>\n\u003Cp>Что сделано:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>дизайн 14 типов страниц интернет-магазина;\u003C\u002Fli>\n\u003Cli>три раскладки для каждой страницы — десктоп 1920, планшет 1024 и мобильные 360;\u003C\u002Fli>\n\u003Cli>состояния и всплывающие окна: раскрытое меню каталога, поиск, попапы быстрого заказа и обратного звонка, фиксированное меню при прокрутке;\u003C\u002Fli>\n\u003Cli>дизайн-система: палитра, типографика, товарные карточки, кнопки, формы;\u003C\u002Fli>\n\u003Cli>7 фирменных иллюстраций с единым персонажем.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F01_home.webp\" alt=\"Главная страница интернет-магазина\">\u003C\u002Fp>\n\u003Ch2>Дизайн-система: три акцента вместо одного\u003C\u002Fh2>\n\u003Cp>Цветочный магазин — товар с максимально пёстрыми фотографиями. Букеты уже дают на странице всю палитру, какая только бывает, поэтому интерфейс должен не спорить с ними, а держать структуру.\u003C\u002Fp>\n\u003Cp>Решение — сдержанная система из трёх акцентов, у каждого свой тёмный тон и своя светлая подложка:\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Роль\u003C\u002Fth>\n\u003Cth>Основной\u003C\u002Fth>\n\u003Cth>Тёмный\u003C\u002Fth>\n\u003Cth>Подложка\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Зелёный — действия и цены\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>#1F9C3D\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>#177E30\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>#EFFDF2\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Розовый — акции и бренд\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>#D8589E\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>#C44088\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>#FCF0F7\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Фиолетовый — доп. блоки\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>#6A61B1\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>#554D90\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>#F2F0FD\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>Плюс градация серого от \u003Ccode>#323232\u003C\u002Fcode> до \u003Ccode>#F6F6F6\u003C\u002Fcode> для текста и разделителей и отдельный красный \u003Ccode>#F25C5C\u003C\u002Fcode> для ошибок.\u003C\u002Fp>\n\u003Cp>Зелёный закреплён за одним смыслом: кнопка «Купить», «В корзину», «Оформить заказ», актуальная цена. Розовый и фиолетовый работают на промо и не претендуют на роль кнопок — покупатель ни на одной странице не путается, куда нажимать.\u003C\u002Fp>\n\u003Cp>Типографика — две гарнитуры: \u003Cstrong>Manrope Bold\u003C\u002Fstrong> для заголовков (72 \u002F 62 \u002F 52 \u002F 42 \u002F 32 \u002F 24) и \u003Cstrong>Inter\u003C\u002Fstrong> для текста (22 \u002F 18 \u002F 14 \u002F 12) в начертаниях Regular и Semi Bold. Отдельно заведены капслок-стили Manrope для бейджей и рубрик.\u003C\u002Fp>\n\u003Cp>Пастельные подложки стали основным приёмом главной: промо-плитки лежат на мятном, розовом, лавандовом и песочном фоне, и фотографии букетов на них читаются, не смешиваясь друг с другом.\u003C\u002Fp>\n\u003Ch2>Главная: витрина вместо длинного каталога\u003C\u002Fh2>\n\u003Cp>Главная собрана как витрина поводов, а не как список товаров:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Промо-сетка\u003C\u002Fstrong> из плиток разного размера — «Красивые букеты к 1 Сентября», «Авторские букеты», «Композиции с цветами», «Корзина с цветами», «Цветы поштучно».\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Товарные подборки\u003C\u002Fstrong> — «Розы с доставкой», «Наборы», «Хиты продаж».\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Ближайшие праздники\u003C\u002Fstrong> — отдельная лента с датами: 1 сентября, 30 октября, 15 ноября, 31 декабря. Активная дата подсвечивается зелёной карточкой с кнопкой «Выбрать букет».\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Каталог цветов\u003C\u002Fstrong> — плитки разделов на цветных подложках.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Новости и статьи\u003C\u002Fstrong> — две ленты внизу.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Блок пунктов выдачи\u003C\u002Fstrong> с картой города.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Логика простая: цветы покупают под повод, а не «просто посмотреть каталог». Поэтому поводы вынесены выше товаров.\u003C\u002Fp>\n\u003Ch2>Меню каталога: вся структура в одном экране\u003C\u002Fh2>\n\u003Cp>Каталог цветов — это десятки пересекающихся разделов: по цветку, по количеству, по упаковке, по поводу. Прятать это в многоуровневое дерево значит заставить покупателя угадывать, где лежит нужный букет.\u003C\u002Fp>\n\u003Cp>В дизайне меню раскрывается на всю ширину и показывает структуру целиком: колонки разделов («Букеты роз», «15 роз», «25 роз», «51 роза», «101 роза», «Розы Россия», «Корзины роз») рядом с колонкой поводов и типов («Композиции с цветами», «Аксессуары к цветам», «Подарки», «Наборы», «Цветы на похороны», «Альстромерии», «Гербера», «Хризантемы»). Слева — промо-плитки, чтобы меню не выглядело простыней ссылок.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F02_menu.webp\" alt=\"Раскрытое меню каталога\">\u003C\u002Fp>\n\u003Ch2>Каталог: промо внутри товарной ленты\u003C\u002Fh2>\n\u003Cp>В каталоге собраны инструменты, которые обычно живут порознь:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>подкатегории плитками сверху — быстрый переход внутрь раздела;\u003C\u002Fli>\n\u003Cli>сортировка чипсами — «По популярности», «Дешевле», «Дороже», «Хиты», «Новинки»;\u003C\u002Fli>\n\u003Cli>сетка карточек 4 в ряд;\u003C\u002Fli>\n\u003Cli>пагинация и кнопка «Показать ещё букеты» одновременно;\u003C\u002Fli>\n\u003Cli>SEO-текст внизу под кат «Показать полностью».\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Главный приём — \u003Cstrong>промо-баннеры встроены прямо в товарную сетку\u003C\u002Fstrong>: через каждые несколько рядов лента разрывается блоком «Композиции с цветами», «Красивые букеты к 1 Сентября», «Элитные букеты на День Рождения со скидкой до 50%». Длинная выдача перестаёт быть монотонной, а магазин получает место под акции там, где покупатель уже листает товары.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F03_catalog.webp\" alt=\"Каталог букетов\">\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F04_category.webp\" alt=\"Страница категории\">\u003C\u002Fp>\n\u003Ch2>Товарная карточка: два сценария покупки\u003C\u002Fh2>\n\u003Cp>В карточке товара на сетке всегда две кнопки: \u003Cstrong>«Купить»\u003C\u002Fstrong> — обычный сценарий через корзину, и \u003Cstrong>«Быстрый заказ»\u003C\u002Fstrong> — короткая форма, когда человек не хочет проходить оформление целиком.\u003C\u002Fp>\n\u003Cp>Кроме того, в карточке размечены:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>бейджи «Хит», «Доставка 0 ₽», «Упаковка в подарок», процент скидки;\u003C\u002Fli>\n\u003Cli>подсказка размера — «Как 51 роза»: букет сложно оценить по фото, поэтому масштаб задан привычной мерой;\u003C\u002Fli>\n\u003Cli>старая цена зачёркиванием и текущая зелёным;\u003C\u002Fli>\n\u003Cli>состояние наведения — карточка подсвечивается зелёной рамкой.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Страница букета: блок покупки не уезжает\u003C\u002Fh2>\n\u003Cp>Страница товара длинная: галерея с видео, описание состава, вкладки, две товарные подборки и облако разделов. Если блок с ценой оставить наверху, к моменту, когда покупатель дочитал состав букета, кнопки уже нет на экране.\u003C\u002Fp>\n\u003Cp>Поэтому \u003Cstrong>блок покупки закреплён справа и остаётся на месте при прокрутке\u003C\u002Fstrong>. В нём собрано всё для решения: цена, старая цена и размер экономии, счётчик количества, «В корзину» и «Быстрый заказ», иконки платёжных систем.\u003C\u002Fp>\n\u003Cp>Содержание разнесено по вкладкам — \u003Cstrong>Описание, Доставка, Оплата, Самовывоз, Отзывы\u003C\u002Fstrong> со счётчиком. Состав букета в описании расписан по цветам: георгин, пионовидные розы Джульетта, эустома, оксипеталум, розы Капучино, диантус, скабиоза Стеллата, гвоздика. Внизу — «С этим товаром покупают», «Хиты продаж» и облако разделов, в которых размещён букет.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F05_product.webp\" alt=\"Карточка букета\">\u003C\u002Fp>\n\u003Ch2>Отзывы: оценки и форма в самой карточке\u003C\u002Fh2>\n\u003Cp>Отзывы не спрятаны в отдельный раздел, а лежат вкладкой в карточке букета — вместе с ответами администрации магазина. Тут же форма «Оставить отзыв» с выбором типа обращения (похвала, вопрос, предложение, жалоба) и рейтингом звёздами.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F06_reviews_product.webp\" alt=\"Отзывы в карточке букета\">\u003C\u002Fp>\n\u003Cp>Отдельная страница отзывов тоже есть — с фильтрами и общей формой.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F11_reviews.webp\" alt=\"Раздел отзывов\">\u003C\u002Fp>\n\u003Ch2>Корзина и оформление: одна панель поверх сайта\u003C\u002Fh2>\n\u003Cp>Ключевое решение проекта. Корзина и оформление заказа собраны \u003Cstrong>в одну выдвижную панель поверх страницы\u003C\u002Fstrong> — покупатель не уходит из каталога и не переходит по шагам между страницами.\u003C\u002Fp>\n\u003Cp>В верхней части панели — состав заказа: товары с артикулами, счётчики количества, удаление, поле промокода и итог со скидкой и доставкой. Следом — \u003Cstrong>«Добавьте к заказу»\u003C\u002Fstrong>: мини-открытка с пожеланием, топпер, кекс к букету, каждое по +50 ₽.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F07_cart.webp\" alt=\"Панель корзины\">\u003C\u002Fp>\n\u003Cp>Дальше в той же панели — оформление, разбитое на четыре пронумерованных шага:\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>Контактные данные\u003C\u002Fstrong> — имя, телефон, e-mail.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Способ получения\u003C\u002Fstrong> — самовывоз, доставка по СПб, доставка по ЛО. Для самовывоза — выбор пункта списком или на карте. Тут же переключатель \u003Cstrong>«Получу Я» \u002F «Получу не Я»\u003C\u002Fstrong> с полями получателя и опцией не сообщать ему, кто заказал: цветы чаще всего дарят, и интерфейс это учитывает.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Дата и время получения\u003C\u002Fstrong> — интервал «от» и «до», опция созвониться с получателем, комментарий к заказу.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Оплата\u003C\u002Fstrong> — онлайн или при получении, поля карты, согласия.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Итоговая сумма закреплена в нижней плашке и видна на любом шаге.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F08_checkout.webp\" alt=\"Шаги оформления заказа\">\u003C\u002Fp>\n\u003Ch2>Самовывоз из 50 точек\u003C\u002Fh2>\n\u003Cp>50 салонов по городу — сильная сторона бизнеса, поэтому самовывоз в дизайне не спрятан в примечания:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>блок с картой и пинами прямо на главной — «50 пунктов выдачи онлайн-заказов в Санкт-Петербурге»;\u003C\u002Fli>\n\u003Cli>отдельная страница пунктов выдачи с картой и списком адресов;\u003C\u002Fli>\n\u003Cli>вкладка «Самовывоз» в карточке букета;\u003C\u002Fli>\n\u003Cli>выбор точки на карте прямо в оформлении заказа.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F09_pickup.webp\" alt=\"Страница пунктов выдачи\">\u003C\u002Fp>\n\u003Ch2>Иллюстрации: персонаж для скучных страниц\u003C\u002Fh2>\n\u003Cp>В любом интернет-магазине есть страницы, которые нечем показать: доставка и оплата, возврат и обмен, о компании, отзывы, спасибо за заказ. Фотографий букетов там нет, а текста много — такие страницы выглядят пустыми и их не дочитывают.\u003C\u002Fp>\n\u003Cp>Мы предложили нарисовать серию фирменных иллюстраций и поставить их именно на эти страницы. Работа велась параллельно с дизайном сайта и оплачивалась отдельно.\u003C\u002Fp>\n\u003Cp>Получился единый персонаж — \u003Cstrong>тюльпан в зелёной толстовке с логотипом «Артфлоры»\u003C\u002Fstrong> — и 7 сцен под конкретные страницы:\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Иллюстрация\u003C\u002Fth>\n\u003Cth>Где стоит\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Курьер на мопеде с корзиной цветов\u003C\u002Ftd>\n\u003Ctd>Доставка\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Оплата картой за ноутбуком\u003C\u002Ftd>\n\u003Ctd>Оплата\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Флорист собирает букет за прилавком\u003C\u002Ftd>\n\u003Ctd>Состав букета\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Грустный подсолнух и возврат денег\u003C\u002Ftd>\n\u003Ctd>Возврат и обмен\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Персонаж с отзывами, звёздами и кубком\u003C\u002Ftd>\n\u003Ctd>Оставить отзыв\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Витрина салона с вывеской\u003C\u002Ftd>\n\u003Ctd>О компании\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Шары, конфетти и палец вверх\u003C\u002Ftd>\n\u003Ctd>Спасибо за заказ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>Персонаж собран из той же палитры, что и интерфейс: розовый бутон, зелёная одежда, фиолетовые и жёлтые детали окружения — иллюстрации не выглядят чужими на страницах магазина.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F15_illustrations.webp\" alt=\"Фирменные иллюстрации\">\u003C\u002Fp>\n\u003Cp>Как это выглядит на самой странице — иллюстрация встроена в блок «Доставка курьером»:\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F10_delivery.webp\" alt=\"Страница доставки и оплаты\">\u003C\u002Fp>\n\u003Ch2>Блог и текстовые страницы\u003C\u002Fh2>\n\u003Cp>Под контент сделан отдельный набор шаблонов: список статей, страница статьи, лента новостей и внутренняя страница новости, «О компании», вакансии с формой, страница благодарности и 404.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F12_blog.webp\" alt=\"Блог и статьи\">\u003C\u002Fp>\n\u003Ch2>Три раскладки\u003C\u002Fh2>\n\u003Cp>Каждая страница отрисована под три ширины — 1920, 1024 и 360.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F13_tablet.webp\" alt=\"Планшетная раскладка\">\u003C\u002Fp>\n\u003Cp>Мобильная версия — не сжатый десктоп, а переработанная навигация: иконочная панель с поиском, счётчиками корзины и пунктов выдачи, горизонтальные ленты товаров вместо сеток, раскрывающийся футер, отдельные экраны поиска и выбора пункта выдачи.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Fartflora\u002Fassets\u002F14_mobile.webp\" alt=\"Мобильная версия\">\u003C\u002Fp>\n\u003Ch2>Объём работы\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Параметр\u003C\u002Fth>\n\u003Cth>Сделано\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Типов страниц\u003C\u002Ftd>\n\u003Ctd>14 (главная, каталог, категория, карточка товара, корзина и оформление, пункты выдачи, доставка и оплата, отзывы, блог, статья, новость, о компании, вакансии, спасибо, 404)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Раскладок на страницу\u003C\u002Ftd>\n\u003Ctd>3 (1920 \u002F 1024 \u002F 360)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Состояний и попапов\u003C\u002Ftd>\n\u003Ctd>Раскрытое меню, поиск и поиск с вводом, быстрый заказ, обратный звонок, фиксированное меню, выбор пункта выдачи, hover карточек\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Дизайн-система\u003C\u002Ftd>\n\u003Ctd>3 акцента × 2 тона, 3 подложки, 7 градаций серого, цвет ошибки\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Типографика\u003C\u002Ftd>\n\u003Ctd>Manrope (6 уровней заголовков) + Inter (4 размера × 2 начертания) + 3 капслок-стиля\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Иллюстрации\u003C\u002Ftd>\n\u003Ctd>7 сцен с единым персонажем\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Не входило в проект\u003C\u002Ftd>\n\u003Ctd>Вёрстка, разработка, интеграции, запуск\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Ch2>Что стоит учесть в похожих проектах\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>1. Пёстрый товар требует сдержанного интерфейса.\u003C\u002Fstrong> Букеты дают на экране всю палитру сразу. Если интерфейс тоже яркий, страница превращается в кашу. Три акцента с закреплёнными ролями и светлые подложки — рабочая рамка для такого товара.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>2. Цветы покупают под повод.\u003C\u002Fstrong> Витрина поводов и лента ближайших праздников на главной попадают в реальный сценарий лучше, чем сразу выложенный каталог.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>3. Размер букета не читается по фото.\u003C\u002Fstrong> Подсказка «Как 51 роза» на карточке снимает главный вопрос покупателя до перехода в товар.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>4. Получатель — не заказчик.\u003C\u002Fstrong> Цветы почти всегда дарят. Переключатель «Получу не Я», поля получателя и опция анонимности — не мелочь, а основной сценарий магазина.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>5. Оформление шагами по разным страницам теряет заказы.\u003C\u002Fstrong> Панель поверх сайта с пронумерованными шагами и закреплённым итогом позволяет не терять контекст каталога.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>6. Текстовые страницы нельзя оставлять голыми.\u003C\u002Fstrong> Доставка, оплата, возврат — это страницы, которые читают перед покупкой. Иллюстрации с фирменным персонажем удерживают на них внимание.\u003C\u002Fp>\n\u003Ch2>Заключение\u003C\u002Fh2>\n\u003Cp>Проект «Артфлора» — пример дизайнерской работы, где интерфейс выстроен вокруг двух особенностей бизнеса: цветы покупают под повод и почти всегда кому-то в подарок, а забрать их удобно рядом с домом из одной из 50 точек.\u003C\u002Fp>\n\u003Cp>Отсюда все ключевые решения макета: витрина поводов вместо каталога на главной, подсказка размера букета в карточке, получатель отдельно от заказчика в оформлении, самовывоз, проведённый через все страницы, и корзина, которая не выкидывает покупателя из каталога. Фирменные иллюстрации закрыли слабое место любого интернет-магазина — страницы, на которых нечего показать, кроме текста.\u003C\u002Fp>\n"]