Как сделать единую айдентику сразу для нескольких сервисов и не потерять узнаваемость

Рассказываем на примере Яндекс 360.

В июле 2023 года Яндекс 360 обновил логотипы продуктов и айдентику, которая существовала с 2020 года. Мы начали менять внешний вид наших сервисов — Почты, Диска, Календаря, Телемоста, Трекера и других. Процесс ребрендинга продолжается до сих пор, и в нём принимают участие не только дизайнеры, но и копирайтеры и креаторы, которые отвечают за то, как мы «говорим» во внешнем мире. В этой статье расскажем о том, как трансформировались 2D- и 3D-иллюстрации, посмотрим на разные итерации и поделимся, как мы построили процесс обновления.

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

Мы решили, что нам нужен новый стиль иллюстраций для использования в продукте и коммуникациях Яндекс 360 — уникальный и соответствующий характеру бренда. Поскольку у нас есть сервисы и для B2B, и для B2C, новый визуал должен быть понятен и приятен разной целевой аудитории.

Основные цвета обновленной айдентики Яндекс 360 – оранжевый и лавандовый – стали также и основой для палитры 2D и 3D-иллюстраций, при этом для каждого сервиса мы подобрали свою палитру с основным цветом. У Диска это синий, у Календаря — красный, у Телемоста — зелёный.

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

Прорабатывать детали 2D-стиля мы решили вместе с аутсорс-иллюстраторами, они заложили «фундамент», а после этого наши дизайнеры доработали и систематизировали наработки. За обновление иллюстраций отвечала Алёна Горбачёва, старший дизайнер в Яндекс 360.

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

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

Тогда мы решили заменить людей на животных (котиков все любят!) и природу, добавить градиент, дающий глубину и объём, и это сработало! Хоть мы убрали людей из иллюстраций в явном виде, решили оставить человечность как таковую и показали взаимодействие с сервисами Яндекс 360 с помощью телефона в руках.

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

Процесс обновления 3D-стиля двигался быстрее за счёт того, что в нашей обновлённой айдентике уже были заложены 3D-элементы и базовые принципы изображений. Мы не стали обращаться к агентствам, а сразу решили дорабатывать стиль внутри — за это отвечал наш старший коммуникационный дизайнер Борис Шемяков.

Как и в 2D, в 3D-стиле нам было важно создать сюжет в каждой иллюстрации. Мы решили использовать метафоры, которые основываются на брендовых ассетах и содержат палитру бренда, применять иконки продуктов, разные текстуры и создавать композиции с повторами и движением по орбите. Всё это уже было частью айдентики бренда Яндекс 360.

После формулировки базовых принципов мы начали примерку в продукте — меняли иллюстрации в макетах для соцсетей, пробовали вписать новый стиль в существующие промо-материалы и лендинги, обновляли сервисные сообщения. Для обоих типов мы решили использовать размеры S, M и L — для каждого появились свои правила по отрисовке в 2D и 3D.

В 3D-стиле мы используем иллюстрации размера L на главных страницах сервиса, M для демонстрации части интерфейса (например, виджетов), а S — для сюжетов небольшого размера.

2D-иллюстрации размера S имеют небольшое число элементов и цветов, как правило, не больше трёх, и используются для пустых списков и ограничения фич. Изображения размера M работают как поясняющие иллюстрации в продукте, инструкциях или ошибках, а L присутствуют в маркетинговой коммуникации и имеют уже расширенную палитру — до 5 цветов.

Производство иллюстраций — процесс трудозатратный, поэтому на следующем этапе мы определили жизненный цикл 2D и 3D.

У нас много форматов контента: промо, картинки для соцсетей, лендинги, тарифы, онбординги в сервисах и т.д. 3D-иллюстрации в производстве сильно дороже, поэтому их мы решили использовать там, где обновляемость материалов ниже — это тарифы, онбординги, имиджевые страницы, спецпроекты.

2D-иллюстрации имеют более «бизнесовый» вид, и они нужны для empty states и инструкций или, наоборот, историй с постоянным обновлением — это соцсети и промо.

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

Отрисовку начали с наиболее часто используемых элементов (изображения файлов, папок, картинок), а сейчас у нас обширная библиотека: в компонентах можно менять цвет, быстро собирать из нескольких элементов новые иллюстрации для определённых задач. Обе библиотеки (2D и 3D) регулярно обновляются, каждую неделю у нас появляется несколько новых элементов. В библиотеке 3D, помимо набора элементов, есть разные текстуры — и простые, и сложные.

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