Кейс | Лендінг для вивчення німецької через рок-хіти для онлайн-школи Valehrerin School

Про проєкт

З Лєрою та школою іноземних мов Valehrerin.School ми працюємо разом давно — про це я розповідала у цьому кейсі. Але коли вона прийшла із запитом саме щодо Rammstein, я відчула особливий інтерес

Lera, founder of the Valehrerin foreign language online school

Новий продукт — збірка авторських завдань до хітів гурту для вивчення німецької на рівні A2-B1.

Усе, що ми робили раніше, було ніжним, теплим і дружнім. А тут — Rammstein. Драйв, енергетика, щось близьке до бруталізму. Мені було надзвичайно цікаво поєднати на сайті м’якість Лєри як автора з таким потужним гуртом. Тим паче, що за останній рік мій підхід до дизайну сильно змінився і дуже кортіло реалізувати ці ідеї в новому проєкті.

( Задача та мета)

Задача була стандартною за структурою, але унікальною за настроєм: зробити сайт, який не просто інформує, а заряджає. Щоб людина, гортаючи його, вже відчувала цей драйв ще до покупки

Розбір пісень у вигляді презентації pdf, надісланий Лєрою, який потрібно було додати на сайт→

Текст

У цьому проєкті я знову була і дизайнеркою, і верстальницею, і копірайтеркою

Структура у нас уже була відпрацьована, тому адаптувала її швидко. І тексти писати було несподівано легко, оскільки Лєра якраз активно розповідала в Instagram та Telegram про новий продукт. Її запал був настільки заразливим, що я виписувала фрази, які мені сподобалися, аби перенести цю щирість і на сайт.

Найскладнішим було уникнути самоповторів. На сайті сторінки для продуктів школи схожі, але мені хотілося, щоб на кожній із них учень бачив новий кут огляду і не відчував шаблонності.

Мені було дуже приємно отримати такий зворотний зв’язок

Дизайн

Дизайн у мене ніколи не починається з того, що я просто сідаю і роблю. Спочатку завжди йде етап мудборду, або, простими словами, натхнення. Цього разу джерелом був сам гурт Rammstein

(1) Мудборд

Я одягала навушники й слухала, слухала, слухала. Домашні дивилися на мене з подивом :) Німецької я не знаю, слів не розуміла, але вбирала в себе цей драйв суто емоційно. Потім переглядала кліпи, записи величезних концертів, і лише після цього йшла на Pinterest — шукати деталі, які допоможуть передати на сайті цю атмосферу вогню, диму та потужної енергії

(2) Тактильне натхнення

Потім згадала, що вдома є компакт-диск, знайшла його й почала розглядати до найдрібніших деталей. І просто в ньому розгледіла ідею для блока з тарифами

(3) Перші варіанти

Перші варіанти — це завжди творчий хаос. Безліч спроб та експериментів. Фінальне рішення народжується в мене саме так — через нескінченний пошук і перебір

(4) AI-генерація зображень

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

(5) Фотосесія

Окрема вдячність Лєрі за фотосесії, які вона зробила за власною ініціативою спеціально для сайту. Коли я дійшла до блока про автора, вибір був просто шикарний!

Дизайн я завжди презентую голосом. Так простіше пояснити, який сенс закладено в кожне рішення. Ось як це виглядало у цьому проєкті

Переглянувши відео, Лєра написала

Фінал

Після такого відгуку крильця виросли самі собою) І з таким настроєм я пішла перетворювати дизайн на справжній сайт

Для цього я

(1)

Одразу зробила адаптив, щоб сайт однаково красиво виглядав на комп’ютері, ноутбуці, планшеті й мобілці

(2)

Потім перенесла все у Webflow — це платформа, на якій я створюю всі сайти. Найбільше часу приділила анімації блока з хітами. Хотілося, щоб його було цікаво не просто читати, а скролити й взаємодіяти, наче ти сам гортаєш треки

(3)

І останнє — налаштувала оплату та автоматичну розсилку за тією ж схемою, що й на інших сторінках школи, щоб учні могли отримати збірник миттєво

Responsive design of the final website version on different screen sizes

( P.S )

Мені повезло з цим проєктом — стільки всього цікавого переглянула й переслухала! Він зарядив мене не менше, ніж зарядить кожного, хто вчитиме німецьку за цими піснями

Атмосферний сайт для авторського продукту з вивчення німецької через хіти