ИНИЦИАТИВНАЯ КОНЦЕПЦИЯ РЕДИЗАЙНА
Из текстовой страницы — в атмосферу кинопремьеры
Концепт лендинга онлайн-интенсива по английскому языку, созданный как предложение автору курса.
Это инициативный проект, а не результат коммерческого заказа. Концепция была предложена автору курса, но не публиковалась на сайте школы и не проходила проверку на реальном трафике.
- Проект
- Инициативная концепция для English is my Cup of Tea
- Продукт
- Онлайн-интенсив «Titanic English»
- Цель концепции
- Показать возможное направление редизайна
- Выполнено
- Анализ открытой страницы → структура → UI-концепция → адаптивный прототип
Эмоциональный продукт со сдержанной визуальной подачей
Исходная страница была ориентирована прежде всего на подробное представление программы изучения английского через фильм «Титаник». В рамках концепции я исследовал, как усилить визуальную иерархию, передать атмосферу фильма и сделать ключевые действия заметнее, сохранив содержание и логику курса.
- 01
Сдержанная цветовая система
Исходная страница построена на тёплой коричнево-бежевой палитре. В концепции я перешёл к глубоким синим оттенкам ночного океана и золотым акцентам, чтобы сильнее связать визуальный язык страницы с образом «Титаника» и атмосферой кинопремьеры.
- 02
Информацию можно быстрее распределить по уровням
На исходной странице основная информация представлена преимущественно текстовыми блоками с близкой визуальной значимостью. В концепции я распределил содержание между заголовками, карточками, метками и короткими смысловыми блоками, а также ввёл контрастную пару шрифтов и более выраженную иерархию размеров.
- 03
Первый экран построен как информационный анонс
Заголовок, описание, даты и кнопка «Присоединиться» хорошо различимы, а постер сразу обозначает связь курса с фильмом. При этом компактная композиция прежде всего передаёт основную информацию о продукте. В концепции первый экран превращён в более атмосферную презентацию курса: изображение лайнера формирует эмоциональный фон, крупный заголовок раскрывает идею продукта, а основные условия обучения собраны в быстро считываемые элементы.
- 04
Тарифам требуется более наглядное сравнение
В исходной версии варианты участия представлены преимущественно через текст и перечисление условий. В концепции тарифы собраны в три самостоятельные карточки с одинаковой структурой, визуально разделёнными преимуществами и выделенным рекомендуемым вариантом.
Как я пересобрал структуру страницы
Анализ исходной страницы показал, как можно усилить не только визуальную подачу, но и последовательность знакомства с курсом. Я пересобрал структуру вокруг сценария «зацепить → объяснить → вовлечь», ввёл глубокую сине-золотую палитру и соединил функциональный гротеск с выразительной акцентной антиквой.
01Первый экран
Цель: Сразу раскрыть идею курса и задать его атмосферу
Было
Компактный информационный анонс с постером, описанием, датами и CTA
Стало по ТЗ
Атмосферный образ лайнера, крупный заголовок, две точки входа и ключевые параметры курса
02Как будет проходить тренинг
Цель: Наглядно показать структуру и последовательность обучения
Было
Процесс обучения был описан преимущественно текстом
Стало по ТЗ
Последовательный таймлайн с этапами, заданиями и материалами курса
03Об авторе курса
Цель: Представить ведущую как эксперта
Было
Фотография, встроенная в общий поток страницы
Стало по ТЗ
Самостоятельный раздел с портретом, цитатой и ключевыми фактами
04Программа погружения
Цель: Вовлечь в содержание курса через эпизоды
Было
Сплошной текст об истории фильма
Стало по ТЗ
Карточки эпизодов с визуальным образом, описанием и CTA
05Тарифы и условия участия
Цель: Дать быстрое сравнение вариантов
Было
Три варианта участия с подробным текстовым описанием условий
Стало по ТЗ
Три сопоставимые карточки, рекомендуемый вариант выделен цветом
06Диалог с героем фильма
Цель: Поддержать игровую механику и атмосферу курса
Было
Блока с диалогом не было
Стало по ТЗ
Концепт диалога с героем фильма, поддерживающий игровую механику курса
07FAQ и подвал
Цель: Собрать ответы на частые вопросы перед выбором тарифа
Было
Раздела с частыми вопросами не было
Стало по ТЗ
Раскрывающийся список ответов и компактный футер с контактами
Лендинг, который играет в том же жанре, что и сам курс
Глубокая палитра ночного океана, золотые акценты и выразительная типографика связывают страницу с атмосферой фильма. Содержание исходного лендинга сохранено, но распределено по более наглядным форматам: меткам, карточкам, таймлайну, тарифным планам и интерактивным блокам.
Не опубликована на сайте школы
- Первый экран с атмосферным изображением лайнера, крупным заголовком, контрастной CTA и основными параметрами курса
- Процесс обучения представлен в виде последовательного таймлайна — от начала курса до завершения программы
- Программа погружения собрана в карточки эпизодов с отдельным визуальным образом, описанием и CTA
- Три тарифа собраны в сопоставимые карточки с одинаковой структурой, а рекомендуемый вариант выделен цветом
- Информация об авторе собрана в самостоятельный раздел с фотографией, цитатой, краткой биографией и ключевыми фактами
- Частые вопросы собраны в компактный раскрывающийся список перед финальным переходом к участию
- Добавлен концепт диалога с героем фильма, поддерживающий игровую механику и атмосферу курса
Один и тот же контент, две разные страницы
Готовое направление для возможного редизайна
В рамках инициативной работы я пересобрал структуру, разработал визуальную систему и подготовил адаптивную версию страницы. Концепция показывает, как можно сохранить подробное содержание курса, но представить его через более атмосферную композицию, выраженную типографическую иерархию и быстро считываемые форматы.
Проект не запускался на реальном трафике, поэтому показатели конверсии и продаж не приводятся.