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

Ivan Olenkevich
Jul 18, 2018 · 4 min read

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подписывайтесь на телеграм-канал Дизайна в Яндексе
t.me/yandexdesign

Yandex Design

Дизайнеры Яндекса о дизайне в Яндексе

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store