Кейс: Сайт для изучения немецкого через песни

О проекте

С Лерой и школой иностранных языков Valehrerin.School мы уже работаем давно вместе — об этом я рассказывала в этом кейсе. Но когда она пришла с запросом именно по Rammstein, я почувствовала особый интерес

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

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

( Задача и цель )

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

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

Текст

В этом проекте я снова была и дизайнером, и верстальщиком, и копирайтером

Структура у нас уже была отработана, поэтому адаптировала её быстро. И тексты писать было неожиданно легко, так как Лера как раз активно рассказывала в Instagram и Telegram о новом продукте. Её запал был настолько заразительным, что я выписывала понравившиеся фразы, чтобы перенести эту искренность и на сайт.

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

Мне было очень приятно получить такую обратную связь

Дизайн

Дизайн у меня никогда не начинается с того, что я просто сажусь и делаю. Сначала всегда идёт этап мудборда, или, простыми словами, вдохновения. В этот раз источником была сама группа Rammstein

(1) Мудборд

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

(2) Тактильное вдохновение

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

(3) Первые наброски

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

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

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

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

Отдельная благодарность Лере за фотосессии, которые она сделала по своей инициативе специально для сайта. Когда дошла до блока об авторе, выбор был просто шикарный

Награды

Дизайн я всегда презентую голосом. Так проще объяснить, какой смысл заложен в каждое решение. Вот как это выглядело в этом проекте

Просмотрев видео, Лера написала

Финал

После такого отзыва крылышки выросли сами собой) И с таким настроением я пошла превращать дизайн в работающий сайт

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

Потом перенесла всё в Webflow — это платформа, на которой я создаю все сайты. Больше всего времени провела над анимацией блока с хитами. Хотелось, чтобы его было интересно не просто читать, а скроллить и взаимодействовать, как будто ты сам перелистываешь треки

И последнее — настроила оплату и автоматическую рассылку по той же схеме, что и на других страничках школы, чтобы ученики могли получить сборник мгновенно

( P.S )

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