Луна, миф о свете и юбилей студии: 5 сайтов для вдохновения

Кажется, что промосайт должен просто рассказать о продукте. Но лучшие проекты делают совсем другое: сначала заставляют что-то почувствовать, а уже потом начинают объяснять. Видео на весь экран, необычная навигация, живая съёмка, выразительная типографика и логика скролла здесь работают на одну цель — увлечь пользователя настолько, чтобы он захотел дойти до самого конца. Собрали пять сайтов, которые интересно изучать не только с точки зрения красивой графики, но и ради дизайнерских решений.

В статье расскажем:

• как архив NASA превратили в путешествие на Луну;
• почему корпоративный сайт оказался мрачной японской сказкой;
• как рассказать историю компании без портфолио и таймлайна;
• почему промо приложения выглядит как трейлер фильма;
• как сделать промышленную платформу похожей на кино.

21 Hours on the Moon

Проект студии 28K — 21hrs.space — воссоздаёт 21 час, который экипаж «Аполлона-11» провёл на Луне, используя архивные фотографии и записи NASA.

Сайт устроен как путешествие во времени. Пользователь может проследить хронологию экспедиции, исследовать интерактивную карту места посадки, услышать реальные переговоры с Центром управления полетами и даже сейсмические записи Луны. Всё это объединяют трехмерные сцены и звуковой дизайн, благодаря которым история ощущается почти документальной.

Это не рекламный лендинг, а интерактивный музей, посвящённый одному историческому событию. Здесь образовательный контент раскрывается с помощью технологий, которые чаще ассоциируются с современными играми: WebGL, трёхмерной графикой и продуманным саунд-дизайном.

Ivress — Spin a Tale

Вместо привычного корпоративного сайта японская компания Ivress создала brand.ivress.co.jp — мрачную фэнтезийную притчу о безымянном герое, который встречает странника, получает от него свет и постепенно сам становится тем, кто ведёт за собой других.

История разделена на девять глав — Prologue, Encounter, Power, Oath, Bond, Trial, Expansion, Spiral и Ivress — и раскрывается по мере скролла и взаимодействия с сайтом. Где-то нужно удерживать палец, где-то кликать, чтобы буквально «разогнать тьму». Стоит начать скроллить — изображение расплывается, останавливаешься — снова становится чётким. От этого простого эффекта неожиданно сложно оторваться.

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

Читайте также:

Где дизайнерам искать вдохновение: подборка советов

Ten Years Away

К своему десятилетию студия Studio375 не стала обновлять портфолио, а выпустила ten.375.studio — интерактивный комикс из десяти глав, по одной на каждый год своей истории.

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

Технически сайт устроен как горизонтальный скролл-комикс. Камера плавно скользит вдоль панелей, сцены собраны в WebGL, а во время прокрутки поверх изображения появляются точки Бен-Дея (Ben-Day dots) — классический полиграфический приём, который с XIX века использовали в печати комиксов для создания теней, градиентов и новых оттенков. Кажется, будто листаешь не сайт, а оживший графический роман.

Но самое интересное — с чего всё началось. До цифровой версии комикс существовал на бумаге. Это редкий случай, когда сначала придумали историю, а уже потом искали для неё подходящую цифровую форму. Авторы сайта и сами говорят, что обычное портфолио показывает проекты студии, а юбилей — людей, которые всё это создали. Поэтому Ten Years Away получился скорее семейным альбомом, чем очередной страницей с кейсами.

Elva

Промостраницу мобильного приложения для видеомонтажа с ИИ elvalabs.ai студия Lazarev сразу снабдила предупреждением: для полного эффекта сайт лучше открывать с десктопа.

Дальше становится понятно почему. Вместо привычной презентации функций сайт разворачивается как короткометражный фильм. Всё начинается с загрузочной анимации, а затем историю ведут не сухие описания возможностей, а поэтичные фразы вроде «то, как это ощущалось, пока не исчезло» вперемешку с реальными пользовательскими видео.

Монтаж, музыка, субтитры и работа с голосом здесь объясняются не списком функций, а через ощущения, которые они помогают сохранить. В какой-то момент ловишь себя на мысли, что смотришь не промо приложения, а трейлер фильма, где сам продукт появляется лишь в финальных титрах.

Читайте также:

5 motion-роликов для вдохновения

Wembi

Итальянская платформа для цифровых двойников промышленного оборудования wembi.ai выбрала для сложной технической темы неожиданно кинематографичную подачу.

Вместо привычного меню пользователя встречает оглавление фильма. Разделы пронумерованы — n.001 WHAT, n.002 HOW, n.003 WHY — и открываются один за другим. Каждый сопровождают собственное видео и степпер, который шаг за шагом показывает, как физическое устройство превращается в управляемую цифровую копию. Обычно такие процессы объясняют схемами и диаграммами, а здесь получился почти небольшой научно-фантастический сюжет.

Все пять проектов объединяет внимание к первому впечатлению. Они не спешат рассказывать о продукте и не начинают с длинного списка преимуществ. Вместо этого сначала появляется эмоция — удивление, любопытство, желание исследовать страницу дальше. И только потом — информация.

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