Кейс 03Лендинг
Промо-страница онлайн-вебинара о стиле Organic & Natural, которая объясняет стиль и демонстрирует его собой — с полным флоу регистрации, адаптивом и UI-китом.
Разобрать визуальный стиль Organic & Natural — определение, историю, палитру, типографику, формы, фактуры — и обосновать его выбор в сравнении с другими стилями. Спроектировать лендинг вебинара так, чтобы страница одновременно рассказывала о стиле и была его примером.
Проработать сценарий регистрации с аварийными ветками, сделать адаптив на 1440 / 768 / 390 и собрать UI-кит под каждый брейкпоинт.
Дизайнеры и смежные специалисты, которые хотят освоить стиль и применять его функционально: junior и middle дизайнеры, маркетологи и владельцы малых брендов. Общее ожидание — практичность, баланс эстетики и UX, короткий путь до регистрации.
01этап
Из мудборда — природная палитра, тени растений на фоне, тактильные фактуры и «воздушная» композиция. Четыре цвета на всю страницу.
Italiana для заголовков, Manrope для текста — контрастная пара
02этап
Сравнение с двумя выразительными стилями под задачу «изучить стиль и удобно зарегистрироваться».
03этап
Три сегмента, три портрета, общие ожидания от вебинара.
Осваивает стиль, ищет практику
Хочет готовые приёмыПрименяет стиль функционально
Баланс эстетики и UXВизуал для своего продукта
Короткий путь до регистрации04этап
Путь от hero до экрана успеха и четыре аварийные ветки, каждая — отдельный экран в той же визуальной системе.
05этап
Одна колонка, логика вебинара: сначала понять, потом увидеть, потом зарегистрироваться.
Hero → «о стиле» тремя строками → история с фото → палитра карточками → примеры → блок события с CTA → форма → код → благодарность.
06этап
Component sets отдельно под desktop / tablet / mobile: кнопка в четырёх состояниях, три поля в четырёх, чекбокс в двух. Поля без рамок, только нижняя линия: состояние читается по цвету лейбла и линии.
Страница построена на приёме «показать стиль самим стилем»: каждая секция — одновременно учебный материал и его демонстрация. Hero с заголовком Italiana на фоне теней листвы; «о стиле» нумерованным списком; «история» с фактурами; «палитра» крупными плашками с HEX; примеры; блок вебинара с датой и программой.
Регистрация проработана до аварийных веток: форма с тремя полями и чекбоксом, подтверждение кода с таймером, состояния для неверной почты, неверного и просроченного кода, экран успеха и 404. Ошибки решены через цвет и текст подсказки — без иконок и лишних контейнеров.
Палитра ограничена четырьмя природными цветами. Адаптив сделан как перекомпоновка, а не ужатие. У лендинга есть дневная и вечерняя версии.
Дальше — собрать страницу в коде и проверить, держит ли «воздушная» композиция реальный контент: длинные названия, другие языки, программу из десяти пунктов. И сравнить конверсию формы с тремя полями против формы с одним e-mail.
