Назад в будущее: как мы обновляли логотип и фирменный стиль ВКонтакте

Мы начали первый в нашей истории масштабный ребрендинг. Рассказываем, зачем ВКонтакте понадобилось обновлять визуальный язык и как мы это делали.

В далёком 2006-м всё начиналось с соцсети. С тех пор ВКонтакте выросла в полноценную экосистему сервисов в одном привычном приложении. Сегодня в нём можно делать практически всё: общаться с друзьями и слушать музыку, покупать вещи и заказывать еду, вызывать такси и искать работу. Расширяя возможности для пользователей, мы запускаем множество новых проектов. Все они должны говорить с аудиторией на понятном и едином визуальном языке, который при этом работал бы и на их цели.

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

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

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

У ВКонтакте уже был текстовый логотип — знакомая каждому конструкция возвышалась в шапке на каждой странице сайта.

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

Мы освежили синий цвет у иконки и добавили к ней текстовый блок: название ВКонтакте, набранное новым фирменным шрифтом. Просто и стильно.

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

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

Шрифт задаёт тон общения с пользователями, помогает сформировать эмоциональную связь, повысить доверие и узнаваемость. Для нас также важно, чтобы он развивал стиль и облик бренда именно так, как бы нам хотелось.

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

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

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

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

Так появился наш новый фирменный шрифт VK Sans. Он будет существовать в двух вариациях — акцидентный Display и интерфейсный Text.

Основная цель VK Sans Display — коммуникация. Будем использовать его в оформлении наших сообществ, рекламных кампаниях, моушн-дизайне и иногда в интерфейсах — там, где нужно усилить бренд или сделать акцент на каком-то элементе. Вторую версию — VK Sans Text — мы представим чуть позже. Его можно будет увидеть в интерфейсах продуктов экосистемы ВКонтакте.

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

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

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

Мы решили создать дополнительные уникальные графические приёмы, которые бы прослеживались на уровне этих групп. За помощью обратились в студию Tigers Moscow.

Для сервисов разработали приём «Флип». Он визуализирует новый опыт, который люди получают, переключаясь с привычных функций ВКонтакте на новые возможности: например, вызов такси или заказ еды. Графически этот переход можно изобразить как перелистывание флип-часов.

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

Собственным графическим приёмом обзавелись и аудиторные направления. Его мы назвали «Шифт». Коммуникация разделяется по категориям пользователей — их много, и мы показываем это, дублируя очертания иконки ВКонтакте. Эти контуры накладываются, сближаются и сменяют друг друга. Так мы демонстрируем, что каждый может переключаться с одной роли на другую.

В основе графических приёмов лежит уникальная форма иконки ВКонтакте — она стала дополнительной визуальной связкой для всех продуктов и направлений.

Дизайн-систему уже применили для нескольких сервисов — например, «Еды ВКонтакте» и «Такси ВКонтакте». В планах — перевести все продукты и направления платформы на новый визуальный язык.

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

Новое оформление версии для десктопа постепенно появится у всех пользователей. А прямо сейчас оценить его могут 100 тысяч добровольцев — для этого нужно включить обновлённый дизайн в настройках профиля на сайте vk.com.

А для всех, кто использует логотип ВКонтакте в работе, мы подготовили новую страницу ресурсов бренда. Её можно найти по ссылке vk.com/brand.

ВКонтакте

Виолетта Силенина, бренд-директор
Павел Князев, директор по дизайну
Илья Гришин, руководитель дизайна суперприложения
Артём Олещенко, дизайнер-технолог
Марина Антоненко, дизайнер
Михаил Лихачёв, руководитель продуктового дизайна
Алексей Мазелюк, ведущий дизайнер
Иван Барышев, старший дизайнер

Студия TypeType (фирменный шрифт)

Юлия Гонина, арт-директор
Иван Гладких, технический директор
Юрий Наконечный, техническая команда
Виктор Рубенко, техническая команда
Денис Васильев, аккаунт-менеджер

Студия Tigers Moscow (фирменный стиль)

Виталий Цыганков, дизайн-директор
Юрий Негребецкий, директор по стратегии

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