1 added
1 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#кейсы</a></p>
1
<p><a>#кейсы</a></p>
2
<ul><li>6 фев 2024</li>
2
<ul><li>6 фев 2024</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Как сделать тёплый брендинг для ещё одного технологичного сервиса.</p>
4
</ul><p>Как сделать тёплый брендинг для ещё одного технологичного сервиса.</p>
5
<p>Изображение: "Яндекс Аренда" / ESH gruppa</p>
5
<p>Изображение: "Яндекс Аренда" / ESH gruppa</p>
6
<p>Сервис "Яндекс Аренда" запустили в России в 2021 году, а в 2023-м компания опубликовала собственное приложение для iOS и Android. Рассказываем, как студия ESH Gruppa создала для него фирменный стиль, а кот Туча сделал бренд человечным.</p>
6
<p>Сервис "Яндекс Аренда" запустили в России в 2021 году, а в 2023-м компания опубликовала собственное приложение для iOS и Android. Рассказываем, как студия ESH Gruppa создала для него фирменный стиль, а кот Туча сделал бренд человечным.</p>
7
<p>"Яндекс Аренда" - цифровой продукт, который должен помочь людям сдавать и снимать жильё прозрачно, понятно, дистанционно, с гарантиями безопасности для обеих сторон. Он связывает арендаторов и арендодателей, становится посредником-гарантом и позволяет им не тратить время на личные встречи.</p>
7
<p>"Яндекс Аренда" - цифровой продукт, который должен помочь людям сдавать и снимать жильё прозрачно, понятно, дистанционно, с гарантиями безопасности для обеих сторон. Он связывает арендаторов и арендодателей, становится посредником-гарантом и позволяет им не тратить время на личные встречи.</p>
8
<p>Специалисты "Яндекс Аренды" проверяют объекты, делают фото и видео для онлайн-показов, публикуют объявления, показывают квартиры и апартаменты желающим. Когда собственник одобряет будущих жильцов, сервис заключает с ними договор, и курьер привозит ключи.</p>
8
<p>Специалисты "Яндекс Аренды" проверяют объекты, делают фото и видео для онлайн-показов, публикуют объявления, показывают квартиры и апартаменты желающим. Когда собственник одобряет будущих жильцов, сервис заключает с ними договор, и курьер привозит ключи.</p>
9
Так в феврале 2024 года выглядит основная пользовательская страница сервиса<em>Скриншот: сайт "<a>Яндекс Аренда</a>" / Skillbox Media</em>На февраль 2024 года сервис работает в Москве и Московской области, в Санкт-Петербурге и Ленинградской области<em>Скриншот: сайт "<a>Яндекс Аренда</a>" / Skillbox Media</em><p>Айдентику для "Яндекс Аренды" разрабатывала студия ESH Gruppa, и теперь команда готова поделиться, почему визуальный язык сервиса создали именно таким.</p>
9
Так в феврале 2024 года выглядит основная пользовательская страница сервиса<em>Скриншот: сайт "<a>Яндекс Аренда</a>" / Skillbox Media</em>На февраль 2024 года сервис работает в Москве и Московской области, в Санкт-Петербурге и Ленинградской области<em>Скриншот: сайт "<a>Яндекс Аренда</a>" / Skillbox Media</em><p>Айдентику для "Яндекс Аренды" разрабатывала студия ESH Gruppa, и теперь команда готова поделиться, почему визуальный язык сервиса создали именно таким.</p>
10
<p>Однажды московской зимой 2021 года ESH Gruppa выиграла тендер в "Яндексе", а у дизайнера студии Нади Косенковой появился чёрный котёнок Туча. Сервис "Яндекс Аренда" тогда уже существовал, но у него не было своего брендинга.</p>
10
<p>Однажды московской зимой 2021 года ESH Gruppa выиграла тендер в "Яндексе", а у дизайнера студии Нади Косенковой появился чёрный котёнок Туча. Сервис "Яндекс Аренда" тогда уже существовал, но у него не было своего брендинга.</p>
11
<p>Конкурсные концепты фирменного знака, которые представили ESH Gruppa, были родственны логотипу другого продукта корпорации - "Яндекс Недвижимости": дверной замок в оттенке зелёного, сиреневая приоткрытая дверь. Причём форма дверцы одновременно напоминала speech bubble: это была метафора к тому, что аренда - это всегда общение двух людей, а сервис выступает посредником.</p>
11
<p>Конкурсные концепты фирменного знака, которые представили ESH Gruppa, были родственны логотипу другого продукта корпорации - "Яндекс Недвижимости": дверной замок в оттенке зелёного, сиреневая приоткрытая дверь. Причём форма дверцы одновременно напоминала speech bubble: это была метафора к тому, что аренда - это всегда общение двух людей, а сервис выступает посредником.</p>
12
"Яндекс Недвижимость" - более крупный сервис, конкурент "Циана". "Яндекс Аренда" - сервис, который работает как связной арендатора и арендодателя<em>Скриншот: "<a>Яндекс Недвижимость</a>" / Skillbox Media</em><p>Эти варианты бизнес не выбрал. Позднее, на старте проекта, ESH Gruppa и in-house "Яндекса" собрались на воркшоп - такой инструмент помогает заказчику и исполнителю лучше понять друг друга, набросать первые идеи, найти референсы. Идея с брелоком возникла там, у белой доски. Ещё среди вариантов была лесенка и абстрактные формы - они отвалились сами собой: для большого сервиса важно, чтобы люди считывали образ легко и моментально.</p>
12
"Яндекс Недвижимость" - более крупный сервис, конкурент "Циана". "Яндекс Аренда" - сервис, который работает как связной арендатора и арендодателя<em>Скриншот: "<a>Яндекс Недвижимость</a>" / Skillbox Media</em><p>Эти варианты бизнес не выбрал. Позднее, на старте проекта, ESH Gruppa и in-house "Яндекса" собрались на воркшоп - такой инструмент помогает заказчику и исполнителю лучше понять друг друга, набросать первые идеи, найти референсы. Идея с брелоком возникла там, у белой доски. Ещё среди вариантов была лесенка и абстрактные формы - они отвалились сами собой: для большого сервиса важно, чтобы люди считывали образ легко и моментально.</p>
13
<p>Сразу стало понятно, что у брелока есть ключевой элемент - отверстие. Можно дырявить какие угодно объекты и тем самым создавать масштабируемую айдентику.</p>
13
<p>Сразу стало понятно, что у брелока есть ключевой элемент - отверстие. Можно дырявить какие угодно объекты и тем самым создавать масштабируемую айдентику.</p>
14
<p><strong>Надя Косенкова</strong>, лид-дизайнер ESH Gruppa</p>
14
<p><strong>Надя Косенкова</strong>, лид-дизайнер ESH Gruppa</p>
15
Воркшоп в "Яндексе". Первые варианты брелока<em>Изображение: ESH Gruppa</em><p>Меня вдохновила идея, что в иконке не рисуешь домик, ключик и даже целиком брелок, а только фрагмент, который напоминает в том числе и домик. А отверстие, которое стоит ровно посередине, одновременно ещё и точка - надёжность.</p>
15
Воркшоп в "Яндексе". Первые варианты брелока<em>Изображение: ESH Gruppa</em><p>Меня вдохновила идея, что в иконке не рисуешь домик, ключик и даже целиком брелок, а только фрагмент, который напоминает в том числе и домик. А отверстие, которое стоит ровно посередине, одновременно ещё и точка - надёжность.</p>
16
<p><strong>Стефан Лашко,</strong>арт-директор ESH Gruppa</p>
16
<p><strong>Стефан Лашко,</strong>арт-директор ESH Gruppa</p>
17
-
Обсуждение образа брелока<em>Изображение: ESH Gruppa</em><p>Иконку долго "крутили", настраивали правильный угол поворота - не в каждой айдентике уделяют так много внимания значку. Финальной версией стал графический образ с колечком, наклонённый вправо: брелок динамичный, будто б��лтается на ключах.</p>
17
+
Обсуждение образа брелока<em>Изображение: ESH Gruppa</em><p>Иконку долго "крутили", настраивали правильный угол поворота - не в каждой айдентике уделяют так много внимания значку. Финальной версией стал графический образ с колечком, наклонённый вправо: брелок динамичный, будто болтается на ключах.</p>
18
<em>Изображение: ESH Gruppa</em><em>Изображение: ESH Gruppa</em><p>Я очень рад, что мы иконку построили будто специально по сетке. От этого чувствуется удовлетворение!</p>
18
<em>Изображение: ESH Gruppa</em><em>Изображение: ESH Gruppa</em><p>Я очень рад, что мы иконку построили будто специально по сетке. От этого чувствуется удовлетворение!</p>
19
<p><strong>Стефан Лашко</strong></p>
19
<p><strong>Стефан Лашко</strong></p>
20
<em>Изображение: ESH Gruppa</em><p>После бренд-знака необходимо было системно проработать гайдбук, и дизайнер ESH Gruppa Надя Косенкова присоединилась к команде "Яндекса".</p>
20
<em>Изображение: ESH Gruppa</em><p>После бренд-знака необходимо было системно проработать гайдбук, и дизайнер ESH Gruppa Надя Косенкова присоединилась к команде "Яндекса".</p>
21
<p>Основным цветом стал яркий фиолетовый, в контраст ему были подобраны жёлтый, светло-оранжевый, персиковый. Эти оттенки, контрастные с цветом основной иконки, дали возможность делать макеты тёплыми и визуально намекать на уют.</p>
21
<p>Основным цветом стал яркий фиолетовый, в контраст ему были подобраны жёлтый, светло-оранжевый, персиковый. Эти оттенки, контрастные с цветом основной иконки, дали возможность делать макеты тёплыми и визуально намекать на уют.</p>
22
<p>Корневой идеей для подробной фирменной палитры было то, что аренда, по сути, - сервисная модель, которая делится на арендаторов и арендодателей, и можно поделить цвета и использовать для каждой коммуникации своё настроение.</p>
22
<p>Корневой идеей для подробной фирменной палитры было то, что аренда, по сути, - сервисная модель, которая делится на арендаторов и арендодателей, и можно поделить цвета и использовать для каждой коммуникации своё настроение.</p>
23
<p><strong>Надя Косенкова</strong></p>
23
<p><strong>Надя Косенкова</strong></p>
24
<p>Например, на языке дизайна разговор с теми, кто снимает квартиру, может быть дружелюбным, в тёплых оттенках палитры. А когда мы говорим с собственником, нам важно показать экспертность - выбираем холодный фиолетовый оттенок. И именно он стал основным.</p>
24
<p>Например, на языке дизайна разговор с теми, кто снимает квартиру, может быть дружелюбным, в тёплых оттенках палитры. А когда мы говорим с собственником, нам важно показать экспертность - выбираем холодный фиолетовый оттенок. И именно он стал основным.</p>
25
<p>Фирменный фиолетовый цвет выбирали рационально: он должен был отстраивать бренд от конкурентов в нише и от других продуктов "Яндекса". Когда его подбирали, смотрели, как оттенок лого будет выглядеть рядом с другими - например, красной Я.</p>
25
<p>Фирменный фиолетовый цвет выбирали рационально: он должен был отстраивать бренд от конкурентов в нише и от других продуктов "Яндекса". Когда его подбирали, смотрели, как оттенок лого будет выглядеть рядом с другими - например, красной Я.</p>
26
Ярко-фиолетовый на светлом лиловом<em>Изображение: ESH Gruppa</em><p>В 2022-м Pantone объявил цветом года Very Peri - светло-фиолетовый. Он немедленно стал трендовым, и появилась масса визуальных продуктов в этом оттенке.</p>
26
Ярко-фиолетовый на светлом лиловом<em>Изображение: ESH Gruppa</em><p>В 2022-м Pantone объявил цветом года Very Peri - светло-фиолетовый. Он немедленно стал трендовым, и появилась масса визуальных продуктов в этом оттенке.</p>
27
<p>Есть очень удобный способ сделать брендинг консистентным - использовать маскота-героя. К тому же такой элемент упрощает работу: харáктерный образ легко интегрировать во все коммуникации, ресайзы, рекламу.</p>
27
<p>Есть очень удобный способ сделать брендинг консистентным - использовать маскота-героя. К тому же такой элемент упрощает работу: харáктерный образ легко интегрировать во все коммуникации, ресайзы, рекламу.</p>
28
<p>Сначала (и в шутку) ESH предложили домового, но в "Яндексе" отказались: сервис суперсовременный и технологичный, а отсылка к старинному образу нарушила бы эту логику.</p>
28
<p>Сначала (и в шутку) ESH предложили домового, но в "Яндексе" отказались: сервис суперсовременный и технологичный, а отсылка к старинному образу нарушила бы эту логику.</p>
29
<p>Поймать характер в иллюстрациях, как и определить характер человека, сложно. Мы довольно долго искали, рисовали разные варианты. И, по моему опыту, в работе с иллюстрациями такое бывает часто.</p>
29
<p>Поймать характер в иллюстрациях, как и определить характер человека, сложно. Мы довольно долго искали, рисовали разные варианты. И, по моему опыту, в работе с иллюстрациями такое бывает часто.</p>
30
<p><strong>Надя Косенкова</strong></p>
30
<p><strong>Надя Косенкова</strong></p>
31
<p>Для бренд-иллюстраций "Яндекс Аренды" точный, идеальный стиль искали почти год, за который тестировали разные подходы.</p>
31
<p>Для бренд-иллюстраций "Яндекс Аренды" точный, идеальный стиль искали почти год, за который тестировали разные подходы.</p>
32
<p>Мы много работаем с коллегами из продукта, которые собирают приложение. Их изначальный и главный запрос был в том, чтобы иллюстрации делались как можно быстрее. Нужен был конструкторский, технологичный подход: берёшь фигурку, ставишь рядом с другой, получается готовая сцена-иллюстрация. Поэтому уже с первых подходов мы обратились к плоскому стилю.</p>
32
<p>Мы много работаем с коллегами из продукта, которые собирают приложение. Их изначальный и главный запрос был в том, чтобы иллюстрации делались как можно быстрее. Нужен был конструкторский, технологичный подход: берёшь фигурку, ставишь рядом с другой, получается готовая сцена-иллюстрация. Поэтому уже с первых подходов мы обратились к плоскому стилю.</p>
33
<p>Но у иллюстраций для сервиса есть один важный нюанс: их нельзя делать отдельно от продукта. Можно нарисовать красивую картинку, но когда она попадает на экран приложения, перестаёт работать, выглядит пусто, и бренд теряется.</p>
33
<p>Но у иллюстраций для сервиса есть один важный нюанс: их нельзя делать отдельно от продукта. Можно нарисовать красивую картинку, но когда она попадает на экран приложения, перестаёт работать, выглядит пусто, и бренд теряется.</p>
34
<p><strong>Эмма Низамова,</strong>иллюстратор</p>
34
<p><strong>Эмма Низамова,</strong>иллюстратор</p>
35
Первый рабочий стиль иллюстраций<em>Изображение: ESH Gruppa</em><p>В основе каждой картинки должна лежать идея, и в случае с "Яндекс Арендой" классно, что все эти идеи можно буквально вытащить из продукта. Что делает сервис? Мы смотрим на проблемы, которые он решает, и превращаем эти ситуации в иллюстрации и метафоры.</p>
35
Первый рабочий стиль иллюстраций<em>Изображение: ESH Gruppa</em><p>В основе каждой картинки должна лежать идея, и в случае с "Яндекс Арендой" классно, что все эти идеи можно буквально вытащить из продукта. Что делает сервис? Мы смотрим на проблемы, которые он решает, и превращаем эти ситуации в иллюстрации и метафоры.</p>
36
<p>Мы помогаем человеку, у которого нет пристанища, которому надо срочно найти квартиру. Ему нужно, чтобы сейчас у него появились ключи от дома. Он живёт на чемоданах. Когда начинаешь визуально развивать такие больные темы, прорастает живой сюжет: например, человек вальяжно развалился на подоконнике, поставил чайник на коробку - ведь у него ещё нет всей нужной мебели.</p>
36
<p>Мы помогаем человеку, у которого нет пристанища, которому надо срочно найти квартиру. Ему нужно, чтобы сейчас у него появились ключи от дома. Он живёт на чемоданах. Когда начинаешь визуально развивать такие больные темы, прорастает живой сюжет: например, человек вальяжно развалился на подоконнике, поставил чайник на коробку - ведь у него ещё нет всей нужной мебели.</p>
37
<p><strong>Эмма Низамова</strong></p>
37
<p><strong>Эмма Низамова</strong></p>
38
<p>Многие иллюстраторы для рабочих задач рисуют вещи вокруг себя - не придумывают предметы, а изображают всё, что у них есть. Образы из реальной жизни они "протаскивают" в строгий мир коммерции, и пользователи чувствуют, что это - живое. Получается, что тёплые иллюстрации - простой приём, который незаметно цепляет аудиторию и выделяет продукт среди всех остальных.</p>
38
<p>Многие иллюстраторы для рабочих задач рисуют вещи вокруг себя - не придумывают предметы, а изображают всё, что у них есть. Образы из реальной жизни они "протаскивают" в строгий мир коммерции, и пользователи чувствуют, что это - живое. Получается, что тёплые иллюстрации - простой приём, который незаметно цепляет аудиторию и выделяет продукт среди всех остальных.</p>
39
<p>Так на иллюстрациях для "Яндекс Аренды" появился чёрный кот Туча в своей естественной среде обитания. Туча вылезает из коробки, трогает лапкой цветок, лежит на тёплом ноутбуке, проверяет углы в квартире.</p>
39
<p>Так на иллюстрациях для "Яндекс Аренды" появился чёрный кот Туча в своей естественной среде обитания. Туча вылезает из коробки, трогает лапкой цветок, лежит на тёплом ноутбуке, проверяет углы в квартире.</p>
40
<em>Фото: ESH Gruppa</em><p>Котика в айдентике нам одобрили сразу. В каждой корпорации работают живые люди, у которых есть свои животные дома. Но главное, что наши конечные пользователи - обычные люди, которые тоже смеются над смешными картинками с котами.</p>
40
<em>Фото: ESH Gruppa</em><p>Котика в айдентике нам одобрили сразу. В каждой корпорации работают живые люди, у которых есть свои животные дома. Но главное, что наши конечные пользователи - обычные люди, которые тоже смеются над смешными картинками с котами.</p>
41
<p><strong>Эмма Низамова</strong></p>
41
<p><strong>Эмма Низамова</strong></p>
42
"Шершавая", "тактильная" линия в рисунках - тоже часть концепции визуального уюта и жизни<em>Изображение: ESH Gruppa</em>"Шершавая", "тактильная" линия в рисунках - тоже часть концепции визуального уюта и жизни<em>Изображение: ESH Gruppa</em>Живая линия в других иллюстрациях в приложении<em>Скриншот: "Яндекс Аренда" / Skillbox Media</em>В иллюстрациях у людей есть цвет кожи - этот приём замечательно оживляет изображения. Здесь отразили "типичный" образ арендодателя, ведь обычно это женщина в возрасте - позже из иллюстраций вырос фотостиль<em>Изображение: ESH Gruppa</em><p>Для бренд-коммуникаций важно выстраивать собственный характер, своё лицо, и это помогают сделать акцидентные гарнитуры.</p>
42
"Шершавая", "тактильная" линия в рисунках - тоже часть концепции визуального уюта и жизни<em>Изображение: ESH Gruppa</em>"Шершавая", "тактильная" линия в рисунках - тоже часть концепции визуального уюта и жизни<em>Изображение: ESH Gruppa</em>Живая линия в других иллюстрациях в приложении<em>Скриншот: "Яндекс Аренда" / Skillbox Media</em>В иллюстрациях у людей есть цвет кожи - этот приём замечательно оживляет изображения. Здесь отразили "типичный" образ арендодателя, ведь обычно это женщина в возрасте - позже из иллюстраций вырос фотостиль<em>Изображение: ESH Gruppa</em><p>Для бренд-коммуникаций важно выстраивать собственный характер, своё лицо, и это помогают сделать акцидентные гарнитуры.</p>
43
<p>Для сервиса "Яндекса", как я вижу, смелое решение - использовать свою гарнитуру. Не все могут себе это позволить: очень много сил уходит на то, чтобы её "приладить" к шрифтам "Яндекса" и грамотно использовать в продуктовой части. Если в графическом дизайне есть возможность сидеть и аккуратно работать с начертаниями, то в продукте всё намного сложнее. Всё ездит, летает, переезжает, и с типографикой необходимо очень деликатно работать. Но, с другой стороны, у акциденции есть положительный момент: благодаря ему брендинг запоминается ещё лучше.</p>
43
<p>Для сервиса "Яндекса", как я вижу, смелое решение - использовать свою гарнитуру. Не все могут себе это позволить: очень много сил уходит на то, чтобы её "приладить" к шрифтам "Яндекса" и грамотно использовать в продуктовой части. Если в графическом дизайне есть возможность сидеть и аккуратно работать с начертаниями, то в продукте всё намного сложнее. Всё ездит, летает, переезжает, и с типографикой необходимо очень деликатно работать. Но, с другой стороны, у акциденции есть положительный момент: благодаря ему брендинг запоминается ещё лучше.</p>
44
<p><strong>Надя Косенкова</strong></p>
44
<p><strong>Надя Косенкова</strong></p>
45
<p>В пару к основной корпоративной гарнитуре Yandex Sans выбрали<a>Halvar Breitschrift</a> - "прагматичный гротеск с грубым инженерным шармом".</p>
45
<p>В пару к основной корпоративной гарнитуре Yandex Sans выбрали<a>Halvar Breitschrift</a> - "прагматичный гротеск с грубым инженерным шармом".</p>
46
<em>Изображение: ESH Gruppa</em><p>ESH</p>
46
<em>Изображение: ESH Gruppa</em><p>ESH</p>
47
<p><strong>Стефан Лашко </strong>- арт-директор</p>
47
<p><strong>Стефан Лашко </strong>- арт-директор</p>
48
<p><strong>Надя Косенкова </strong>- лид-дизайнер, motion-дизайнер</p>
48
<p><strong>Надя Косенкова </strong>- лид-дизайнер, motion-дизайнер</p>
49
<p><strong>Полина Сырватка </strong>- дизайнер</p>
49
<p><strong>Полина Сырватка </strong>- дизайнер</p>
50
<p><strong>Нарек Ватинян </strong>- менеджер проекта</p>
50
<p><strong>Нарек Ватинян </strong>- менеджер проекта</p>
51
<p><strong>Иван Мацкевич </strong>- менеджер</p>
51
<p><strong>Иван Мацкевич </strong>- менеджер</p>
52
<p><strong>Екатерина Рудая </strong>- текст на макетах</p>
52
<p><strong>Екатерина Рудая </strong>- текст на макетах</p>
53
<p>"Яндекс Аренда" Yandex Rent</p>
53
<p>"Яндекс Аренда" Yandex Rent</p>
54
<p><strong>Владимир Куликов</strong>- арт-директор</p>
54
<p><strong>Владимир Куликов</strong>- арт-директор</p>
55
<p><strong>Ксения Бояркина</strong>и <strong>Дари Соколова</strong> -продюсеры</p>
55
<p><strong>Ксения Бояркина</strong>и <strong>Дари Соколова</strong> -продюсеры</p>
56
<p><strong>Эмма Низамова</strong> - иллюстратор и дизайнер анимации</p>
56
<p><strong>Эмма Низамова</strong> - иллюстратор и дизайнер анимации</p>
57
<p><strong>Олег Ронжин</strong>,<strong>Саша Волков</strong> - 3D</p>
57
<p><strong>Олег Ронжин</strong>,<strong>Саша Волков</strong> - 3D</p>
58
<p><strong>Tape Production</strong> - фотографии</p>
58
<p><strong>Tape Production</strong> - фотографии</p>
59
<p><strong>Сергей Осокин</strong> - иконки</p>
59
<p><strong>Сергей Осокин</strong> - иконки</p>
60
<p><strong>Кот Туча</strong></p>
60
<p><strong>Кот Туча</strong></p>
61
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>
61
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>