Назад в будущее: как мы обновляли логотип и фирменный стиль ВКонтакте
Мы начали первый в нашей истории масштабный ребрендинг. Рассказываем, зачем ВКонтакте понадобилось обновлять визуальный язык и как мы это делали.
В далёком 2006-м всё начиналось с соцсети. С тех пор ВКонтакте выросла в полноценную экосистему сервисов в одном привычном приложении. Сегодня в нём можно делать практически всё: общаться с друзьями и слушать музыку, покупать вещи и заказывать еду, вызывать такси и искать работу. Расширяя возможности для пользователей, мы запускаем множество новых проектов. Все они должны говорить с аудиторией на понятном и едином визуальном языке, который при этом работал бы и на их цели.
До недавнего времени мы создавали визуальный стиль каждого продукта, исходя именно из его задач, а связью с основным брендом ВКонтакте служила лишь система логотипов.
С чего мы начали
Любая систематизация начинается с анализа и определения принципов. При работе с таким обширным наследием, как у ВКонтакте, важно вычленить действительно необходимые составляющие дизайн-языка и отбросить всё ненужное — иначе система не получится гибкой. Поэтому сначала мы определили элементы, комбинации которых позволяют создавать привязку ко ВКонтакте при работе с графикой:
- фирменный знак — иконка VK;
- фирменный синий цвет;
- текстовое написание — ВКонтакте;
- шрифт.
При этом на практике сильной привязкой ко ВКонтакте обладали только фирменный знак и синий цвет. Написание названия не было зафиксировано как самостоятельный графический элемент. А фирменный шрифт, который мы использовали ранее в коммуникационных материалах, — 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 (фирменный стиль)
Виталий Цыганков, дизайн-директор
Юрий Негребецкий, директор по стратегии
В проекте участвовали ещё очень многие — и его бы не случилось, если бы не их труд. Всем большое спасибо!
Изменили левую панель и немного шапку. Ни темной темы, ни обновления основной контентной части.
ВК как автопроизводители. Меняют фары, решетку радиатора и кричат о ПРИНЦИПИАЛЬНО НОВОЙ МОДЕЛИ.
Позор.
В дизайне меняют то, что плохо работает. Надо уже умнеть
Смена радиуса скругления какую проблему решает? Смена стиля иконок боковой панели какую проблему решает? Ладно когда люди открыли, что не обязательно всё делать дофига объёмным и перешли к плоскостям, но тут-то в чём смысол?
Ищи в тырнете "системное мышление"
Ответа нет, но болтать болтаешь.
Ты думаешь, что ты умнее, чем вся команда ВК в то время, как смена радиуса скругления и смена стиля иконок боковой панели создают тебе проблемы в количестве - 0 шт. Тут речь не об иконках, а об адекватности, я думаю
Опа, а вот и рабское мышление подъехало.
Генератор случайных умных слов