(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(96339378, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(96339378, 'hit', window.location.href);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0
63 комментария
Написать комментарий...
Moonshine

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

Ответить
Развернуть ветку
Алексей Морозов

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

Ответить
Развернуть ветку
3 комментария
Филипп Гаврилов

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

Ответить
Развернуть ветку
1 комментарий
Евгений В.

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

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

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

Ответить
Развернуть ветку
Данил Аксенов

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

Ответить
Развернуть ветку
Николай Коллайдер

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

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

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

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

Р - Россия

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

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

Ответить
Развернуть ветку
1 комментарий
Азамат office-health.app

Это же айдентика банка Бланк! В черный покрасить и готово )
Да, @Бланк ? Анимации прямо как у вас на сайте

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

Получается, что ребята заправились нашей айдентикой 🤷🏻‍♂️
А мы заправляем тебя промокодом «УГАДАЛ» на 3 месяца бесплатного обслуживания на базовой подписке. Открывай счёт и вводи промокод после регистрации: https://blanc.ru/

Ответить
Развернуть ветку
1 комментарий
Антон Т

Яндекс.Кишечник

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

Нисколько не напоминает новый лого ДелиМобиля.

Ответить
Развернуть ветку
Артём Прокопенко

Зашел написал этот комментарий

Ответить
Развернуть ветку
Пуганный Аноним

Вы, наверное, тыщу человеко-часов потратили, чтобы придумать как же появился этот гениальный логотип.

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

ну этот логотип, как мне кажется, выглядит на много круче

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

Молния разве голубая должна быть?

Ответить
Развернуть ветку
Андрей Землянский

Считаю самыми крутымы и легендарными два логототипа янденса: собственно фирменная буква Я из оригинального логотипа и конечно же Яндекс Такси, ныне Go

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

Ну прям чисто скопипастино с ретача....

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

После чтения таких статей все чаще задумываюсь, что начиная с какого-то этапа развития компании основной целью иконок (а особенно смены этих иконок) является самовыражение автора, а не какая-то практическая цель.

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

Шучу, я не читал статью.

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

Скорее когда приходит очередная волна "ребрендинга". И это касается не только иконок, но и всего дизайна в целом.

Ответить
Развернуть ветку
Пуганный Аноним

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

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

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

Нужно всех научить делать кофе!

Ответить
Развернуть ветку
1 комментарий
Sergey Sergeychik

тут же явно напрашивается Zaправки!
а Vолож куда смотрел ?

Ответить
Развернуть ветку
Наталья Царенко

Мне очень нравится! Как раз недавно изучала вопрос дизайна и идей второго ряда ассоциаций, думаю это само то!

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

Предыдущий заход был явно смелее, сейчас независимо от заложенных смыслов остаётся фактом то, что получилась дефолтная иконка с буквой Р, коих тысячи.

Ответить
Развернуть ветку
Король Аськи

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

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

кого то отправляют ягоды собирать, кого то логотипы переделывать

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

Этот значок рисовал человек, знающий о приближающемся росте цен. Его послание такое - завяжи шланг на узел и не катайся на романтические поездки, сбереги бюджет.

Ответить
Развернуть ветку
Николай Коллайдер

Да!

Ответить
Развернуть ветку
Забор Ноги

очень похоже на

Ответить
Развернуть ветку
Российский Крым

Вы это серьёзно? Обсуждаем какую то закорючку?

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

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

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

Отдельно я хочу сказать следующее про скрин с ценой и литрами. Я по первости водил по это типа полоске рукой - пытаясь как бы заполнить ее, не понимая, что в полоске реальное количество заправленного бензина. Мне казалось, что мне не дают эту полоску быстро довести до конца. Т.е. я затупил и понял что туплю, только потом, когда заправился.
Ну и еще - куда ни приеду, везде яндекс-заправки не работают. Отговорки такие - "интернета нет", или "у них там чото", заправился раз 3-5, было очень удобно, после этого сталкиваюсь с отговорками

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

+, скрин с литрами похож на функции яркости и звука на айфоне, поэтому и нажимают и водят по ним

Ответить
Развернуть ветку
Николай Коллайдер

Наличку давай!!! Яндекса нет, терминала тоже!

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

Кажется это перевернутый логотип Beats.

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

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

Ответить
Развернуть ветку
Николай Коллайдер

И шланг так физичесски не скручивается

Ответить
Развернуть ветку
Ольга Исаева

Ну красиво же

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

Цвет приятный, а вот буква P на иконке к чему? Могли же шланг не закручивать в букву

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

А кто первый придумывал?) Сколько не эффективно на него денег было потрачено?

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

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

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

вы лучше расскажите, зачем поменяли иконку кинопоиска...

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

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

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

Лучше бы фильтры нормальные сделали, а не логотип перерисовывали

Ответить
Развернуть ветку
Ефимова Мария

Большую работу проделали

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

Новое лого - говно.
А приложение отличное.

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

Главное не в логотипе. Главное - это надежность и простота сервиса. А судя по отзывам здесь, с надежностью все обстоит плачевно.

Ответить
Развернуть ветку
Хуршед Нурматов

Я раз в неделю пользуюсь приложением Яндекс.Заправок уже года два. Даже делал обзор сервиса на Ютубе. И раньше очень быстро находил ядовито зеленую яркую иконку. Это критически важно, когда сзади тебя скопилась очередь из желающих заправиться. Стоять и тупить - не очень приятно.

После обновления логотипа до сих пор тяжело найти иконку. Она стала какой-то типовой и теряется. Плюс, как правильно заметили, при чем здесь буква Р? А объяснение дизайнера на видео - натягивание совы на глобус.

Дизайнер, ты проверял на фокус группе водителей как они воспринимают логотип?

Ответить
Развернуть ветку
Николай Коллайдер

От кислотных кругов до фена для волос

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

От кислотных кругов до фена(Амфетамин)

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

у меня первая мысль была "уй с винтом", с заправочным пистолетом ассоциации даже не возникло пока не сказали

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

Жаль не у всех заправок можно привязать бонусную карту. Поэтому приходится топать на кассу чтобы её показать

Ответить
Развернуть ветку
60 комментариев
Раскрывать всегда