Новая графика на Авито: технологичный визуальный стиль для мультипродуктовой компании
Привет! Меня зовут Дима Салливан, я креативный директор продукта в Авито. Два года назад мы провели редизайн, а недавно вслед за продуктом начали обновлять графику. Пользователи видят её на сайте и в приложении, например, в уведомлениях, иконках и иллюстрациях.
Хочу показать несколько промежуточных итераций, прокомментировать итоговый результат и объяснить, почему новая графика выглядит именно так. Заодно расскажу, как мы построили процесс вместе с агентством Superdesigners. Думаю, статья будет полезна дизайнерам, которые занимаются ребрендингом в IT-компаниях или развивают дизайн супераппов, маркетплейсов и других больших цифровых сервисов.
Контекст: причины обновления и задачи для нового стиля
Авито постоянно развивается — как бизнес и онлайн-сервис, технологически и визуально.
Два года назад мы сделали редизайн продукта: провели исследования, переработали интерфейс и часть пользовательских сценариев. Изменения в первую очередь коснулись приложения, но и сайт тоже обновился. Внешний вид продукта стал более сдержанным, минималистичным, монохромным.
Одна из главных целей редизайна — повлиять на восприятие бренда и продукта, добавить к ним новые ассоциации. Авито уже давно не барахолка, а полноценный суперапп: платформа одновременно для машин, квартир, многих видов товаров, услуг и вакансий. Дизайн поддержал этот переход.
Но в свежем дизайне сохранилась старая графика: иллюстрации, иконки, картинки, суммарно несколько тысяч элементов. Они встречаются пользователям на лендингах, во время онбординга, в шторках и баннерах в приложении. Всё это тоже было важно обновить, чтобы поддержать изменения в дизайне продукта.
Что мы хотели от новой графики:
👉 Меньше ярких цветов и больше воздуха — чтобы соответствовать тону, который задал редизайн.
👉 Меньше игрушечности и несерьёзности — чтобы работать над ощущением от бренда, добавить экспертности и современности.
👉 Однородность: старые элементы создавали разные дизайнеры в разное время, это бросалось в глаза.
👉 Возможность для масштабирования и использования в разных контекстах. Например, теперь в Авито Премиум можно купить аутентичные брендовые вещи — нам важно иметь возможность подчеркнуть премиальность и во внешнем виде графики.
А как это измеряется?
В Авито есть своя опросная метрика восприятия дизайна Design Aesthetics Metric (DAM). Она даёт комплексную оценку по приложению и сайту, а ещё позволяет оценить влияние эстетической составляющей отдельно от контента и удобства сервиса — для них есть другие метрики. Мы ориентировались на DAM и во время редизайна, и при работе с новой графикой.
Процесс: совместное творчество с агентством
В отличие от редизайна продукта, работа с графикой — это вполне делегируемая и по формату скорее студийная задача. Нам было важно привлечь к совместному творчеству как можно больше сильных отраслевых специалистов, особенно по концептуальной 3D-графике, поэтому мы подобрали на проект агентство.
Основную работу провели с октября по декабрь 2023-го, процесс построили так:
Выбрали агентство. Решили работать с Superdesigners: нас устраивал их опыт, подход и стиль. 3D-графика — это сложный жанр, в котором легко скатиться в трендовые истории. А нам было важно, чтобы результаты работы оставались актуальными ещё как минимум несколько лет. Мы верили, что вместе с таким агентством это получится.
Провели подготовительную работу — разметили изображения. Чтобы понять, какую роль играет каждая иллюстрация и в каком контексте пользователь её увидит, мы вместе с агентством описали картинки для разных точек соприкосновения по такому набору свойств:
👉 Цикл жизни
👉 Скорость создания
👉 Инструмент воспроизведения, например, 3D или Flat
👉 Сущностное определение, например, иконка, 3D-иллюстрация или продуктовая иллюстрация
👉 Размер
Также заново продумали сюжетность: многие картинки недостаточно было просто перерисовать в новом стиле, и пришлось придумать другие визуальные метафоры.
Это позволило агентству сразу работать в нужной технике. Например, не пытаться воспроизводить иллюстрации для SMM в 3D: у них короткий цикл жизни, и тратить столько ресурсов было бы нерационально.
А ещё это позволило в первой же итерации взять в работу максимально разные изображения. Так мы могли быстрее проверить стилистику на прочность и убедиться, что она одинаково хорошо работает и в наружной рекламе, и в продукте.
Провели исследования. На стороне агентства прошёл исследовательский и экспериментальный процесс. Они изучили конкурентов и начали формировать наш новый визуальный язык, искать направляющие для развития.
Начали совместные креативные поиски. Мы были на связи с агентством каждый день. Такой подход позволял быстро принимать множество небольших решений и вместе двигаться в правильную сторону. Цена ошибки при этом сводилась к минимуму: никогда не поздно было что-то скорректировать, и для этого не приходилось ждать результата от агентства по 2 недели.
В Superdesigners помогали выбирать смелые решения, взращивали в нас уверенность. Если мы в чём-то сомневались, у арт-директоров агентства находились убедительные аргументы. В итоге получался современный и актуальный визуал, а мы не опасались, что зашли слишком далеко.
Вот примеры нескольких ранних эскизов:
Регулярно примеряли эскизы в продукте. Наши дизайнеры перекладывали наработки агентства на макеты, давали развёрнутую обратную связь и по необходимости начинали цикл заново.
Примеряем новую графику в продукте: слева — рубрикатор категорий на главной странице, справа — лендинги
Постепенно мы нащупали нужное направление — выбрали подходы к работе со светом и фирменными цветами. О подробностях расскажу чуть ниже.
Протестировали графику на пользователях. В конце первого спринта мы отрисовали пять ключевых иллюстраций из Товаров, Недвижимости и Авто в новом стиле и провели A/B-тест. Показывали старые и новые версии друг рядом с другом и просили оценить их по двум параметрам:
👉 Привлекательность.
👉 Уникальность.
А ещё — указать, насколько они соответствуют нескольким утверждениям:
👉 Этот дизайн подходит сервису по покупке товаров.
👉 Этот дизайн подходит Авито.
👉 Этот дизайн подходит сервису-лидеру в своей категории.
👉 В сервисе с таким дизайном я могу найти что-то для себя.
Несколько примеров с A/B-теста. Слева в парах стоят старые варианты, справа — новые
Те, кто ещё не пользуется Авито, оценили новую графику выше. А наши активные пользователи отреагировали нейтрально — то есть, обновлённый визуал не оттолкнёт их и не испортит опыт на Авито.
Создали гайд. Мы переделали часть остальных картинок и собрали первый подход к гайду, где описали принципы работы с новой графикой. Продумали, как приземлить глобальное видение на конкретные элементы, и обогатили гайд примерами на разных носителях. Благодаря этому мы сразу понимали, как будем работать с нашей внутренней студией и другими агентствами, не теряя новый визуальный язык.
Представили графику команде. Сначала — дизайнерам, а потом и всей команде Авито на общей презентации.
Результаты: как мы меняем восприятие бренда через элементы новой графики
На выходе у нас получился концепт-овервью нового подхода, стайлгайд и несколько анимаций — чтобы посмотреть, как стиль выглядит в динамике.
В новой графике мы применили сразу несколько решений, которые делают визуал современным, более эффектным и технологичным. А ещё — позволяют нам использовать его для разных задач внутри продукта.
Разберу несколько ключевых моментов:
Продумали, как контролировать цвет и свет. В нашем логотипе сразу несколько ярких цветов, которые трудно использовать для объектов напрямую. Например, есть риск, что иллюстрации выйдут слишком насыщенными, и их не получится гармонично встроить в продукт.
В новой графике мы придумали, как контролировать цвета через шейдинг и засвечивание бланковых объектов. Это позволяет уйти от игрушечности к более технологичным образам:
Подсвечиваем бланковый 3D-объект разными оттенками фирменных цветов
И адаптировать одни и те же объекты для разных задач и аудиторий — в том числе, для премиума:
Пример использования новой логики цвета для иллюстраций в разных контекстах — например, для обычного или премиального сегмента авто
А ещё — не терять при этом узнаваемость и оригинальность. Благодаря новому подходу нас легко отличить от других IT-компаний по фирменным цветам, а любой объект — из бланкового превратить в «авитовский».
Создали продолжение логотипа — коллайдер. Это графический элемент, который состоит из кругов: они движутся по орбиталям и могут быть разной длины, формы и фактуры.
Благодаря реалистично поставленному свету и прозрачным материалам, коллайдер может встраиваться в фотофактуру. Он даёт возможность брендировать изображения и использовать цвета с логотипа в разных контекстах. Это ценно: например, упрощает создание графики для перфоманс-маркетинга.
Брендируем фото с помощью коллайдера
Продумали переход от плоской графики к 3D. Мы разобрали, как использовать новые подходы к графике в разных форматах — от самых простых до обогащённых объёмными деталями — и не терять при этом узнаваемость.
Добились единообразия объектов. Теперь они отрендерены в одной сцене и похожих цветах, но при этом могут отражать разные категории Авито или функции в продукте:
Реализовали новый стиль в моушене. Проверили, как графика смотрится в динамике:
Следующие шаги: как планируем внедрять графику
Уже интегрируем стиль в продукт. Всего у нас больше тысячи картинок разных типов и размеров, и за 2024-й мы планируем бережно поменять графику во всех категориях Авито.
Готовим технический гайд по новой графике, который позволит поставить процесс на рельсы — перейти от штучной перерисовки к контролируемой и масштабной работе. Вместе с гайдом появятся шаблоны брифов на иллюстрации, чтобы бизнесу было проще заказывать их в нашей внутренней студии.
Собираем библиотеку часто используемых решений. Получится набор иконок и картинок, которые можно брать за основу для новых, более сложных иллюстраций.
Планируем новые тесты. Когда наберём критическую массу изображений, проведём ещё несколько исследований — вместе с пользователями поищем слабые и сильные стороны.
Общаемся и дискутируем с командой. Нам важно донести до дизайнеров новые принципы работы и обсудить их на примерах. Эта работа по переходу на новый стиль только началась — это самая объёмная задача в любом редизайне, но и самая приятная.
Действующие лица: Авито
Действующие лица: Superdesigners
Чтобы налог рассчитывался исходя из семейного положения, а порог для прогрессивного налога рос каждый год.
Что за документ был принят 26 декабря 2024 года? Как он повлияет на работу вашей компании и цифровых продуктов MANGO OFFICE? Разберемся в нашей статье
С помощью n8n, NocoDB и Teable без дополнительных расходов, нервов и танцев с бубнами
В компании подтвердили, что остановят инвестиции в контент и маркетинг и не будут разрабатывать новые функции.
Неплохо они решили все обновить, выглядит прикольно и современно, круто.
Флюент шагает
Визуально интересно, но по содержанию "черти што" Шаманы, колдуны тарологи и прочая нечисть))
Ребята молодцы, очень круто ❤️🔥
Вдохновляет, отличная работа!
мне нравится ,обновленный вариант выглядит свежо и намного лучше