Как мы делали новый дизайн «Яндекс Заправок»

От кислотных кругов к спокойствию и «бытовой магии»

Как мы делали новый дизайн «Яндекс Заправок»

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

Изначально в дизайне сервиса лидировали кислотные цвета, а после исследований поведения пользователей мы поменяли их на более спокойные. Дизайнер «Яндекс Заправок» Юра Кондратюк рассказывает о переходе от яркости и приоритета чёрного к философии спокойствия и комфорта. Изменения в сервисе основаны на исследованиях поведения пользователей.

Юра Кондратюк
дизайнер «Яндекс Заправок»

Задачи и смыслы

Раньше на логотипе у нас был яркий кислотный круг. Он символизировал заправку до полного бака. И вместе с остальной айдентикой словно кричал: «Будь заряженным!».

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

По ощущениям сервис стал ближе к некоторой «бытовой магии». И это повлияло на подход к айдентике.

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

Совсем далеко отходить от старой айдентики не хотелось. Поэтому главным цветом так и остался зелёный, хотя мы выбрали более спокойный оттенок. А ещё добавили в палитру голубой: этот цвет мы соотнесли с электрозарядками.

Как мы делали новый дизайн «Яндекс Заправок»

Дизайн-система и онлайн-форматы

Мы постоянно общаемся с водителями онлайн: сообщаем о скидках и акциях, рассказываем о новых услугах в лендингах, на баннерах и ещё много где.

Чтобы производить всё это быстро, мы создали дизайн-систему. Она базируется на ширине экрана 375 px, так как в большинстве случаев материалы смотрят на мобильных. Для скорости мы отказались от адаптации форматов под мониторы. На них вы увидите просто узкую версию сайта.

Плюс собрали разные компоненты. Теперь большинство форматов можно конструировать из готового.

Как мы делали новый дизайн «Яндекс Заправок»

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

Как мы делали новый дизайн «Яндекс Заправок»

Кроме 3D, в материалах часто встречаются линия и круг из логотипа. Мы помещаем их внутрь иллюстраций или используем как самостоятельный декор. Это помогает разнообразить дизайн и сделать его узнаваемым.

Как мы делали новый дизайн «Яндекс Заправок»

А что в реальном мире

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

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

Как мы делали новый дизайн «Яндекс Заправок»
Как мы делали новый дизайн «Яндекс Заправок»

Недавно протестировали айдентику на проекте парковки для электромобилей. Мы разработали отдельную зону для зарядки и сделали её в деловом квартале «Красная роза».

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

Как мы делали новый дизайн «Яндекс Заправок»

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

5555
64 комментария

Р это ж парковка.
Надо было твёрдо и чётко. Zаправки!

77
Ответить

Это дизайнерское фиаско, однозначно)

22
Ответить

На полном серьёзе думал, что статья про яндекс-парковки

17
Ответить

Za правки в конституции

7
Ответить

Всем конечно было интересно как вы такой значок придумали. Спасибо

35
Ответить

Старый лого хоть и абстрактный, но идея и образ — элементарно и просто, супер! К новому надо попривыкнуть, первая ассоциация: иконка приложения по обработке фото

22
Ответить

Я ваще не могу ее в телефоне найти, она никакая

Ответить