Новая графика на Авито: технологичный визуальный стиль для мультипродуктовой компании

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

Хочу показать несколько промежуточных итераций, прокомментировать итоговый результат и объяснить, почему новая графика выглядит именно так. Заодно расскажу, как мы построили процесс вместе с агентством Superdesigners. Думаю, статья будет полезна дизайнерам, которые занимаются ребрендингом в IT-компаниях или развивают дизайн супераппов, маркетплейсов и других больших цифровых сервисов.

• Контекст
• Процесс
• Результаты
• Следующие шаги
• Действующие лица

Авито постоянно развивается — как бизнес и онлайн-сервис, технологически и визуально.

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

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

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

Что мы хотели от новой графики:

👉 Меньше ярких цветов и больше воздуха — чтобы соответствовать тону, который задал редизайн.

👉 Меньше игрушечности и несерьёзности — чтобы работать над ощущением от бренда, добавить экспертности и современности.

👉 Однородность: старые элементы создавали разные дизайнеры в разное время, это бросалось в глаза.

👉 Возможность для масштабирования и использования в разных контекстах. Например, теперь в Авито Премиум можно купить аутентичные брендовые вещи — нам важно иметь возможность подчеркнуть премиальность и во внешнем виде графики.

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

Основную работу провели с октября по декабрь 2023-го, процесс построили так:

Выбрали агентство. Решили работать с Superdesigners: нас устраивал их опыт, подход и стиль. 3D-графика — это сложный жанр, в котором легко скатиться в трендовые истории. А нам было важно, чтобы результаты работы оставались актуальными ещё как минимум несколько лет. Мы верили, что вместе с таким агентством это получится.

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

👉 Цикл жизни

👉 Скорость создания

👉 Инструмент воспроизведения, например, 3D или Flat

👉 Сущностное определение, например, иконка, 3D-иллюстрация или продуктовая иллюстрация

👉 Размер

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

Это позволило агентству сразу работать в нужной технике. Например, не пытаться воспроизводить иллюстрации для SMM в 3D: у них короткий цикл жизни, и тратить столько ресурсов было бы нерационально.

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

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

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

В Superdesigners помогали выбирать смелые решения, взращивали в нас уверенность. Если мы в чём-то сомневались, у арт-директоров агентства находились убедительные аргументы. В итоге получался современный и актуальный визуал, а мы не опасались, что зашли слишком далеко.

Вот примеры нескольких ранних эскизов:

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

Постепенно мы нащупали нужное направление — выбрали подходы к работе со светом и фирменными цветами. О подробностях расскажу чуть ниже.

Протестировали графику на пользователях. В конце первого спринта мы отрисовали пять ключевых иллюстраций из Товаров, Недвижимости и Авто в новом стиле и провели A/B-тест. Показывали старые и новые версии друг рядом с другом и просили оценить их по двум параметрам:

👉 Привлекательность.

👉 Уникальность.

А ещё — указать, насколько они соответствуют нескольким утверждениям:

👉 Этот дизайн подходит сервису по покупке товаров.

👉 Этот дизайн подходит Авито.

👉 Этот дизайн подходит сервису-лидеру в своей категории.

👉 В сервисе с таким дизайном я могу найти что-то для себя.

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

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

Представили графику команде. Сначала — дизайнерам, а потом и всей команде Авито на общей презентации.

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

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

Разберу несколько ключевых моментов:

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

В новой графике мы придумали, как контролировать цвета через шейдинг и засвечивание бланковых объектов. Это позволяет уйти от игрушечности к более технологичным образам:

И адаптировать одни и те же объекты для разных задач и аудиторий — в том числе, для премиума:

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

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

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

Продумали переход от плоской графики к 3D. Мы разобрали, как использовать новые подходы к графике в разных форматах — от самых простых до обогащённых объёмными деталями — и не терять при этом узнаваемость.

Добились единообразия объектов. Теперь они отрендерены в одной сцене и похожих цветах, но при этом могут отражать разные категории Авито или функции в продукте:

Реализовали новый стиль в моушене. Проверили, как графика смотрится в динамике:

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

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

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

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

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