Лендинг для онлайн-школы по изучению немецкого через фильмы

Про проект

Ко мне обратилась Лера — основательница онлайн-школы иностранных языков Valehrerin.School. Лера невероятно креативный человек, её главный подход: «Изучение языка может быть захватывающим»

Она постоянно придумывает что-то новое для своих студентов, чтобы изучение языка превращалось в удовольствие. Один из её любимых форматов — изучение языков через разборы фильмов с авторскими заданиями.

На тот момент сайт школы, который мы вместе делали, уже успешно работал около года, и на нем были отдельные страницы для разных продуктов (гайды, разборы фильмов, песен). Для этого разбора фильма «Letzte Weihnacht» так же нужно было создать отдельную страничку сайта.

( Задача )

Показать нас такими, какие мы есть, чтобы к нам приходили именно те люди, которым нравится наш подход и которые будут себя чувствовать с нами комфортно

( Цель )

Сайт должен быть информативным,
располагающим, дружелюбным с простым изложением информации, чтобы у клиента возникла фраза «ХОЧУ»

Разбор фильма в виде презентации pdf, присланный Лерой, который нужно было добавить на сайт →

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

Так же нужно было полностью автоматизировать продажи, чтобы Лера могла заниматься любимым делом, а система сама принимала оплаты и мгновенно отправляла материалы на почту после покупки.

Подготовка

Весь проект я вела самостоятельно: от идеи и аналитики до финальной вёрстки и настройки автоматизации. Но обо всем по порядку)

Этапы работы над проектом:
→ Бриф
→ Анализ
→ Текст
→ Дизайн
→ Верстка

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

Анализ аудитории и конкурентов у меня уже тоже был — глобальный, по всему проекту, мы его делали раньше. Поэтому здесь этот этап был в сжатой форме.

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

И теперь можно было переходить к самому интересному)

Текст

Тексты для сайта были одной из самых ответственных задач. Мне было очень важно передать уникальный стиль и манеру общения Леры: её искренность, энергию и ту самую любовь к изучению языков

Для этого я

(1)

Просматривала Instagram и Telegram-каналы Леры, выписывала любимые словечки, интонации и то, как она общается со своими учениками

(2)

Использовала GPT как ассистента. Я «скармливала» ей транскрибации Леры, чтобы ИИ научился подражать её стилю. Мы генерировали десятки вариантов

(3)

Из огромного массива сгенерированного текста я вручную собирала финальный текстовый пазлик

(4)

В итоге тексты получились очень искренними. И я и Лера были довольны, можно было переходить к следующему этапу

Мудборд

Работа началась с глубокого погружения. Чтобы поймать то самое настроение, я пересмотрела фильм и сделала десятки скриншотов. Я искала «зацепки», которые можно перенести в дизайн

В какой-то момент я поняла: Лондон в этом фильме — отдельный персонаж. Его старинные улочки, вывески кафе и рождественские огни продиктовали всю концепцию. Главной идеей стало использование линейных узоров для фона — таких же легких и ажурных, как кованые элементы на мостах или витринах рождественского Лондона.

Дизайн

Фильм «Letzte Weihnacht» очень добрый, нежный и волшебный. Мне хотелось передать эту рождественскую магию, тепло и уют через дизайн сайта. Поэтому, вдохновившись на этапе мудборда, использовала такие приёмы

(1) Первый экран

Падающий снег на главном экране: то, что мгновенно создает зимнее настроение и ассоциацию с праздником

(2) Цвет

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

(3) Фон

Чтобы структура не выглядела монотонно, я разделила блоки по настроению. Там, где мы говорим о самом фильме, фон становится глубоким и темным, создавая эффект кинозала. А когда переходим к разделу об авторе — всё становится светлым и «воздушным», подчеркивая открытость и экспертность Леры

(4) Рукописный шрифт

Чтобы добавить текстам жизни, я использовала вкрапления рукописного шрифта для создания ощущения личного письма или заметки на полях учебника

(5) Анимация

за мышкой тянется мягкий сказочный шлейф, похожий на искры бенгальского огня

Заголовки появляются плавно, словно проступая сквозь морозное стекло

добавила буллитам очень нюансное свечение, напоминающее мерцание далеких звезд

После презентации дизайна получила такой приятный отзыв)

Автоматизация

Фінал

Финальным техническим штрихом была настройка оплаты и автоматической рассылки

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

Награды

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

Guru of the DAY

(Web Guru Awards)

(Top Design King)

King Of The Day

Site of The Day

(BEST CSS)

( P.S )

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