Как мы запустили промо-сайт Яндекс.Станции и заодно придумали ей визуальный стиль | Дизайн в Яндексе | Яндекс Дзен
434 subscribers

Как мы запустили промо-сайт Яндекс.Станции и заодно придумали ей визуальный стиль

693 full reads
1,1k story viewsUnique page visitors
693 read the story to the endThat's 61% of the total page views
4,5 minutes — average reading time

Автор: Иван Оленкевич

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

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

Как мы запустили промо-сайт Яндекс.Станции и заодно придумали ей визуальный стиль

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

Пробуем игру с глубиной резкости
Пробуем игру с глубиной резкости
Пробуем игру с глубиной резкости
Или делаем так, чтобы всё крутилось вокруг колонки
Или делаем так, чтобы всё крутилось вокруг колонки
Или делаем так, чтобы всё крутилось вокруг колонки

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

Как мы запустили промо-сайт Яндекс.Станции и заодно придумали ей визуальный стиль

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

Как мы запустили промо-сайт Яндекс.Станции и заодно придумали ей визуальный стиль
Как мы запустили промо-сайт Яндекс.Станции и заодно придумали ей визуальный стиль

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

Как мы запустили промо-сайт Яндекс.Станции и заодно придумали ей визуальный стиль

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

Как мы запустили промо-сайт Яндекс.Станции и заодно придумали ей визуальный стиль

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

Как мы запустили промо-сайт Яндекс.Станции и заодно придумали ей визуальный стиль

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

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

Как мы запустили промо-сайт Яндекс.Станции и заодно придумали ей визуальный стиль

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

Как мы запустили промо-сайт Яндекс.Станции и заодно придумали ей визуальный стиль

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

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

Как мы запустили промо-сайт Яндекс.Станции и заодно придумали ей визуальный стиль

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

Как мы запустили промо-сайт Яндекс.Станции и заодно придумали ей визуальный стиль

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

Как мы запустили промо-сайт Яндекс.Станции и заодно придумали ей визуальный стиль

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

Как мы запустили промо-сайт Яндекс.Станции и заодно придумали ей визуальный стиль

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

Как мы запустили промо-сайт Яндекс.Станции и заодно придумали ей визуальный стиль

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

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

Промо-сайт: station.yandex.ru

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