Дизайн

#кейсы

6 фев 2024
0

Можно с воспитанным котом. Айдентика Yandex Rent от ESH Gruppa

Как сделать тёплый брендинг для ещё одного технологичного сервиса.

Изображение: «Яндекс Аренда» / ESH gruppa

Полина Старцева

Всюду ищет великую красоту, работает над разумностью потребления.

Сервис «Яндекс Аренда» запустили в России в 2021 году, а в 2023-м компания опубликовала собственное приложение для iOS и Android. Рассказываем, как студия ESH Gruppa создала для него фирменный стиль, а кот Туча сделал бренд человечным.

Что такое «Яндекс Аренда»

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

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

Так в феврале 2024 года выглядит основная пользовательская страница сервиса
*Скриншот: сайт «Яндекс Аренда» / Skillbox Media*

На февраль 2024 года сервис работает в Москве и Московской области, в Санкт-Петербурге и Ленинградской области
*Скриншот: сайт «Яндекс Аренда» / Skillbox Media*

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

Домик, лесенка, брелок

Однажды московской зимой 2021 года ESH Gruppa выиграла тендер в «Яндексе», а у дизайнера студии Нади Косенковой появился чёрный котёнок Туча. Сервис «Яндекс Аренда» тогда уже существовал, но у него не было своего брендинга.

Конкурсные концепты фирменного знака, которые представили ESH Gruppa, были родственны логотипу другого продукта корпорации — «Яндекс Недвижимости»: дверной замок в оттенке зелёного, сиреневая приоткрытая дверь. Причём форма дверцы одновременно напоминала speech bubble: это была метафора к тому, что аренда — это всегда общение двух людей, а сервис выступает посредником.

«Яндекс Недвижимость» — более крупный сервис, конкурент «Циана». «Яндекс Аренда» — сервис, который работает как связной арендатора и арендодателя
*Скриншот: «Яндекс Недвижимость» / Skillbox Media*

Эти варианты бизнес не выбрал. Позднее, на старте проекта, ESH Gruppa и in-house «Яндекса» собрались на воркшоп — такой инструмент помогает заказчику и исполнителю лучше понять друг друга, набросать первые идеи, найти референсы. Идея с брелоком возникла там, у белой доски. Ещё среди вариантов была лесенка и абстрактные формы — они отвалились сами собой: для большого сервиса важно, чтобы люди считывали образ легко и моментально.

Сразу стало понятно, что у брелока есть ключевой элемент — отверстие. Можно дырявить какие угодно объекты и тем самым создавать масштабируемую айдентику.

Надя Косенкова,
лид-дизайнер ESH Gruppa

Воркшоп в «Яндексе». Первые варианты брелока
*Изображение: ESH Gruppa*

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

Стефан Лашко,
арт-директор ESH Gruppa

Обсуждение образа брелока
*Изображение: ESH Gruppa*

Иконку долго «крутили», настраивали правильный угол поворота — не в каждой айдентике уделяют так много внимания значку. Финальной версией стал графический образ с колечком, наклонённый вправо: брелок динамичный, будто болтается на ключах.

Я очень рад, что мы иконку построили будто специально по сетке. От этого чувствуется удовлетворение!

Стефан Лашко

Цвет

После бренд-знака необходимо было системно проработать гайдбук, и дизайнер ESH Gruppa Надя Косенкова присоединилась к команде «Яндекса».

Основным цветом стал яркий фиолетовый, в контраст ему были подобраны жёлтый, светло-оранжевый, персиковый. Эти оттенки, контрастные с цветом основной иконки, дали возможность делать макеты тёплыми и визуально намекать на уют.

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

Надя Косенкова

Например, на языке дизайна разговор с теми, кто снимает квартиру, может быть дружелюбным, в тёплых оттенках палитры. А когда мы говорим с собственником, нам важно показать экспертность — выбираем холодный фиолетовый оттенок. И именно он стал основным.

Фирменный фиолетовый цвет выбирали рационально: он должен был отстраивать бренд от конкурентов в нише и от других продуктов «Яндекса». Когда его подбирали, смотрели, как оттенок лого будет выглядеть рядом с другими — например, красной Я.

Ярко-фиолетовый на светлом лиловом
*Изображение: ESH Gruppa*

В 2022-м Pantone объявил цветом года Very Peri — светло-фиолетовый. Он немедленно стал трендовым, и появилась масса визуальных продуктов в этом оттенке.

Иллюстрации

Есть очень удобный способ сделать брендинг консистентным — использовать маскота-героя. К тому же такой элемент упрощает работу: харáктерный образ легко интегрировать во все коммуникации, ресайзы, рекламу.

Сначала (и в шутку) ESH предложили домового, но в «Яндексе» отказались: сервис суперсовременный и технологичный, а отсылка к старинному образу нарушила бы эту логику.

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

Надя Косенкова

Для бренд-иллюстраций «Яндекс Аренды» точный, идеальный стиль искали почти год, за который тестировали разные подходы.

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

Но у иллюстраций для сервиса есть один важный нюанс: их нельзя делать отдельно от продукта. Можно нарисовать красивую картинку, но когда она попадает на экран приложения, перестаёт работать, выглядит пусто, и бренд теряется.

Эмма Низамова,
иллюстратор

Первый рабочий стиль иллюстраций
*Изображение: ESH Gruppa*

В основе каждой картинки должна лежать идея, и в случае с «Яндекс Арендой» классно, что все эти идеи можно буквально вытащить из продукта. Что делает сервис? Мы смотрим на проблемы, которые он решает, и превращаем эти ситуации в иллюстрации и метафоры.

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

Эмма Низамова

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

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

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

Эмма Низамова

«Шершавая», «тактильная» линия в рисунках — тоже часть концепции визуального уюта и жизни
*Изображение: ESH Gruppa*

Живая линия в других иллюстрациях в приложении
*Скриншот: «Яндекс Аренда» / Skillbox Media*

В иллюстрациях у людей есть цвет кожи — этот приём замечательно оживляет изображения. Здесь отразили «типичный» образ арендодателя, ведь обычно это женщина в возрасте — позже из иллюстраций вырос фотостиль
*Изображение: ESH Gruppa*

Шрифт

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

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

Надя Косенкова

В пару к основной корпоративной гарнитуре Yandex Sans выбрали Halvar Breitschrift — «прагматичный гротеск с грубым инженерным шармом».