Проектирование
Дизайн
Webflow

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

О проекте

С Лерой и школой иностранных языков 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 )
Мне повезло с этим проектом — столько всего интересного пересмотрела и переслушала. Он зарядил меня не меньше, чем зарядит каждого, кто будет учить немецкий по этим песням
Следующий кейс Многостраничный сайт для онлайн-школы
certificate