Сайт как логическое продолжение концепции
Кейс, в котором веб усиливает продукт
OF LARGE MACHINERY
Сайт полностью концептуальный — полёт моей дизайнерской фантазии. Но речь здесь не про «красиво». Речь про логику, драматургию и то, как визуальный язык может усиливать идею продукта.
Представим, что у нас есть музыкальный исполнитель Х и грядущая пластинка со своей внутренней историей и настроением.
Представим, что у нас есть музыкальный исполнитель Х и грядущая пластинка со своей внутренней историей и настроением.
Сделать сайт частью концепции продукта: выстроить структуру как мини-историю и использовать анимацию как визуальные метафоры, которые развивают идею альбома и, конечно, продают.
О проекте
Задача
Far Side of the Moon (обратная сторона луны) — пластинка, раскрывающая потаенные и накопленные мысли исполнителя Х. Они, как и обратная сторона луны, всегда были скрытым.
Трек-лист альбома начинается и заканчивается разговорными интро и аутро мифа об Икаре. Том самом, который подлетел слишком близко к солнцу. Что было дальше — известно. Но по легенде исполнителя Х, он не разбился, починил свои крылья и снова взлетел. Только в этот раз — не к палящему солнцу, а к холодной луне.
Так, в основу дизайна мы закладываем сразу…
Трек-лист альбома начинается и заканчивается разговорными интро и аутро мифа об Икаре. Том самом, который подлетел слишком близко к солнцу. Что было дальше — известно. Но по легенде исполнителя Х, он не разбился, починил свои крылья и снова взлетел. Только в этот раз — не к палящему солнцу, а к холодной луне.
Так, в основу дизайна мы закладываем сразу…
Отсюда — вся эстетика: движение не вверх, а внутрь.
Не к свету, а в тёмный маршрут скролла.
Не к свету, а в тёмный маршрут скролла.
Много букв, зато важно и интересно!
- Космос и Луна
- Миф о падении Икара
немного
Смыслах и мифах
о продукте,
две метафоры
Да-да, от руки.
Сначала продумываем структуру, дизайним потом.
Сначала продумываем структуру, дизайним потом.
far side of the moon
От задумки до реализации
и снова к сайту
A b c d e f g h
Вдохновляемся космотехникой,
немного фильмом «Интерстеллар»))
Продумываем UI.
Цвет — черный, как космос;
Шрифт — минималистичный INTER;
Кнопки — скругленные и подсвечивающиеся, как приборная панель;
Много воздуха.
немного фильмом «Интерстеллар»))
Продумываем UI.
Цвет — черный, как космос;
Шрифт — минималистичный INTER;
Кнопки — скругленные и подсвечивающиеся, как приборная панель;
Много воздуха.
UI
прототип
На его создание ушел приличный пласт времени. Идей было много. Генераций тоже.
ИИ — это не щелчок пальцев. На генерации порой уходят дни.
ИИ — это не щелчок пальцев. На генерации порой уходят дни.
Визуал
Структура
и метафоры
и метафоры
Главный экран логично начать с луны, которая, как и альбом, раскрывает свою скрытую сторону. Плавная, медленная анимация вращения задаёт настроение всего проекта.
Меню стилезованное под приборную панель космического модуля: мягкое свечение, инерционность, небольшая задержка отклика.
Все эти элементы создают эффект подготовки к «старту» — ощущение, что пользователь не просто заходит на сайт, а включает бортовую систему и запускает путешествие.
Hero
Детали начинаются уже с прелоудера: над отсчётом процентов появляется маленькая надпись «пуск через…».
intro
С луны мы, как и Икар, «падаем» вниз — вглубь космической темноты и смыслов. Делаем это вместе с , напротив, взлетающей вверх героиней — анимацией по скроллу.
Сайт открывает текст-интро легенды альбома.
Все тексты небольшие, парящие в пространстве.
Их читабельность не важна. Акцент — на эмоциональном визуале, а текст — небольшие загадки, шифры.
Сайт открывает текст-интро легенды альбома.
Все тексты небольшие, парящие в пространстве.
Их читабельность не важна. Акцент — на эмоциональном визуале, а текст — небольшие загадки, шифры.
about
Личное послание и лицо исполнителя появляются, как и обратная сторона луны, из мрака, а текст печатается как стенограмма — создаётся ощущение связи издалека, «с дальней стороны Луны».
Коммерция
- Четыре карточки товара выполнены с блуждающей подсветкой — если провести курсором, можно осветить их, словно фонариком.
- А кнопки, появляющиеся по дуге — прямая отсылка к полумесяцу или лунным фазам.
footer
Было решено отказаться от скучного чёрного подвала и превратить его в анимированную часть сюжета — «Икар взлетает — Икар падает».
От падающих перьев — к героине среди обломков её крыльев. Лёгкий ветер шевелит волосы и перья, создавая ощущение тишины и легкой грусти.
Блок завершается текстом — концом сказки и аккуратным, минимальным меню в стиле приборной панели.
От падающих перьев — к героине среди обломков её крыльев. Лёгкий ветер шевелит волосы и перья, создавая ощущение тишины и легкой грусти.
Блок завершается текстом — концом сказки и аккуратным, минимальным меню в стиле приборной панели.
404
Детали не обошли стороной даже страницу ошибки.
Тот же эффект появления из мрака и надпись: «тут слишком темно, вернитесь назад».
Тот же эффект появления из мрака и надпись: «тут слишком темно, вернитесь назад».
Получился сайт, который не просто «описывает» продукт, а продолжает его концепцию. Он не только работает как коммерческий инструмент,
но ещё живёт и как история: от прелоудера до последнего пера.
Это не сайт о музыке.
Это продолжение музыкального произведения в цифровой форме.
Он рассказывает, живет, дышит и разговаривает с пользователем.
но ещё живёт и как история: от прелоудера до последнего пера.
Это не сайт о музыке.
Это продолжение музыкального произведения в цифровой форме.
Он рассказывает, живет, дышит и разговаривает с пользователем.
Что в итоге получилось
И помните: продают
не красивые картинки,
а идеи. Хорошие идеи.
не красивые картинки,
а идеи. Хорошие идеи.
От задумки до реализации
