Запуск промосайта «Яндекс.Станции»: уйти от шаблонности и заодно придумать визуальный стиль

Арт-директор «Яндекса» Иван Оленкевич — о процессе работы над дизайном сайта для «умной» колонки.

Материал из его личного блога.

В России до недавнего времени вообще не было категории «умных» помощников, если не брать привозные англоязычные Google Home и Amazon Echo. И поэтому мы хотели придумать для «Станции» запоминающийся визуальный образ, чтобы, во-первых, пользователи быстро поняли ценность нашей колонки, а во-вторых, чтобы заранее отстроиться от будущих конкурентов.

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

Начинаем думать над концепцией промосайта. Что, если показать типовые сценарии «Станции», не показывая её целиком? Как бы от лица колонки. Проверяем быстрыми видеопрототипами.

Всё не то, получаются те же счастливые люди в интерьерах. Приходит идея, что «Яндекс.Станция» настолько умная, что может рассказать и продать саму себя. Такую выходку может позволить себе только «Алиса».

Думаем, как добавить эмоций и красок. Узнаём, что «Станции» будут в разных исполнениях кожуха, поэтому пробуем рисовать прямо поверх них.

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

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

Вроде теперь всё сложилось, и у нас получился гибкий, геометричный и узнаваемый образ «Станции», будь то фотография колонки, партнёрский контент или рендеры внутренностей. И этот ракурс мы будем использовать на протяжении всей коммуникации с пользователем. Кстати, стоит этот путь нарисовать.

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

Быстро примеряем образы на упаковку, инструкцию и приложение.

Нужно зафиксировать несколько сущностей. Например, как изображать то, что «Алиса» произносит из «Станции»? Пробуем плоские баблы, объёмные баблы в воздухе и просто прямую речь через тире. Будет странно, если на промосайте и в телевизоре «Алиса» будет говорить по-разному.

Решаем, что баблы будут использоваться только в виде чата с «Алисой», а для визуализации вербальной коммуникации используем диалог через длинное тире.

Возвращаемся к сайту, думаем над компоновкой и навигацией.

Решаем разделить сайт целиком напополам. При прокручивании справа меняется информация, а слева визуализируются функции.

Мы уже отказались от фотографий в интерьерах, но в пустом окружении сложно понять масштабы. Приходит идея собирать композиции из «Станции» и предметов.

Подбираем предметы и проводим фотосессию.

Выстраиваем навигацию по вертикали. На первом экране показываем загадочное проявление «Станции» из темноты. Делаем отдельную упрощённую мобильную версию.

Доделываем макеты и передаём в разработку. Тем временем собираем версию для «Маркета» и «Беру».

Дальше дорабатываем мелочи, правим вёрстку, редактируем фотографии, запускаемся и уже делаем вторую версию сайта.

Команда дизайна «Яндекса»: арт-директор Илья Михайлов, дизайнер Иван Оленкевич, фотограф и техдизайнер Аня Пономарёва, менеджеры Лена Кириллова, Денис Новиков и Кристина Домино.

#дизайн