SHEET 22 — КОНДИТЕРСКАЯ2026

Sugar Bunny ↗

Кондитерская с характером: рисованные сцены, мягкие анимации и меню, от которого теплеет.

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

A — ФИЛЬМ ПО ЭКРАНАМ

Видео-прогулка по проекту «Sugar Bunny»: от первого экрана до ключевого действия.

A.2 — ФИЛЬМ НА ТЕЛЕФОНЕ

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

B — ВВОДНЫЕ

Исходные данные: В опубликованном брифе: маленькая авторская кондитерская, один кондитер, небольшие партии
Ассортимент: Четыре основных десерта и отдельный список напитков
Аудитория: Покупатели подарков и маленьких радостей; гости, которым важна эмоциональная и авторская подача
Точка действия: Открыть витрину → выбрать десерт → оставить пожелание на странице Visit
Структура: Главная, Counter, Our story, Visit и отдельный Design case
Основание разбора: Опубликованный бриф /case и наблюдение работающего сайта, а не неподтверждённые клиентские результаты

Ключевая проблема

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

Цели

01Передать ценность ручной работы до знакомства с ценой
02Отличить маленькую кондитерскую от сетевого каталога
03Создать эмоциональный вход для покупки подарка или небольшого удовольствия
04Показать четыре десерта как отобранную витрину, а не неполный ассортимент
05Связать впечатление с понятным переходом к форме пожелания
06Сохранить характер и доступ к заказу на телефоне

C — ОГРАНИЧЕНИЯ

Ограничения — не оправдание, а аргумент: они объясняют, почему решение выглядит именно так.

В исходном разборе заявлен отсутствующий бюджет на регулярную фотосъёмку: визуальная система должна жить без еженедельного обновления фотографий.
Четыре основных десерта не оправдывают сложный каталог: важны характер каждой позиции и ясный выбор.
Эмоциональная подача не отменяет предметной информации: состав, цена, раздел меню и действие должны оставаться читаемыми.
Единый персонаж должен сохранять узнаваемость, но не повторяться одной и той же картинкой на всех страницах.
Движение не должно спорить с текстом и кнопками; в стилях сайта предусмотрено сокращение анимации при reduced-motion.
Скриншоты подтверждают композицию, а не движение: анимацию показывают ролики. Продажи и рост конверсии без аналитики не заявляются.

D — КОНЦЕПЦИЯ

Не сайт о десертах, а кондитерская, в которую заглядывают через окно. Сквозной акварельный мир связывает вывеску, персонажа, продукты и движение. Ручная работа считывается ещё до цены: сначала посетитель встречает характер, затем знакомится с небольшим ассортиментом и переходит к пожеланию для заказа.

Открыть действующий сайт ↗

D.2 — ПРЕЗЕНТАЦИЯ КЕЙСА

Пекарня, в которую заглядываешь

Маленькая авторская кондитерская: один кондитер, небольшие партии. Сайт не витрина с ценами, а окно, в которое заглядываешь — и пекарня отвечает.

Первый экран Sugar Bunny: окно в пекарню.

Прилавок дня — Четыре десерта, а не каталог: свежее сегодня.

Шаги заказа — Выберите, загадайте — мы распишем: три мягких шага.

История Мали — Кролик, который сначала рисует.

Сцена пекарни — Заходите, чайник тёплый: тот же мир, новый момент.

Меню — Весь прилавок: торты, выпечка и напитки отдельно.

Страница визита — Маленькая розовая дверь.

Форма письма — Письмо вместо корзины: расскажите, что нарисовать. Форма концепт-сайта ничего не собирает.

E — РЕШЕНИЯ И ОБОСНОВАНИЕ

01 — единый персонаж в сцене кондитерской

4.1

Мали вместо абстрактного обещания

Задача: Показать авторский, ручной характер продукта в первые секунды.
Ограничение: Слово «handmade» само по себе не отличает кондитерскую от конкурентов.
Решение: Первый экран встречает зайчиха-кондитер в нарисованной лавке. В истории она появляется с тортом в другой сцене: у мира есть постоянная героиня, имя и последовательный характер.
Эффект: Персонаж делает обещание ручного труда наглядным и даёт посетителю узнаваемый образ для запоминания. Это функция дизайна, а не измеренный показатель узнаваемости.

02 — акварельный персонаж и история ручной работы

4.2

Акварель как язык продукта

Задача: Заменить зависимость от фотосъёмок цельной авторской системой.
Ограничение: Случайные фотографии и стандартные иконки разрушили бы ощущение одного нарисованного мира.
Решение: Размывы бумаги, цветы, десерты, вывеска и иллюстрации выдержаны в одной технике. Контуры не выглядят машинно безупречными: графика повторяет интонацию ручного изготовления, которую заявляет бренд.
Эффект: Изображения объясняют характер продукта без длинного рекламного текста; новые страницы могут продолжать ту же визуальную грамматику.

03 — цветовые роли на главной странице

4.3

Розовый, сливочный и шалфейный

Задача: Создать ощущение нежного подарка и сохранить видимость действий.
Ограничение: Сплошная ярко-розовая поверхность сделала бы текст и десерты менее различимыми.
Решение: Сливочный фон оставляет воздух, пудрово-розовые размывы задают настроение, более насыщенный розовый выделяет заголовки и кнопки. Шалфейные детали охлаждают палитру и связывают сладости с цветочной сценой; тёплые чернила удерживают читаемость.
Эффект: Цвет разделяет атмосферу и навигацию: нежный фон не конкурирует с переходом к витрине и заказу.

04 — сцена с Мали; движение показано в промо-видео

4.4

Движение внутри одного кадра

Задача: Сделать нарисованную лавку живой, не превращая её в набор эффектов.
Ограничение: Несколько конкурирующих анимаций отвлекали бы от персонажа и основного действия.
Решение: В первом экране встроена единая анимированная сцена; в истории — отдельное видео Мали с тортом. Опубликованное обоснование описывает медленный, почти незаметный зум. Появления блоков и небольшие декоративные движения поддерживают этот ритм; reduced-motion сокращает CSS-анимации.
Эффект: Посетитель видит не статичную иллюстрацию, а живой мир. Ролики кейса показывают движение; стоп-кадр рядом фиксирует расположение элементов.

05 — четыре десерта с видимыми ценами и действиями

4.5

Прилавок вместо пустого каталога

Задача: Помочь выбрать из четырёх десертов и сделать небольшой ассортимент достоинством.
Ограничение: Большая сетка, фильтры и категории с единичными товарами создавали бы ощущение незаполненного магазина.
Решение: На главной стоят четыре иллюстрированные карточки с названием, ценой, кратким составом и Into the box. На Counter десерты разведены на Cakes & slices и Morning pastry, напитки вынесены в отдельный список.
Эффект: Небольшой выбор читается как камерная витрина, а название, состав и цена остаются на одном уровне с эмоцией.

06 — форма пожелания на странице Visit

4.6

Письмо-пожелание, а не сложное оформление

Задача: Завершить эмоциональный путь понятным следующим шагом.
Ограничение: Иллюстративный мир без выхода к действию остался бы красивой картинкой.
Решение: Навигационный Order ведёт на Visit#order. Форма Tell us what to paint просит имя, телефон или почту и пожелание. Рядом размещены сведения о посещении; здесь показывается интерфейс формы, без заявления о проверенной доставке заявок.
Эффект: Переход от выбора к разговору короткий и соответствует индивидуальному заказу. Успешная обработка заказов не приписывается без отдельной проверки.

07 — мобильная витрина, отдельная компоновка

4.7

Телефон — свой кадр той же истории

Задача: Сохранить эмоциональный вход и читаемый выбор на узком экране.
Ограничение: Десктопные ряды карточек и текст рядом с иллюстрацией нельзя просто уменьшить.
Решение: На ширине 390px история и карточки складываются вертикально, сцена сохраняет ширину экрана, а Order остаётся в верхней навигации. Мобильное видео снято отдельно: оно показывает настоящую телефонную компоновку, а не обрезку широкого ролика.
Эффект: Содержание остаётся доступным последовательно, цены и действия не растворяются в уменьшенной десктопной странице.

F — ЧТО МЫ СОЗНАТЕЛЬНО НЕ ДЕЛАЛИ

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

G — ДИЗАЙН-СИСТЕМА

#df4b75

Розовый акцент

#fffaf4

Сливочный фон

#f8dce0

Пудровая акварель

#dbe5d8

Шалфейный

#5e3d42

Тёплые чернила

Заголовки: Bagel Fat One / Baloo 2
Рукописные акценты: Parisienne
Основной текст: Manrope

H — ЭКРАНЫ

Главная — акварельная лавка и два пути знакомства

Design case — опубликованные вводные и ограничения

I — РЕЗУЛЬТАТ

Создан цельный акварельный мир: персонаж, вывеска, десерты, текст и движение говорят одной интонацией.
Реализованы главная и четыре отдельные страницы: меню, история, посещение с формой и дизайн-разбор.
Небольшой ассортимент получил ясную структуру с названием, описанием, ценой и следующим действием.
Свежие экраны фиксируют главные композиции и мобильную версию; два ролика показывают движение и маршрут по сайту.
Разбор подтверждает реализованные решения и их логику. Данных о коммерческом результате нет; ниже — что имеет смысл измерять, а не достигнутые цифры.

Самостоятельный концепт. Концепция, арт-дирекшн, изображения, UX/UI, дизайн-система и разработка — Юлия Юрчевская, Julia Web Studio.

Проект живёт в сети — можно посмотреть вживую

Смотреть сайт ↗

Следующий проектArtful Portfolio →