SMstudia
Digital-студия полного цикла
Инициализация 0%

Быстрая заявка

Оставьте контакт — свяжемся в течение рабочего дня.

Нажимая «Отправить», вы соглашаетесь на обработку персональных данных.

Заявка отправлена!

Спасибо — мы свяжемся с вами в выбранном канале в ближайшее время.

illustrated-comic-website-v2
Иллюстрация становится интерфейсом

Сайт-книга, где сцены живут и переключаются без лишних виджетов.

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

Мир сцены
Палитра сцены
Что изменено

Теперь переключатели встроены в контент, а не висят поверх страницы.

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

01

Мир сцены переключается через обычные кнопки type="button", а состояние меняется только у data-world контейнера.

02

Плавающие панели удалены полностью, поэтому интерфейс стал чище и спокойнее для чтения.

03

Герой перерисован в новой геометричной бумажно-плакатной стилистике.

04

Текстовые блоки получили дополнительные живые иллюстрации и анимированные мини-сцены.

Сцена-инфографика

Услуги читаются как большая карта событий.

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

Скетч-процесс

Контур и заливка строят сцену по шагам.

Текст + рисунок
Шаг 1. Сначала появляется контур, словно художник только начал вести линию по бумаге.
Шаг 2. Затем проявляются цветовые пятна, чтобы сцена не выглядела сухой схемой.
Шаг 3. После этого в текст встраиваются маленькие живые рисунки — стрелки, персонажи, звезды, карточки и декоративные мини-сцены.

Скролл-подсказки.

Герои в абзацах.

Живые стрелки и маршрут.

Текст больше не одинок

Длинные блоки разбавлены живыми вставками.

Чтобы страница не уставляла, рядом с объясняющими абзацами добавлены ритмичные рисунки: мини-персонажи, значки-сцены, вращающиеся акценты, дорожки, стрелки и маленькие плакатные композиции.

Геометричные герои.

Знаки и акценты.

Маршруты и переходы.

Пасхалки и маскот

Игровые элементы стали чище и заметнее.

Пасхалки оставлены внутри сцен, а не вынесены в посторонний интерфейс. Герой может менять настроение по секциям: следить, рисовать или выдавать маленький звездный акцент во время паузы.

Скрытая сова.

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

Персонаж-гид.

Новая стилистика героя уже не похожа на мягкую детскую SVG-куклу, а ближе к бумажному постеру и авторской иллюстрации.

Текстовые сцены.

Даже смысловые секции могут иметь мини-композиции, чтобы длинные объяснения не выглядели как сплошной текстовый лист.

Больше блоков

Добавлены новые ритмические секции для длинной страницы.

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

Пролог

Крупная обложка.

Маршрут

Панорама услуг.

Мастерская

Процесс создания.

Истории

Галерея сцен.

Финал

Футер-карта.

Made on
Tilda