Кейс: Сайт для вивчення німецької через пісні

Про проєкт

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

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

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

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

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

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

Текст

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

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

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

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

Дизайн

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

(1) Мудборд

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

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

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

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

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

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

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

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

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

Награды

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

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

Фінал

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

Для цього я

(1)

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

(2)

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

(3)

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

( P.S )

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