Grok vs ChatGPT vs Claude
Роботы за $40 млрд
Экзоскелет для подъёма в горы
iPhone 17 Air
Apple Event 19.02
Джек Дорси про алгоритмы лент
Новая Tesla Model Y
Подарить Plus
Goku+ от TikTok
Альтман про Маска
Оживление фото LumaAI
«Умная» лампа Pixar
Роботы копируют людей
Генератор дипфейков от TikTok

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

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

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

Наша новая графика
Наша новая графика

Контекст: причины обновления и задачи для нового стиля

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

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

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

Так поменялся внешний вид продукта после редизайна
Так поменялся внешний вид продукта после редизайна

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

Какое-то время в новом дизайне жила старая графика. Вот несколько примеров иллюстраций, которые нам предстояло обновить
Какое-то время в новом дизайне жила старая графика. Вот несколько примеров иллюстраций, которые нам предстояло обновить

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

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

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

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

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

А как это измеряется?

В Авито есть своя опросная метрика восприятия дизайна Design Aesthetics Metric (DAM). Она даёт комплексную оценку по приложению и сайту, а ещё позволяет оценить влияние эстетической составляющей отдельно от контента и удобства сервиса — для них есть другие метрики. Мы ориентировались на DAM и во время редизайна, и при работе с новой графикой.

Процесс: совместное творчество с агентством

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

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

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

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

👉 Цикл жизни

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

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

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

👉 Размер

Несколько часто используемых изображений на размерной сетке. Сверху — старые варианты, снизу — новые
Несколько часто используемых изображений на размерной сетке. Сверху — старые варианты, снизу — новые

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

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

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

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

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

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

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

Ищем форму и цвет новых иллюстраций для Авто и Недвижимости
Ищем форму и цвет новых иллюстраций для Авто и Недвижимости

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

<p>Примеряем новую графику в продукте: слева — рубрикатор категорий на главной странице, справа — лендинги </p>

Примеряем новую графику в продукте: слева — рубрикатор категорий на главной странице, справа — лендинги

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

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

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

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

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

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

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

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

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

<p>Несколько примеров с A/B-теста. Слева в парах стоят старые варианты, справа — новые</p>

Несколько примеров с A/B-теста. Слева в парах стоят старые варианты, справа — новые

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

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

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

Примеры слайдов из презентации
Примеры слайдов из презентации

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

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

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

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

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

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

<p>Подсвечиваем бланковый 3D-объект разными оттенками фирменных цветов</p>

Подсвечиваем бланковый 3D-объект разными оттенками фирменных цветов

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

<p>Пример использования новой логики цвета для иллюстраций в разных контекстах — например, для обычного или премиального сегмента авто</p>

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

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

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

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

Коллайдер — новый элемент нашего визуального языка
Элементам внутри коллайдера можно задать разную фактуру: вот сет из 9 доступных текстур и материалов
Элементам внутри коллайдера можно задать разную фактуру: вот сет из 9 доступных текстур и материалов

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

<p>Брендируем фото с помощью коллайдера</p>

Брендируем фото с помощью коллайдера

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

Переходим от плоской графики к 3D
Переходим от плоской графики к 3D

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

Иллюстрации создаются в едином стиле
Иллюстрации создаются в едином стиле

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

Следующие шаги: как планируем внедрять графику

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

Постепенно сменим всю графику в продукте
Постепенно сменим всю графику в продукте

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

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

Плакаты с новой графикой для наших дизайн-команд: Услуг, Авто и Недвижимости
Плакаты с новой графикой для наших дизайн-команд: Услуг, Авто и Недвижимости

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

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

Действующие лица: Авито

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

Действующие лица: Superdesigners

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

Неплохо они решили все обновить, выглядит прикольно и современно, круто.

3

Визуально интересно, но по содержанию "черти што" Шаманы, колдуны тарологи и прочая нечисть))

1

Ребята молодцы, очень круто ❤️‍🔥

Вдохновляет, отличная работа!

мне нравится ,обновленный вариант выглядит свежо и намного лучше

Раскрывать всегда
«На уровне o1-pro» и «немного лучше DeepSeek»: первые впечатления от модели Grok 3 от xAI

Глава компании Илон Маск назвал Grok 3 «самым умным ИИ на Земле».

99
55
22
11
реклама
разместить
РСПП предложил ввести семейное налогообложение и индексировать пороги доходов для начисления НДФЛ

Чтобы налог рассчитывался исходя из семейного положения, а порог для прогрессивного налога рос каждый год.

4040
2323
22
11
11
11
Моё мнение такое: главное — качество, а не только количество. Увеличение рождаемости должно сопровождаться улучшением качества жизни коренного/местного населения: доступным жильём, качественным образованием, медицинским обслуживанием и поддержкой семей. Без этого рост населения может привести к увеличению бедности и социальной напряжённости, а ещё хуже — к постоянному завозу в страну большого количества мигрантов которые только сделают временный рост экономики (на бумаге) а после запустят механизм деградации. Ни один мигрант не считает себя русским человеком после получения гражданства, что подрывает развитие страны. Молодое и растущее население — это двигатель экономики! Инвестирование в рождаемость запустить процесс окупаемости для государства и даст больше трудоспособных граждан а это означает: - Увеличение потребительского спроса. - Рост налоговых поступлений. - Развитие отраслей, таких как образование, здравоохранение и строительство.
IP-телефония – всё? Постановление Правительства РФ №1898 простыми словами

Что за документ был принят 26 декабря 2024 года? Как он повлияет на работу вашей компании и цифровых продуктов MANGO OFFICE? Разберемся в нашей статье

IP-телефония – всё? Постановление Правительства РФ №1898 простыми словами
VK Education открыла набор на бесплатные образовательные программы по ИТ-специальностям

Весной 2025 года студентам будут доступны на выбор пять направлений и 25 открытых курсов.

66
22
Умер «отец Nutella» — химик Франческо Ривелла

Ему было 97 лет.

Ривелла. Источник фото: Bristol Live
7979
1111
11
Так я узнал что ТикТак и Kinder Surprise - итальянские...
Как создавать чат-ботов в 5 раз быстрее

С помощью n8n, NocoDB и Teable без дополнительных расходов, нервов и танцев с бубнами

Как создавать чат-ботов в 5 раз быстрее
88
55
МТС решил «оптимизировать» затраты на принадлежащий ему видеосервис Nuum, но закрывать его не планирует — «Ведомости»

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

1212
Так все узнали, что есть какой-то Nuum
[]