Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Вк логотип: как мы обновляли логотип и фирменный стиль ВКонтакте — ВКонтакте на vc.ru

как мы обновляли логотип и фирменный стиль ВКонтакте — ВКонтакте на vc.ru

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

35 128 просмотров

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

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

Этой системой логотипов мы пользовались до сегодняшнего дня

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

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

Виолетта Силенина, бренд-директор

С чего мы начали

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

  • фирменный знак — иконка VK;
  • фирменный синий цвет;
  • текстовое написание — ВКонтакте;
  • шрифт.

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

Возвращаясь к истокам: обновлённый логотип

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

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

Новый полный логотип ВКонтакте

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

Так новый логотип будет выглядеть в интерфейсе сайта и в мобильном приложении

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

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

Павел Князев, директор по дизайну

Фирменный шрифт

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

Шрифт VK Sans

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

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

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

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

Иван Гладких, студия TypeType

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

Правки-правки-правки

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

Юлия Гонина, студия TypeType

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

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

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

Вторую версию — VK Sans Text — мы представим чуть позже. Его можно будет увидеть в интерфейсах продуктов экосистемы ВКонтакте.

Графические приёмы

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

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

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

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

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

Так выглядит «Флип»

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

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

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

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

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

Обновлённый дизайн сайта vk.com

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

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

Команда проекта

ВКонтакте

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

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

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

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

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

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

Оформление группы вк. Логотип, иконки, шапка, баннеры за 2 500 руб., исполнитель Артур (Buzz_Creator) – Kwork

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

Buzz_Creator