«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK

Вчера мы анонсировали, что Mail.ru Group становится VK. Впервые в истории компании мы не просто обновляем фирменный стиль, а создаем единый пользовательский бренд. Рассказываем и показываем, как он будет выглядеть.

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK
Виолетта Силенина
Бренд-директор VK

Всем привет. Меня зовут Виолетта Силенина, я бренд-директор VK — вот уже восемь лет отвечаю за бренд социальной сети ВКонтакте, а теперь и всей компании. Расскажу подробнее, как мы пришли к глобальному ребрендингу, и о разработке нового визуального языка единого бренда.

Немного предыстории. Бренд Mail.ru Group никогда не был пользовательским. Люди в повседневной жизни встречались не с самой Mail.ru Group, а с ее активами — в виде продуктов под разными брендами. Например, вели переписку в почте Mail.ru, заказывали доставку в Delivery Club, общались ВКонтакте и в Одноклассниках — не подозревая о том, что это продукты одной компании.

Реальную картину восприятия иллюстрирует этот гениальный твит:

Я против монополий, поэтому вместо сервисов Яндекса пользуюсь аналогами от небольших независимых компаний

Вместо Я.Лавки — Самокат
Вместо Я.Музыки — BOOM
Вместо Я.Объявлений — Юла
Вместо Я.Практикума — Skillbox и GeekBrains
Вместо Я.Такси — Ситимобил
Вместо Я.Еды — Delivery Club
Даже в реплаях не все поняли, что это ирония и все сервисы справа принадлежат одной компании

Шутки шутками, но стало очевидно, что нам нужен сильный пользовательский бренд, который объединит под собой все наши проекты.При этом еще два года назад мы начали строить экосистему вокруг бренда VK: запустили единую систему авторизации VK ID (бывший VK Connect), платежный сервис VK Pay и программу лояльности VK Combo, параллельно интегрируя наши сервисы между собой.

Почему VK? VK знают все. А еще нас любят подростки — cреди поколения Z мы самые узнаваемые и популярные. К тому же как бренд VK универсален: люди уже решают любые запросы с помощью соцсетей — общаются, слушают музыку, смотрят видео, играют, учатся, продают и покупают. Поэтому нам не придется менять потребительские привычки пользователей.

Но компания по-прежнему называлась Mail.ru Group. И вот примерно год назад мы твердо решили, что бренд VK пора масштабировать и на всю компанию. Так началась работа над глобальным ребрендингом. В помощь мы привлекли международную консалтинговую компанию Saffron Brand Consultants.

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

Визуальный язык

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

Кроме того, система должна опираться на основные визуальные константы существующего бренда социальной сети — а это логотип, синий цвет и фирменный шрифт VK Sans.

<i>Визуальные константы бренда ВКонтакте к началу работ по ребрендингу</i>
Визуальные константы бренда ВКонтакте к началу работ по ребрендингу

Мы понимали, что нельзя просто закрасить все синим, а шрифт без поддержки других приемов едва ли справился бы с задачей. Как ни крути, но нашей самой сильной константой являлся наш логотип — монограмма, образованная слиянием букв V и K. Очевидно, что для разработки визуального языка единого бренда нужно было так или иначе опираться именно на нее.

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

Первую версию мы разработали совместно с Saffron Brand Consultants. Затем монограмма претерпевала изменения в руках дизайнеров нашей команды — в общей сложности мы отрисовали более 160 версий, но все еще не были довольны результатом.

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

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

Убедившись в том, что путь на упрощение формы и заострение геометрии монограммы в целом верный, мы выбрали самую близкую к идеалу версию и решили перепроверить ее с точки зрения типографики. Для этого обратились к профильным экспертам (и одновременно разработчикам нашего крутого фирменного шрифта VK Sans) — студии TypeType.

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK

Новая монограмма стала геометричнее, сбалансированнее и современнее. Мы отказались от «клюва» на центральном стеме в пользу большей типографичности: теперь V и K, стоящие в основе символа, считываются более явно. К тому же так знак выглядит чище даже в небольших размерах. Помимо формы, мы также слегка обновили цвет — синий стал более ярким и заметным.

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

Айдентика бренда VK

Имея в арсенале обновленный геометричный фирменный знак, мы приступили к разработке корпоративной айдентики совместно с Saffron Brand Consultants.

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

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK

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

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK
  • Монолинейный — с утонченной монограммой, которая подчеркивает геометрию знака. Этот прием делает макет легким и воздушным, не перегружая его графикой. Монолинейный подход хорошо работает там, где нужен явный брендинг, но контент нужно вывести на первый план.
  • Монографичный — с плотной монограммой, обеспечивающей явный брендинг любого макета. Если главная задача — дать понять, что это коммуникация от VK, то выбираем монографичный подход.
  • Монодинамичный — с системой паттернов из частей монограммы, которые визуально повторяют эффект Доплера (мы называли этот подход призматроном ). Он самый яркий и вариативный, годится для графичного брендинга любых поверхностей. Нужно застолбить графикой пространство? Паттерны идут в бой.
<i>Декомпозируем монограмму и собираем паттерны из ее частей</i>
Декомпозируем монограмму и собираем паттерны из ее частей

Мы расширили основную палитру — синий по-прежнему остается основным цветом, но теперь его равноправно дополняют еще пять цветов (без учета базовых белого, черного и серого).

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK

Динамичные паттерны в сочетании с яркой палитрой компенсируют строгость формы обновленной монограммы.

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK

Основным шрифтом остался фирменный VK Sans — наша команда разработала его в прошлом году вместе со студией TypeType для айдентики соцсети. Мы активно использовали его в коммуникациях: оформлении сообществ, рекламных кампаниях и моушен-дизайне. Кроме того, им набираются все логотипы. За год VK Sans стал неотъемлемой частью визуальной идентичности ВКонтакте — и теперь наследуется и в новом визуальном языке всей компании.

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK

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

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK
Митя Осадчук
Креативный директор компании VK

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

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

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK

Под корпоративной айдентикой будет выходить вся коммуникация VK как компании: от внешней (например, оформление мероприятий и пабликов в соцсетях) до внутренней (мерч для сотрудников, брендинг сообществ внутрикома и активностей для команды).

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK
«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK

Айдентика суббрендов

Теперь все новые продукты компании будут сразу создаваться под брендом VK. Поэтому, кроме общей айдентики, в рамках ребрендинга нужно было разработать подход, который поможет создавать фирменные стили для суббрендов VK.

Требования к подходу мы сформулировали так:

  • визуально суббренд должен считываться как часть VK;
  • суббренд должен наследовать корпоративную айдентику;
  • айдентика каждого суббренда должна быть достаточно уникальной, чтобы отвечать его позиционированию и решать его задачи (а у всех продуктов они разные).

В конечном счете задача сводилась к поиску баланса между единообразием и уникальностью — то есть между визуальными константами и переменными. Эту задачу мы решали совместно со студией Tigers Moscow.

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

  • Система логотипов

Единообразие: все логотипы строятся по единому принципу — из иконки и текстовой части, набранной фирменным шрифтом VK Sans Display.

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK
  • Иконка

Единообразие: иконки отрисовываются в общей концепции — это цветная форма на синей подложке с белыми контурными элементами.

Уникальность: у каждого суббренда иконка обладает собственной метафорой, которая отрисовывается в акцентном цвете суббренда.

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK
  • Палитра

Единообразие: палитра каждого суббренда состоит из двух цветов. Один из них — фирменный синий, второй — из расширенной общей палитры VK.

Уникальность: акцентный цвет у каждого суббренда свой.

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK
  • Паттерны

Единообразие: система построения паттернов наследуется от корпоративной айдентики, все паттерны имеют схожую структуру, динамику и наклон элементов.

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

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK
  • Типографика

Единообразие: во всех своих материалах используем наш фирменный шрифт VK Sans.

  • Иллюстрации

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

  • Графический прием

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

Возможно, звучит сложно — лучше посмотрите на примерах.

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK

На примерах можно видеть, что графическим приемом для VK Знакомств стал градиент, для VK Почты — строук, а для VK Работы — блочность. Таким образом, паттерны деформируются под конкретный продукт, но все еще работают по общей системе, которая наследуется от корпоративного бренда.

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

VK Знакомства

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK

VK Работа

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK

VK Почта

«Мы выбираем синий»: глобальный ребрендинг Mail.ru Group в VK

VK Музыка

Виталий Цыганков
Tigers Moscow

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

Это и привлекает нас в подобных проектах — мы одновременно разрабатываем не один, а несколько уникальных брендов, где строительным материалом является общая ДНК.

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

Этот проект по ребрендингу — самый масштабный по объему и интенсивный по времени из того, что с нами случалось.

Митя Осадчук
Креативный директор VK

Теперь нет разделения на отдельные бренды для сотрудников, для профессиональной среды и для пользователей наших сервисов. Есть один бренд — с необходимой долей вариативности, которая дает свободу всем проектам экосистемы VK и одновременно позволяет им оставаться консистентными. Но самое важное, что произошло, — это объединение смыслов.

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

Над визуальным языком в рамках ребрендинга работали:

VK Team

Виолетта Силенина

Митя Осадчук

Марина Антоненко

Миша Лихачев

Ирина Каширина

Мария Федосеева

Илья Куликов

Константин Капустин

Артем Олещенко

Павел Князев

Алексей Мазелюк

Лера Литовченко

Saffron Brand Consultants — логотип и корпоративная айдентика

Fernando Ortiz Ehmann

Gabor Schreier

Anna Tyurina

Студия TypeType — логотип

Юлия Гонина

Иван Гладких

Юрий Наконечный

Виктор Рубенко

Денис Васильев

Студия Tigers Moscow — айдентика суббрендов

Виталий Цыганков

В проекте участвовали ещё очень многие. Без вас ничего бы не получилось. Всем большое спасибо!

8888
99 комментариев

Мне нравится, хороший редизайн получился. И Кремлёвский ласточкин хвост прослеживается.

48

согласен совершенно, закругленная v становится u

8

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

28

У ВАС. УЖАСНЫЙ. ЛОГОТИП.
Я не дизайнер, не могу объяснить профессиональным языком.
Поэтому как вижу: в нем нет системы. Это логотип, нарисованный от руки.
Вот что это за угол? Как его можно описать языком цифр?

10

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


<b>Внимание, анекдот!</b>

Путешествовал по миру меткий стрелок. В какой бы город он не заезжал, в стрельбе из лука он был самый лучший. Равных ему не было во всём мире.

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

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

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

— Очень просто, на самом деле нет ничего сложного, — отвечает юный стрелок. — Я выбираю удобную стену. И стреляю в ту, которая мне понравилась. А затем подхожу и вокруг стрелы рисую мишень.

53