С чего начали
Бренд пиццерии обычно показывают меню и акциями. Хотелось проверить, может ли сайт бренда быть историей, которую дочитывают до конца, и при этом остаться быстрым, работать на телефоне и не требовать ни одной тяжёлой картинки.
Концепт · интерактивный комикс · 2026
Додо Пицца
- Клиент
- Авторский концепт VERSTA
- Тип
- Концепт · интерактивный комикс
- Год
- 2026
Инициативный концепт для Додо Пиццы: сайт-комикс о шарике теста, который хочет стать первой пиццей утра. Логотип и цвета — настоящие, герои, история и все кадры нарисованы студией. С Додо Пиццей студия не связана.
01 — Знак, цвет, шрифт
Айдентика
Фирменное здесь — логотип и цвета. Логотип взят из официального брендбука Додо без изменений, цвета — из темы dodopizza.ru. Всё остальное придумано для концепта: герои, история, кадры и фон.
Оранжевый Додо#FF6900
Тесто#FFF0E5
Розовый акций#FF659D
Синий Додокоина#4B4BFF
Чернила#171717
02 — Три главы
Чтение
«Пышка» — это комикс о шарике теста, который хочет стать первой пиццей утра. Три главы: утро в пиццерии, пятничный час пик и ночная доставка. В них 28 разворотов и 85 кадров. Листать можно колесом, стрелками, мышью или пальцем.
Концепт VERSTA · 2026
Развороты стоят в ленте с лёгкой перспективой. Плашка внизу показывает, сколько прочитано, как плеер показывает, сколько проиграно.
03 — Что интересного
Экраны
Камера заезжает в кадр
По клику кадр раскрывается на весь разворот, сохраняя пропорции. Потом камера медленно наезжает или ведёт панораму, а слои кадра расходятся за курсором.
Фон живёт по главам
За страницей работает свой шейдер: мягкое цветное пятно и зерно печати. У каждой главы свои цвета: утро оранжево-розовое, час пик тёмный, ночь синяя.
Под палец
На телефоне развороты листаются свайпом, главы тоже, а кадр открывается касанием.
04 — Детали
Как проверяли
Спецификация, а не вкус
Размеры, отступы, скругления, длительности и кривые анимаций записаны в спецификацию. Сборку проверяет скрипт, который читает стили и живые анимации в браузере: 224 проверки раскладки и движения и 51 проверка бренда, все пройдены.
Поведение руками робота
Отдельный прогон крутит колесо, листает тачпадом, свайпает на телефоне, открывает кадры и закрывает их. Он проверяет, что одно движение колеса перелистывает ровно один разворот, а открытый кадр не обрезается.
Скорость
Lighthouse: производительность 92–94 на телефоне и 99 на компьютере, доступность, практики и SEO по 100. Весь комикс нарисован кодом, поэтому картинок почти нет. При настройке «меньше движения» камера и параллакс выключаются.
05 — Честно
Границы концепта
Это инициативный концепт студии VERSTA. Его никто не заказывал, он не согласован с Додо Пиццей, и студия никак с ней не связана. В подвале концепта это сказано прямо.
Что настоящее
Логотип — официальный файл из брендбука Додо, без изменений. Цвета — из темы dodopizza.ru. Кнопка «Хочется пиццы?» ведёт на настоящий сайт.
Что придумано
Герои, сюжет, реплики и кадры — наши. Талисман Додо в комиксе не появляется. История вымышленная, как и заказ для Ани.
Что условное
Плеер показывает прогресс главы, но музыки нет. Шрифт — открытая замена фирменному. Страница закрыта от поисковиков.
«Додо Пицца» и логотип принадлежат правообладателю и использованы только для описания концепта.
06 — Ход работы
Что было и что сделали
Что изменили
Комикс нарисован кодом: каждый кадр — слои SVG, которые двигаются отдельно за курсором и камерой. Развороты стоят в ленте с перспективой, кадр раскрывается по клику с сохранением пропорций, за страницей работает свой WebGL-фон с зерном печати, а на странице «О проекте» герои падают с физикой.
07 — Цифры
Что можно посчитать
85кадров в трёх главах
275 / 275проверок раскладки, движения и бренда
99Lighthouse на компьютере
08 — Что входило
Состав работы
- Исследование и структура
- Арт-дирекшн
- UX/UI-дизайн
- Разработка и запуск
Границы кейса
Что показывает эта страница
Снимки сделаны с работающего проекта, а не с макета. Показываем интерфейс и решения, которые сделали сами.
Результат кейса — выпущенный интерфейс. Изменение числа заявок, выручки и позиций в поиске мы этой работой не измеряли и не приводим. Полоса с цифрами появляется только там, где измерение действительно есть.
Создадим продукт, который хочется показывать.
Расскажите о задаче — вернёмся с вопросами и первым направлением решения.