Как мы делали новый дизайн «Яндекс Заправок»
От кислотных кругов к спокойствию и «бытовой магии»
«Яндекс Заправки» сейчас — это сервис, который помогает водителям во всём, что связано с заправкой автомобиля. В Заправках можно оплатить топливо, сравнить цены, подключить программы лояльности сетей АЗС, заказать еду и оставить чаевые. Всё это, не выходя из машины.
Изначально в дизайне сервиса лидировали кислотные цвета, а после исследований поведения пользователей мы поменяли их на более спокойные. Дизайнер «Яндекс Заправок» Юра Кондратюк рассказывает о переходе от яркости и приоритета чёрного к философии спокойствия и комфорта. Изменения в сервисе основаны на исследованиях поведения пользователей.
Задачи и смыслы
Раньше на логотипе у нас был яркий кислотный круг. Он символизировал заправку до полного бака. И вместе с остальной айдентикой словно кричал: «Будь заряженным!».
Но сервис рос и продолжает расти. С конца 2018 года цели и задачи изменились. Например, к традиционным заправкам на нашей карте добавились электрозарядки. А ещё мы снова провели большое исследование аудитории и поняли, что люди привыкли к нам. И теперь для них «Яндекс Заправки» не какое-то чудо, а возможность технологично полениться, максимально переложив рутину на алгоритмы.
По ощущениям сервис стал ближе к некоторой «бытовой магии». И это повлияло на подход к айдентике.
Появился новый знак, который объединил образы заправочного пистолета и адаптера электрозарядки. Он скручивается в петлю аналогично тому, как сервис строится вокруг пользователя. А ещё это «бесшовность» заправки, когда для оплаты топлива не нужно выходить из машины, прерывая тем самым свою поездку. Вот такая «бытовая магия».
Совсем далеко отходить от старой айдентики не хотелось. Поэтому главным цветом так и остался зелёный, хотя мы выбрали более спокойный оттенок. А ещё добавили в палитру голубой: этот цвет мы соотнесли с электрозарядками.
Дизайн-система и онлайн-форматы
Мы постоянно общаемся с водителями онлайн: сообщаем о скидках и акциях, рассказываем о новых услугах в лендингах, на баннерах и ещё много где.
Чтобы производить всё это быстро, мы создали дизайн-систему. Она базируется на ширине экрана 375 px, так как в большинстве случаев материалы смотрят на мобильных. Для скорости мы отказались от адаптации форматов под мониторы. На них вы увидите просто узкую версию сайта.
Плюс собрали разные компоненты. Теперь большинство форматов можно конструировать из готового.
В коммуникации активно используем 3D-объекты. Чтобы они не перегружали дизайн и быстро считывались водителями, мы убрали лишние детали и запретили себе слишком сложные метафоры. Все образы у нас суперпонятные и однозначные.
Кроме 3D, в материалах часто встречаются линия и круг из логотипа. Мы помещаем их внутрь иллюстраций или используем как самостоятельный декор. Это помогает разнообразить дизайн и сделать его узнаваемым.
А что в реальном мире
Помимо интернета, наш дизайн часто контактирует с водителями в офлайн-среде — на заправках, мойках и в других автомобильных местах.
Поэтому так важно, чтобы все элементы айдентики хорошо смотрелись в печатных материалах. Мы отдельно адаптировали цвета основной палитры под печать и отказались от градиентов. Лого тоже немного изменили, сделав цельной формой.
Недавно протестировали айдентику на проекте парковки для электромобилей. Мы разработали отдельную зону для зарядки и сделали её в деловом квартале «Красная роза».
С помощью новой айдентики получилось создать комфортное место на обычной подземной парковке. Мы сделали тёмный фон и графикой соединили парковочные места и зарядные станции. Светильники поддержали концепцию. Они тоже выполнены в форме линий и кругов, а мягкий свет подчёркивает комфортность места и приглашает водителей оставлять там свои автомобили.
Мы продолжаем расти и, хотя уже много всего сделали, планируем сделать гораздо больше. Оставайтесь на связи.
Р это ж парковка.
Надо было твёрдо и чётко. Zаправки!
Это дизайнерское фиаско, однозначно)
На полном серьёзе думал, что статья про яндекс-парковки
Za правки в конституции
Всем конечно было интересно как вы такой значок придумали. Спасибо
Старый лого хоть и абстрактный, но идея и образ — элементарно и просто, супер! К новому надо попривыкнуть, первая ассоциация: иконка приложения по обработке фото
Я ваще не могу ее в телефоне найти, она никакая
Комментарий недоступен
Р - Россия
Комментарий недоступен
Это же айдентика банка Бланк! В черный покрасить и готово )
Да, @Бланк ? Анимации прямо как у вас на сайте
Получается, что ребята заправились нашей айдентикой 🤷🏻♂️
А мы заправляем тебя промокодом «УГАДАЛ» на 3 месяца бесплатного обслуживания на базовой подписке. Открывай счёт и вводи промокод после регистрации: https://blanc.ru/
Яндекс.Кишечник
Нисколько не напоминает новый лого ДелиМобиля.
Зашел написал этот комментарий
Вы, наверное, тыщу человеко-часов потратили, чтобы придумать как же появился этот гениальный логотип.
ну этот логотип, как мне кажется, выглядит на много круче
Молния разве голубая должна быть?
Считаю самыми крутымы и легендарными два логототипа янденса: собственно фирменная буква Я из оригинального логотипа и конечно же Яндекс Такси, ныне Go
Ну прям чисто скопипастино с ретача....
После чтения таких статей все чаще задумываюсь, что начиная с какого-то этапа развития компании основной целью иконок (а особенно смены этих иконок) является самовыражение автора, а не какая-то практическая цель.
Но в этот раз, наверное, это к лучшему, потому что, зайдя на главную страницу яндекса, я офигел в какую режущую глаз неразличимую мешанину превратились иконки сервисов. Прямо как у гугла. Только у них как-то порадостнее выглядит.
Шучу, я не читал статью.
Скорее когда приходит очередная волна "ребрендинга". И это касается не только иконок, но и всего дизайна в целом.
Проблема яндекс.заправок в том, что на заправках роснефти, с которыми работает яндекс, какой-то невероятно уебанско-блевотный кофе. Их кофе настолько ужасен, что я лучше буду отсасывать через шланг у попутки на трассе, чем заеду к ним. А с газпромом или лукойлом яндекс не работает.
Такой парадокс, чтобы больше людей пользовались яндекс заправками - нужно научить роснефть делать кофе.
Нужно всех научить делать кофе!
тут же явно напрашивается Zaправки!
а Vолож куда смотрел ?
Мне очень нравится! Как раз недавно изучала вопрос дизайна и идей второго ряда ассоциаций, думаю это само то!
Предыдущий заход был явно смелее, сейчас независимо от заложенных смыслов остаётся фактом то, что получилась дефолтная иконка с буквой Р, коих тысячи.
Живу в 80 метрах от заправки. Когда дома открываю приложение яндекс навигатор - оно три раза предлагает заправится. Вот так настойчиво, закрываешь это предложение - оно снова и снова выходит поверх всего экрана, неважно что делаешь в приложении в этот момент. Писал в отзывы приложения - ответили, что ничего не могут с этим сделать
кого то отправляют ягоды собирать, кого то логотипы переделывать
Этот значок рисовал человек, знающий о приближающемся росте цен. Его послание такое - завяжи шланг на узел и не катайся на романтические поездки, сбереги бюджет.
Да!
очень похоже на
Вы это серьёзно? Обсуждаем какую то закорючку?
Комментарий недоступен
Отдельно я хочу сказать следующее про скрин с ценой и литрами. Я по первости водил по это типа полоске рукой - пытаясь как бы заполнить ее, не понимая, что в полоске реальное количество заправленного бензина. Мне казалось, что мне не дают эту полоску быстро довести до конца. Т.е. я затупил и понял что туплю, только потом, когда заправился.
Ну и еще - куда ни приеду, везде яндекс-заправки не работают. Отговорки такие - "интернета нет", или "у них там чото", заправился раз 3-5, было очень удобно, после этого сталкиваюсь с отговорками
+, скрин с литрами похож на функции яркости и звука на айфоне, поэтому и нажимают и водят по ним
Наличку давай!!! Яндекса нет, терминала тоже!
Кажется это перевернутый логотип Beats.
Лучше бы делали акцент на колонке или заправочном пистолете, а не на шланге который и не поймёшь что это шланг.
И шланг так физичесски не скручивается
Ну красиво же
Цвет приятный, а вот буква P на иконке к чему? Могли же шланг не закручивать в букву
А кто первый придумывал?) Сколько не эффективно на него денег было потрачено?
Комментарий удален модератором
вы лучше расскажите, зачем поменяли иконку кинопоиска...
Сделайте, пожалуйста, в Таксометре возможность убрать с карты ненужные таксисту заправки.
Кто не бензине работает — убрать газовые.
Лучше бы фильтры нормальные сделали, а не логотип перерисовывали
Большую работу проделали
Новое лого - говно.
А приложение отличное.
Главное не в логотипе. Главное - это надежность и простота сервиса. А судя по отзывам здесь, с надежностью все обстоит плачевно.
Я раз в неделю пользуюсь приложением Яндекс.Заправок уже года два. Даже делал обзор сервиса на Ютубе. И раньше очень быстро находил ядовито зеленую яркую иконку. Это критически важно, когда сзади тебя скопилась очередь из желающих заправиться. Стоять и тупить - не очень приятно.
После обновления логотипа до сих пор тяжело найти иконку. Она стала какой-то типовой и теряется. Плюс, как правильно заметили, при чем здесь буква Р? А объяснение дизайнера на видео - натягивание совы на глобус.
Дизайнер, ты проверял на фокус группе водителей как они воспринимают логотип?
От кислотных кругов до фена для волос
От кислотных кругов до фена(Амфетамин)
у меня первая мысль была "уй с винтом", с заправочным пистолетом ассоциации даже не возникло пока не сказали
Жаль не у всех заправок можно привязать бонусную карту. Поэтому приходится топать на кассу чтобы её показать