Назад в будущее: как мы обновляли логотип и фирменный стиль ВКонтакте
Мы начали первый в нашей истории масштабный ребрендинг. Рассказываем, зачем ВКонтакте понадобилось обновлять визуальный язык и как мы это делали.
В далёком 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 (фирменный стиль)
Виталий Цыганков, дизайн-директор
Юрий Негребецкий, директор по стратегии
В проекте участвовали ещё очень многие — и его бы не случилось, если бы не их труд. Всем большое спасибо!
Редизайн?
Подкорректировали логотип. Поменяли цвет верхней панели. Шрифт.
Сижу и смотрю на 27ми дюймах в 1080р.
Слева огромное пустое поле. Справа огромное пустое поле. Хоть что-то находится на 1/3 экрана. Левое меню не прикрепляется и ускользает под верхнюю панель. Панельки справа размером с экран телефона. Основной контент (посты в ленте группы в данном случае) - 1/4 экрана.
Что нужно было изменять? Есесьна самые проблемные места! Лого, цвет, шрифт.
Остальное идеально.
Вот не понимал всегда тех, кто жалуется на то, что контент центрирован. Ну растянули бы вам враппер на все 1080 так, как выглядели форумы в 2000-х. Что дальше? Публикации будут ростом в 80 пикселей, а текст читать с одного конца экрана, на другой. А картинки? Тоже их растягивать? Уф
Комментарий недоступен
Ничего ты не понимаешь. скоро там появится реклама. Доказано FB :0)
Так в чем проблема зажать CTRL и покрутить колесико мыши, тем самым увеличив масштаб сайта?
То ли дело Фейсбук и Твиттер. Там всё совсем по-другому!
Да разве это интересно?
Расскажите как вы гос органам данные передаете :)
Настолько удачно, что органы передают эти данные пробивщикам, достаточно иметь некое количество кеша в кармане и можно читать почти кого угодно.
Отрадно, что в любой теме про ВК такие комментарии собирают много лайков. Репутация есть репутация.
да как все, хома
Тем временем приложение ВК под айпад последний раз обновлялось три года назад. Хоть что-то стабильное в этом океане безумия
Комментарий недоступен
Но старая система комментов там напрягает
Комментарий недоступен
И это пример нормального ребрендинга, который не вызывает дискомфорта, и в то же время заметен и со временем станет привычным с остальной айдентикой
Хорошо выглядит, когда боковое меню вверху, но когда оно проскраливается наверх, цветной логотип снова привлекает внимание и отвлекает от контента.
Я подумал о примерно такой решении, просто как вариант. При наведении становится снова цветным.
Поддерживаю
Тоже поддержу пожалуй.
Если ещё и темную тему завезёте, будет вообще замечательно.
Пока только все моды этим редизайном убили
И-инновации
Комментарий недоступен
"уникальная форма иконки"?? Чем? Скругленными краями как у каждой второй иконки?)
Слишком скучно, даже не позлорадствуешь
Есть такое.
Посмотрите, как же поголубел контакт при Алишере Бурхановиче
Комментарий удален модератором
Комментарий удален модератором
Переделайте приложение для iPad пожалуйста
Изменили левую панель и немного шапку. Ни темной темы, ни обновления основной контентной части.
ВК как автопроизводители. Меняют фары, решетку радиатора и кричат о ПРИНЦИПИАЛЬНО НОВОЙ МОДЕЛИ.
Позор.
В дизайне меняют то, что плохо работает. Надо уже умнеть
Спасибо, что без градиента
без коли иронова
Сбер 🗿
Комментарий недоступен
"И так сойдёт" - основа всех сервисов Павла Дурова. Так что всё норм.
Как мне однажды ответили в тех.поддержке Вконтакте: "Так было задумано"
Сначала стену верните, потом поговорим
Перестал вк пользоваться примерно с того же времени, когда дуров ушел оттуда и все к мэйл.ру перешло. Сколько это? Лет 5 назад или больше?Сейчас раз в месяц захожу, входящие проверить. То ли актуальность прошла, то ли когда стену убрали всё по пизде пошло. Не знаю.
П.С. Ограничение по количеству времени прослушивания музыки - вообще днище, просто гвоздь в крышку гроба.
Я с вк ушёл, когда прокатилась волна штрафов и посадок за мемы и прочие "экстремистские материалы" и тогда же стало известно, что вк сливает данные силовикам и никак не способствует защите приватности. После этого поставил на нём крест. Но, нужно сказать, и объективной надобности нет. Сетка для школоты, только время терять.
нет чтоб форкнуть вк под брендом icq и за год отказаться от вк вовсе -
они опять проебли момент.
шанс потерян еще на 10 лет.
вк их уже не переживет.
голубенький млять добавили.
майла, хуле
А я думал у меня браузер глючит, выдавая в строке на логотипе этот говно-синий цвет. Казалось бы пол тона туда, пол тона сюда, а уже вырви глаз
Комментарий недоступен
Комментарий удален модератором
Комментарий удален модератором
Комментарий удален модератором
В 2020 ещё кто-то заходит в контакт?
Да
Впервые не раздражает обновление дизайна, а больше и не надо — сайт и так удобный. В отличие от богомерзского приложения, которое не имеет своего голоса, так как разработчики не знают какой еще тренд воткнуть.
Один вопрос: нахрена переименовали «сообщения»?
Как обычно украли идею у Фейсбук месенджер
На сайте можно вернуть сообщения через дополнение для браузера VK Messages Label Return
Шрифт гротеск, обсолютно ничем не отличается от подобных
Лучше бы букву В вернули. Нынешний логотип в сочетании с кириллической надписью вызывает диссонанс
Вроде как хочется сказать, что скучно, хотелось бы новый логотип вместо бессмысленного и беспомощного текущего — но глядя на то, насколько остро люди реагируют на такие кардинальные изменения как переименование "сообщений" в "мессенджер" и замену оттенка синего становится понятно, что даже этот редизайн был смелым шагом.
Поддерживаю, обновите версию для айпада, несерьёзно для такой крупной и технологичной компании
опять с фейсбука слизали, просто СТЫД
Сделайте что-нибудь с пользователями, повысьте ретеншн, например. Есть ещё очень сырое приложение для айпада. Больше нечего делать, кроме как менять лого?
Вы сейчас это кому говорите, дизайнерам?
Дуров сейчас смотрит эту страницу - инфа 100. Павлик, здравствуй, дорогой
Эпол - пидоры! Паша - кросавчег!
А что с английским вариантом? А на других языках? В примерах на фигме этого нет.
А и не будет. Зачем иностранцам ВК?
Комментарий удален модератором
Айпад!
когда можно будет выбрать в настройках стили дизайна? я бы с удовольствием вернул дизайн года 2009-2012.
Никогда
Взяли оттенок синего который ещё больше походит на Фейсбук. Колоссальная работа, что
Одни дизайн директоры вокруг.
Комментарий недоступен
Комментарий недоступен
Расскажите подробнее о том, как вы обновили приложение для iPad
Не зря вспомнили про надпись ВКонтакте. А то как-то совсем неприлично
Еда - работа - такси - еда - работа - такси - еда...
Вы дали ответ на фундаментальный вопрос бытия.
Комментарий недоступен
Хорошо получилось, удивили)
До чего же убог символ совмещенных VK.
Поздравляю, степень «мэйлрушности» (читай, г0вна) в дизайне повысилась.
Дурова на вас нет.
Соглашусь с теми, кто недоволен цветом: он стал слишком ярким.
Комментарий недоступен
Дайте возможность настраивать вкладку сервисы (отключать всякую ненужную шляпу) и также весь нижний бар (не всем нужна кнопка тиктока). Речь про приложение смартфонов. Поддержка молчит везде, может хоть тут заметят пожелания.
Отличный дизайн!
Круто, мне нравится
Комментарий удален модератором
Больше похоже на замо́к, чем на портфель (ассоциация с работой), а замо́к в вебе обычно ассоциируется с защитой, приватностью и т.п.
В общем, несчитываемая иконка, можно спутать.
ВКонтакте напоминает пожилого артиста, который пытается молодиться, чтобы не растерять аудиторию. Да сделайте какой угодно логотип, все равно аудитория и рекламодатели уходят в Тикток, Инстаграм, Ютуб и т.д.
ВК обречён быть вечно догоняющим, копирующим, повторяющим чужие фишки.
А еще можно убрать иконки в левом меню и сделать дизайн тем самым легче и приятнее на овер 9999%
Мне нравится, все круто. А вон всегда идёт от нечистот
А размер интерфейса так и не увеличили. Приходится сидеть на 110 — 125 %
Да, на 4к боль
Дизайн хороший, но английского варианта нет, а значит на запад забили и похоронили все мечты Дурова.
А он сам их не похоронил в момент ухода из Вконтакте?
Классно, только шрифт очень напоминает БУШЕ
Интересная работа.
Кто может скинуть этот шрифт VK Sans Display
Пожалуйста
Комментарий удален модератором
vk.com/brand ВКонтакте а вы по другим ссылкам из шапки этой страницы переходили? почему обновили только эту страницу? неужели была такая дикая потребность побыстрее выкатить?
Когда вижу такие статьи на VC, всегда думаю, "кому до этого есть дело, как вы меняли логотип?! ну сменили и все. Событие блин."
Я бы вк посоветовал заняться обновлением раздела видео. Со времён Дурова ничего не меняли, а как же конкурировать с ютуб? Такой тренд упускаете. Руки бы оторвать тому кто занимается этим разделом, такую экономическую выгоду упускает компания. С такой большой аудиторией могли бы стать русским ютубом. А вы все под тик ток косите вымрет тикток через пару лет как и все предыдущие площадки типо кубы, вайны это всего лишь тренд, а вот ютуб надолго
Несмотря на то, что чего-то кардинального ВКшники не сделали (ну реально ребят, название добавили и цвет эмблемы откорректировали), но тем не менее выглядит неплохо.
В целом стало лучше. А то как то приелось все. Стало современнее. Да дизайн смотрится хорошо. Вот бы черный цвет ещё. Вообще было бы замечательно. А то на светлом фоне как-то не айс. В телефоне стало шикарно с темной темой. Так что ждём дальнейших новшеств от ВК.
Краткое содержание статьи: куча людей с прогрессивными должностями пытаются доказать, что они занимаются очень полезным трудом.
Это всё конечно круто, но когда уже будет официальная тёмная тема на десктоп? Пользуюсь расширением, и не понимаю почему вы это ещё не реализовали?
Как был знак Г. в лого, так и остался.
Все прекрасно, но измените фавикон с пнг на свг.
Оптимизируйте, плиз, под Safari. Откровенно дерьмово работает, особенно видео и музыка. Да и сообщения. Постоянные лаги. В Safari уже несколько лет не полностью воспроизводятся голосовухи.
Можно просто не сливать переписку силовикам ? Спасибо
Мне не нравится этот синий цвет!!!
Увы Деградирует:
Группы переименовали в Сообщества и часто путал с Сообщениями
теперь назвали месенджер, мода тупая пошла, никакой это не месенджер !
клипы и тд ... мэйл помойка, имхо
Мне лично такси и еда в вк не нужны и использовать не буду, не знаю как многим, но наверное по примеру мобайла пойдет. Музыку не послушать теперь бесплатно , а покупать я тут не буду(лучше в других сервисах ), это уже чисто привычка, с тех пор когда было много не легальных, плюс люди шарили, названия трека одно песня внутури другая, разная длина композиции и тд короче была помойка музыки , зато бесплатно, теперь увы нет.
удаляю ..
Опираясь на эти страницы vk.com/privacy?eu=1, vk.com/privacy/cookies и vk.com/terms как резидент EU я достаточно долго вел переписку с поддержкой по поводу удаления моих данных (GDPR) с серверов ВК.
Причиной были все эти непонятные случаи с обвинением пользователей по поводу фотографий и постов. Кое как удалили, ну или пообещали.
Ссылки на фото я сохранил и вот после года ожидания проверил снова - фотки открываются!
Ну что вконтакте, на законы EU плюем, а товарищу майору все на тарелочке.
Какие последствия ждут компанию в европе если такие случаи будут задокументированны т.н. data protection officer
Дизайн, визуально, графика...
Да поработайте вы уже над доступностью для слепых, над accessibility! Вы обещаете, откладываете на завтра и ничего блин не делаете! Да, начали улучшать сообщения в iOS. И всё? А дальше? А остальные сервисы? Кнопки Удалить на iOS не работают, кнопка ещё в аудио плеере перестала работать, состояние кнопки вкл или выкл показывать моё имя только получателю при отправки подарка тоже перестало озвучиваться. Фото без описания так и не доступно для Voiceover, При нажатии на текст записи в новостях он не открывается, при нажатии Нравится, Комментарий или Поделиться, если смахивать жестом Voiceover вправо,, может выкинуть или наверх, или вообще открыться другая вкладка.
Дизайн, визуально, графика...
Да поработайте вы уже над доступностью для слепых, над accessibility! Вы обещаете, откладываете на завтра и ничего блин не делаете! Да, начали улучшать сообщения в iOS. И всё? А дальше? А остальные сервисы? Кнопки Удалить на iOS не работают, кнопка ещё в аудио плеере перестала работать, состояние кнопки вкл или выкл показывать моё имя только получателю при отправки подарка тоже перестало озвучиваться. Фото без описания так и не доступно для Voiceover, При нажатии на текст записи в новостях он не открывается, при нажатии Нравится, Комментарий или Поделиться, если смахивать жестом Voiceover вправо,, может выкинуть или наверх, или вообще открыться другая вкладка.
Комментарий удален модератором
А шрифты эти в креативах в соцсети можно легально юзать всем?
Дурной пример заразителен )
Обновление дизайна фейсбука недавнее прям порадовало и темная тема там появилась, а у vk похоже пошла деградация, чем дальше — тем хуже, похоже дизайнер немного уснул в каршеринге делимобиль — проснулся и так получился от туда этот цвет, а все остальное, интерфейс, все стало в разы проще смотреться и дешевле, жалко смотреть как это место загибается
В свете пандемии стоило бы избавиться от слова ВКОНТАКТЕ. А то Такси ВКОНТАКТЕ, Работа ВКОНТАКТЕ. Новая реальность, нам так сказали и с этим жить дальше.
"Мы освежили синий цвет логотипа"
Вы убили его нахуй, дебилы
Место:
- ВТакси
- ВЕде
- ВЗдоровье
Сделали:
- такси ВКонтакте
- Еда ВКонтакте
- Здоровье ВКонтакте
У вас было все... Вот ток одни МайлРу Групп. Другие Эппл...