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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0
14 комментариев
Написать комментарий...
Dmitriy Kislyakov

Мелочь, но все же. Иконки бы поменять местами

Ответить
Развернуть ветку
S.Z

На сайте все норм. А до рабочего макета доёбываться, такое себе

Ответить
Развернуть ветку
Dmitriy Kislyakov

Я писал про десктопную версию )

Ответить
Развернуть ветку
Dmitriy Kislyakov

А, все. Там уже поправили

Ответить
Развернуть ветку
Stepan Vakhtin

Слово «промосайт» с третьего раза правильно прочитал 😆

Ответить
Развернуть ветку
Nikolay Kenig

А как же исходное устройство Алисы
Миелофон

Ответить
Развернуть ветку
Dmitry Gurkov

Средний возраст сотрудника Яндекса не позволяет им мыслить так далеко)

Ответить
Развернуть ветку
S.Z

И это хорошо

Ответить
Развернуть ветку
Иван Максимов

Че-т я не понял.
Почему на фото с предметами, призванном показать масштаб устройства 2 колонки поменьше и 1 большая?

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
S.Z

Ну класс, че

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Dmitry Gurkov

Надо было счастливых людей в интерьерах

Ответить
Развернуть ветку
Dmitry Gurkov

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

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

Ответить
Развернуть ветку
AtlasOkon

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Читать все 14 комментариев
null