З Лєрою та школою іноземних мов Valehrerin.School ми працюємо разом давно — про це я розповідала у цьому кейсі. Але коли вона прийшла саме з цим запитом, я відчула особливий інтерес
Новий продукт — збірка авторських завдань до хітів гурту Рамштайн для вивчення німецької на рівні A2-B1.
Усе, що ми робили раніше, було ніжним, теплим і дружнім. А тут — рок. Драйв, енергетика, щось близьке до бруталізму. Мені було надзвичайно цікаво поєднати на сайті м’якість Лєри як автора з таким потужним гуртом. Тим паче, що за останній рік мій підхід до дизайну сильно змінився і дуже кортіло реалізувати ці ідеї в новому проєкті.
( Задача та мета)
Задача була стандартною за структурою, але унікальною за настроєм: зробити сайт, який не просто інформує, а заряджає. Щоб людина, гортаючи його, вже відчувала цей драйв ще до покупки
Розбір пісень у вигляді презентації pdf, надісланий Лєрою, який потрібно було додати на сайт→
Текст
У цьому проєкті я знову була і дизайнеркою, і верстальницею, і копірайтеркою
Структура у нас уже була відпрацьована, тому адаптувала її швидко. І тексти писати було несподівано легко, оскільки Лєра якраз активно розповідала в Instagram та Telegram про новий продукт. Її запал був настільки заразливим, що я виписувала фрази, які мені сподобалися, аби перенести цю щирість і на сайт.
Найскладнішим було уникнути самоповторів. На сайті сторінки для продуктів школи схожі, але мені хотілося, щоб на кожній із них учень бачив новий кут огляду і не відчував шаблонності.
Мені було дуже приємно отримати такий зворотний зв’язок
Дизайн
Дизайн у мене ніколи не починається з того, що я просто сідаю і роблю. Спочатку завжди йде етап мудборду, або, простими словами, натхнення. Цього разу джерелом були пісні гурту
(1) Мудборд
Я одягала навушники й слухала, слухала, слухала. Домашні дивилися на мене з подивом :) Німецької я не знаю, слів не розуміла, але вбирала в себе цей драйв суто емоційно. Потім переглядала кліпи, записи величезних концертів, і лише після цього йшла на Pinterest — шукати деталі, які допоможуть передати на сайті цю атмосферу вогню, диму та потужної енергії
(2) Тактильне натхнення
Потім згадала, що вдома є компакт-диск, знайшла його й почала розглядати до найдрібніших деталей. І просто в ньому розгледіла ідею для блока з тарифами
(3) Перші варіанти
Перші варіанти — це завжди творчий хаос. Безліч спроб та експериментів. Фінальне рішення народжується в мене саме так — через нескінченний пошук і перебір
(4) AI-генерація зображень
Блок із хітами хотілося зробити особливим. Тому я довго генерувала картинки в Midjourney, аж поки не вийшло те саме зображення з серцем. Не надто моторошне, але воно водночас дуже точно передавало характер хітів. Саме воно й стало основою для всіх інших зображень у блоці
(5) Фотосесія
Окрема вдячність Лєрі за фотосесії, які вона зробила за власною ініціативою спеціально для сайту. Коли я дійшла до блока про автора, вибір був просто шикарний!
Дизайн я завжди презентую голосом. Так простіше пояснити, який сенс закладено в кожне рішення. Ось як це виглядало у цьому проєкті
Переглянувши відео, Лєра написала
Фінал
Після такого відгуку крильця виросли самі собою) І з таким настроєм я пішла перетворювати дизайн на справжній сайт
Для цього я
(1)
Одразу зробила адаптив, щоб сайт однаково красиво виглядав на комп’ютері, ноутбуці, планшеті й мобілці
(2)
Потім перенесла все у Webflow — це платформа, на якій я створюю всі сайти. Найбільше часу приділила анімації блока з хітами. Хотілося, щоб його було цікаво не просто читати, а скролити й взаємодіяти, наче ти сам гортаєш треки
(3)
І останнє — налаштувала оплату та автоматичну розсилку за тією ж схемою, що й на інших сторінках школи, щоб учні могли отримати збірник миттєво
( P.S )
Мені повезло з цим проєктом — стільки всього цікавого переглянула й переслухала! Він зарядив мене не менше, ніж зарядить кожного, хто вчитиме німецьку за цими піснями
Цей сайт використовує файли cookie та сервіси веб-аналітики, щоб аналізувати зручність користування сайтом і вдосконалювати його. Ви можете прийняти їх або налаштувати під себе. Детальніше — у Політиці конфіденційності
.jpg)