Назад в будущее: как мы обновляли логотип и фирменный стиль ВКонтакте
Мы начали первый в нашей истории масштабный ребрендинг. Рассказываем, зачем ВКонтакте понадобилось обновлять визуальный язык и как мы это делали.
В далёком 2006-м всё начиналось с соцсети. С тех пор ВКонтакте выросла в полноценную экосистему сервисов в одном привычном приложении. Сегодня в нём можно делать практически всё: общаться с друзьями и слушать музыку, покупать вещи и заказывать еду, вызывать такси и искать работу. Расширяя возможности для пользователей, мы запускаем множество новых проектов. Все они должны говорить с аудиторией на понятном и едином визуальном языке, который при этом работал бы и на их цели.
До недавнего времени мы создавали визуальный стиль каждого продукта, исходя именно из его задач, а связью с основным брендом ВКонтакте служила лишь система логотипов.
Такой подход давал свободу, но не позволял формировать целостное восприятие всех продуктов ВКонтакте как единой структуры. Со временем стало понятно, что и сама старая система логотипов не всегда применима: у нас появлялись сервисы, которые нуждались в уникальной иконке. Назревала потребность в разработке гибкой и масштабируемой системы коммуникационного дизайна — и в итоге она стала необходимостью.
С чего мы начали
Любая систематизация начинается с анализа и определения принципов. При работе с таким обширным наследием, как у ВКонтакте, важно вычленить действительно необходимые составляющие дизайн-языка и отбросить всё ненужное — иначе система не получится гибкой. Поэтому сначала мы определили элементы, комбинации которых позволяют создавать привязку ко ВКонтакте при работе с графикой:
- фирменный знак — иконка VK;
- фирменный синий цвет;
- текстовое написание — ВКонтакте;
- шрифт.
При этом на практике сильной привязкой ко ВКонтакте обладали только фирменный знак и синий цвет. Написание названия не было зафиксировано как самостоятельный графический элемент. А фирменный шрифт, который мы использовали ранее в коммуникационных материалах, — TT Commons — не был уникальным: его могли использовать все желающие по лицензии. Поэтому в первую очередь мы решили усилить эти два элемента.
Возвращаясь к истокам: обновлённый логотип
У ВКонтакте уже был текстовый логотип — знакомая каждому конструкция возвышалась в шапке на каждой странице сайта.
Мы решили вернуть подобную практику в обновлённом виде — но не из-за ностальгии, конечно. На текстовое написание сделали ставку как на необходимый связующий элемент для всей системы: ведь нет более сильной привязки к бренду, чем его название. Осталось только дать ему достойное графическое воплощение.
Мы освежили синий цвет у иконки и добавили к ней текстовый блок: название ВКонтакте, набранное новым фирменным шрифтом. Просто и стильно.
Текстовое написание становится константой, на которой базируется новая система логотипов. Теперь в ней есть место и уникальной иконке, и цвету. Так мы обозначаем название продукта или направления, не теряя связи со ВКонтакте.
Несмотря на кажущуюся простоту решения, этот переход был далеко не простым для нас. В основе системы лежит название ВКонтакте, написанное кириллицей, а прежде мы долго использовали логотипы с латиницей. Но это нужный шаг: он задаёт вектор всей структуре продуктов на платформе, системе нейминга и визуального языка. Для пользователей такой подход упростит восприятие наших сервисов и прочно свяжет их со ВКонтакте. А ещё заложит основу для гибкой работы с цветом, иконками и фирменным стилем отдельных направлений — а это как раз то, чего мы добивались.
Фирменный шрифт
Важная составляющая новой системы — шрифт. Каким мы его видели? Узнаваемым, актуальным, современным, но главное — нейтральным. Чтобы этим шрифтом можно было набирать слова разных эмоциональных оттенков: как негативных, так и позитивных, — и все они смотрелись бы органично.
Шрифт задаёт тон общения с пользователями, помогает сформировать эмоциональную связь, повысить доверие и узнаваемость. Для нас также важно, чтобы он развивал стиль и облик бренда именно так, как бы нам хотелось.
Нашим основным шрифтом долго был TT Commons. Но он неэксклюзивен: любой человек или компания могли купить лицензию, скачать его и выглядеть как мы. Кроме этого, он не подходил для нескольких наших приложений, и мы не могли предоставить доступ к нему сторонним разработчикам на платформе VK Mini Apps. Решением всех этих проблем стал бы наш собственный шрифт.
Мы обратились за помощью к партнёрам из студии TypeType. Именно они разработали тот самый TT Commons, которым мы пользовались всё это время. Провели ряд встреч — обсуждали и складывали картинку того, каким должен быть фирменный шрифт.
На первом этапе мы сделали скетчи — и за несколько итераций, обсуждая идеи с дизайн-командой ВКонтакте, довели их до завершённого вида. Потом определились с тем, как будет выглядеть шрифтовое семейство, и занялись дорисовкой недостающих знаков. На завершающем этапе, когда графика была готова, сделали все остальные начертания, кернинг, добавили OpenType-фичи, сделали TrueType-хинтинг, провели тестирование и техническую проверку шрифтов.
Мы вносили много правок и постоянно совершенствовали шрифт: обсуждали радиусы скругления углов, срезы терминалов, добавляли и исключали конкретные символы.
Мы подробно обговорили с дизайн-командой ВКонтакте идею обновления их айдентики, какое место в ней будет занимать шрифт и какие задачи решать. Работая над акцидентной гарнитурой, мы учитывали, что в будущем может появиться её текстовая версия — и они должны будут гармонично сосуществовать. В итоге шрифт приобрёл разноширинные пропорции, косые срезы, заметные платформы на пересечениях диагональных элементов. Этого было достаточно, чтобы сделать шрифт привлекающим взгляд и узнаваемым, но при этом не слишком акцидентным.
Но даже со всеми дискуссиями мы уложились в дедлайн. Для многих компаний разработка собственных шрифтов растягивается на годы. Мы же, поняв важность и срочность задачи, справились за квартал — здесь есть чем гордиться. Шрифт уже поддерживает несколько ключевых для нас языков: русский, английский, украинский и белорусский. Планируем добавить больше.
Так появился наш новый фирменный шрифт VK Sans. Он будет существовать в двух вариациях — акцидентный Display и интерфейсный Text.
Основная цель VK Sans Display — коммуникация. Будем использовать его в оформлении наших сообществ, рекламных кампаниях, моушн-дизайне и иногда в интерфейсах — там, где нужно усилить бренд или сделать акцент на каком-то элементе. Вторую версию — VK Sans Text — мы представим чуть позже. Его можно будет увидеть в интерфейсах продуктов экосистемы ВКонтакте.
Графические приёмы
Новая система логотипов, собственный шрифт и обновлённый синий цвет — это константы нашего визуального языка. Теперь они лежат в основе фирменного стиля всех направлений и продуктов ВКонтакте.
Теперь, с собственным шрифтом, мы начинаем использовать типографику как самостоятельный узнаваемый элемент. Не боимся играть с формами и размерами. Типографика — широкое поле для экспериментов и самовыражения.
Внутри команды мы делим продукты и направления на несколько групп. Например, одна из них — это сервисы, которые можно найти на второй вкладке мобильного приложения. Другая — аудиторные направления, они созданы для коммуникации с разными категориями пользователей: создателями контента, владельцами бизнеса или разработчиками.
Мы решили создать дополнительные уникальные графические приёмы, которые бы прослеживались на уровне этих групп. За помощью обратились в студию Tigers Moscow.
Для сервисов разработали приём «Флип». Он визуализирует новый опыт, который люди получают, переключаясь с привычных функций ВКонтакте на новые возможности: например, вызов такси или заказ еды. Графически этот переход можно изобразить как перелистывание флип-часов.
При этом у любого сервиса появляется собственная форма и палитра. Они формируют уникальный для каждого проекта фирменный стиль: он наследует и общий графический приём группы, и визуальные константы основного бренда ВКонтакте.
Собственным графическим приёмом обзавелись и аудиторные направления. Его мы назвали «Шифт». Коммуникация разделяется по категориям пользователей — их много, и мы показываем это, дублируя очертания иконки ВКонтакте. Эти контуры накладываются, сближаются и сменяют друг друга. Так мы демонстрируем, что каждый может переключаться с одной роли на другую.
В основе графических приёмов лежит уникальная форма иконки ВКонтакте — она стала дополнительной визуальной связкой для всех продуктов и направлений.
Дизайн-систему уже применили для нескольких сервисов — например, «Еды ВКонтакте» и «Такси ВКонтакте». В планах — перевести все продукты и направления платформы на новый визуальный язык.
Обновлённый логотип ВКонтакте появится в свежем дизайне десктопной версии. Иконки здесь стали ярче и лаконичнее, а шапка сайта сменила синий цвет на белый. Выглядит знакомо, потому что дизайн приблизился к внешнему виду мобильного приложения VK. Теперь мы унифицируем оформление, чтобы на всех устройствах ВКонтакте выглядела похоже и узнаваемо.
Новое оформление версии для десктопа постепенно появится у всех пользователей. А прямо сейчас оценить его могут 100 тысяч добровольцев — для этого нужно включить обновлённый дизайн в настройках профиля на сайте vk.com.
А для всех, кто использует логотип ВКонтакте в работе, мы подготовили новую страницу ресурсов бренда. Её можно найти по ссылке vk.com/brand.
Команда проекта
ВКонтакте
Виолетта Силенина, бренд-директор
Павел Князев, директор по дизайну
Илья Гришин, руководитель дизайна суперприложения
Артём Олещенко, дизайнер-технолог
Марина Антоненко, дизайнер
Михаил Лихачёв, руководитель продуктового дизайна
Алексей Мазелюк, ведущий дизайнер
Иван Барышев, старший дизайнер
Студия TypeType (фирменный шрифт)
Юлия Гонина, арт-директор
Иван Гладких, технический директор
Юрий Наконечный, техническая команда
Виктор Рубенко, техническая команда
Денис Васильев, аккаунт-менеджер
Студия Tigers Moscow (фирменный стиль)
Виталий Цыганков, дизайн-директор
Юрий Негребецкий, директор по стратегии
В проекте участвовали ещё очень многие — и его бы не случилось, если бы не их труд. Всем большое спасибо!