SHEET 10 — КОТ-КАФЕ / ИЛЛЮСТРАЦИЯ2026

Loaf & Purr ↗

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

Самостоятельный концепт вымышленного бренда. Кафе с восемью резидентными котами, куда можно прийти со своим питомцем, отпраздновать детский день рождения и заказать фотосессию. Роль студии — концепция, иллюстрация, арт-дирекшн, UX/UI и фронтенд.

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

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

B — ВВОДНЫЕ

Бриф: Вымышленный бренд: Кафе + кошачья комната + праздники + доп. услуги
Аудитория: Взрослые 25–40 и родители детей 4–10
Боль №1: Гость не знает о дорогих услугах → низкий средний чек
Боль №2: Категория выглядит одинаково: фото котов, пастель, скруглённые углы
Боль №3: Решение о визите принимается эмоционально и почти всегда с телефона
Как измерять: Гипотезы для реального запуска: Заявки на брони и запросы на праздники и фотосессии

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

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

Цели

01За первые пять секунд вызвать желание прийти
02За первые тридцать секунд показать, что здесь тратят не 300 рублей, а 15 000
03Вывести дорогие услуги — праздники, фотосессии, портреты — в навигацию и на главную
04Перераспределить поток с перегруженных выходных на пустые будни
05Сделать сайт узнаваемым в категории с одного взгляда, без логотипа

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

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

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

D — КОНЦЕПЦИЯ

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

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

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

Кот-кафе, нарисованное тушью

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

Первый экран Loaf & Purr — Первый экран продаёт ощущение: забронировать или посмотреть меню.

Блок «Как это работает» — Как это работает: три шага, три цвета.

Страница котов — Восемь жильцов, каждый спасён. Наведение будит кота.

Дополнительные услуги — Фотосессии и портреты: фирменный стиль становится вторым продуктом.

Недельная программа — Неделя: нажмите день — кот меняется.

Страница праздников — У дорогого чека своя дверь: праздники.

Страница бронирования — Повод в форме — заявка приходит уже разобранной. Форма концепт-сайта ничего не собирает.

Мобильная версия — Та же тушь на телефоне.

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

Первый экран: чернильная сцена кафе

5.1

Иллюстрация вместо фотографии

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

Витрина меню сразу под первым экраном

5.2

Видео на первом экране

Задача: Продать состояние, а не список преимуществ.
Ограничение: Звук блокируется браузерами, медленный мобильный интернет.
Решение: Зацикленный ролик без звука во всю высоту окна, постер-подложка под ним, кремовая вуаль слева ради контраста заголовка, две кнопки: «Book a table» и «See the menu».
Задуманный эффект: Человек ещё ничего не прочитал, но уже понял, как он будет себя чувствовать. Тем, кто не готов бронировать, есть куда пойти вместо ухода.

Меню: рукописный ритм и честные цены

5.3

Четыре продукта — четыре адреса

Задача: Поднять средний чек, не поднимая цены.
Ограничение: Общий поток скрывал бы различия между услугами.
Решение: Menu, The Cats, Extras, Parties, Visit — отдельные страницы, на каждую можно вести рекламу и которые индексирует поиск.
Задуманный эффект: Дорогая услуга получает собственную посадочную с понятной ценой заявки.

Знакомство с резидентами

5.4

Перехваты на главной

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

Понедельник: Slow Purr Hour

5.5

Недельная программа как игра

Задача: Заполнить пустые будни.
Ограничение: Таблицу расписания пролистывают не читая.
Решение: Интерактивная сцена: нажимаешь день — меняется кот, анимация и реквизит. Под каждым днём кнопка «Book Monday», а не абстрактное «забронировать».
Задуманный эффект: Пока человек кликает все семь дней подряд, он семь раз узнаёт, что происходит в кафе в будни. Намерение ловится на пике.

Extras: фотосессии и рисованные портреты

5.6

Анимация с функцией

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

Parties: три формата праздника

5.7

Праздники как отдельный продукт

Задача: Показать чек в разы выше кофе.
Ограничение: Информация о праздниках должна быть видна до предполагаемого визита.
Решение: Страница Parties с форматами — Little Paws, Big Birthday Bash, Grown-Up Gathering — ценами и брифингом по обращению с котами.
Задуманный эффект: Страница заранее показывает формат праздника и условный бюджет: это подготовка к возможному запросу, а не полученные заявки.

Форма брони: повод выбирается сразу

5.8

Бронь без трения

Задача: Сократить путь от «увидел» до «забронировал».
Ограничение: Мобильный трафик преобладает.
Решение: Кнопка «Book a table» всегда в закреплённой шапке, форма короткая, повод выбирается списком — так заявка сразу сортируется.
Задуманный эффект: В прототипе путь к форме короткий, а выбранный повод объясняет содержание возможного запроса.

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

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

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

#f7efdd

Кремовая бумага

#e2503a

Коралловый акцент

#1f3fa0

Кобальтовая синь

#1b1a18

Чёрная тушь