ARTHand История дизайна ВКонтакте: десять лет в одной рамке

ВКонтакте: десять лет в одной рамке

Досье № 03 · История российского интерфейса

Редкий случай, когда ранняя оболочка продержалась почти десятилетие, а первый большой редизайн пришлось проводить сразу на всех экранах и сценариях.

Период
2006—2017
Главы
5
Кадры
10

Содержание

Пять поворотов в истории проекта

Визуальная хроника

Десять подтверждённых кадров

У каждого кадра есть дата, автор и ссылка на публикацию. Изображения открываются во весь экран, чтобы детали интерфейса можно было рассмотреть без лишних технических пометок.
01

Закрытый справочник студентов

Первая страница объясняет саму идею социальной сети и предлагает вход, регистрацию и короткую экскурсию.

Редакция iPhones.ru; интерфейс — ВКонтактеИсточник: 17 лет ВКонтакте: ретроспектива интерфейса ↗
02

Новая страница профиля

Широкая сетка рассчитана на современные мониторы, но сохраняет знакомую синюю шапку и левую навигацию.

Команда ВКонтактеИсточник: Новый дизайн ВКонтакте ↗
03

Лента после перестройки

Записи получают больше воздуха, изображения — больше площади, а список диалогов и служебные блоки уходят на периферию.

Команда ВКонтактеИсточник: Новый дизайн ВКонтакте ↗
04

Фотография в отдельном слое

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

Команда ВКонтактеИсточник: Новый дизайн ВКонтакте ↗
05

Единый масштаб на устройствах

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

Команда ВКонтактеИсточник: Новый дизайн ВКонтакте ↗
06

Иконки как общий алфавит

Набор пиктограмм фиксирует толщину линии, радиусы и узнаваемые метафоры для десятков продуктовых команд.

Команда дизайна ВКонтактеИсточник: VK by design ↗
07

Библиотека компонентов

Цвета, поля, списки и состояния собраны рядом: дизайн перестаёт храниться в отдельных макетах.

Команда дизайна ВКонтактеИсточник: VK by design ↗
08

Мобильные паттерны

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

Команда дизайна ВКонтактеИсточник: VK by design ↗
09

Лента как семейство состояний

Разные ширины и типы записи показываются вместе, чтобы изменения проверялись не на одном идеальном примере.

Команда дизайна ВКонтактеИсточник: VK by design ↗
10

Медиа внутри социальной сети

Музыка и подборки получают собственный визуальный характер, не выпадая из общей системы навигации.

Команда дизайна ВКонтактеИсточник: VK by design ↗