ВКонтакте: десять лет в одной рамке
Досье № 03 · История российского интерфейса
Редкий случай, когда ранняя оболочка продержалась почти десятилетие, а первый большой редизайн пришлось проводить сразу на всех экранах и сценариях.
- Период
- 2006—2017
- Главы
- 5
- Кадры
- 10
Содержание
Пять поворотов в истории проекта
Глава 1 · 2006—2016
Оболочка на десять лет
Первая версия была настолько сдержанной, что могла постепенно принимать новые функции без ежегодной смены фасада.Глава 2 · 2016
Первая большая перестройка
Новый интерфейс меняет ширину и ритм сразу во всех разделах, а не перекрашивает один главный экран.Глава 3 · 2016—2017
Один язык на разных устройствах
Похожесть платформ строится на отношениях элементов, а не на попытке уместить десктоп в телефон.Глава 4 · 2017
Библиотека вместо стопки макетов
После редизайна главным объектом работы становится не страница, а система повторяющихся решений.Глава 5 · 2017
Соцсеть становится медиа
Музыка, фотографии и подборки требуют более выразительных экранов, чем ранний справочник контактов.Визуальная хроника
Десять подтверждённых кадров
Закрытый справочник студентов
Первая страница объясняет саму идею социальной сети и предлагает вход, регистрацию и короткую экскурсию.
Редакция iPhones.ru; интерфейс — ВКонтактеИсточник: 17 лет ВКонтакте: ретроспектива интерфейса ↗Новая страница профиля
Широкая сетка рассчитана на современные мониторы, но сохраняет знакомую синюю шапку и левую навигацию.
Команда ВКонтактеИсточник: Новый дизайн ВКонтакте ↗Лента после перестройки
Записи получают больше воздуха, изображения — больше площади, а список диалогов и служебные блоки уходят на периферию.
Команда ВКонтактеИсточник: Новый дизайн ВКонтакте ↗Фотография в отдельном слое
Просмотрщик сохраняет контекст страницы, затемняет фон и отдаёт основную площадь изображению и обсуждению.
Команда ВКонтактеИсточник: Новый дизайн ВКонтакте ↗Единый масштаб на устройствах
Настольный и мобильный интерфейсы начинают говорить на одном языке, хотя сценарии и плотность у них различаются.
Команда ВКонтактеИсточник: Новый дизайн ВКонтакте ↗Иконки как общий алфавит
Набор пиктограмм фиксирует толщину линии, радиусы и узнаваемые метафоры для десятков продуктовых команд.
Команда дизайна ВКонтактеИсточник: VK by design ↗Библиотека компонентов
Цвета, поля, списки и состояния собраны рядом: дизайн перестаёт храниться в отдельных макетах.
Команда дизайна ВКонтактеИсточник: VK by design ↗Мобильные паттерны
Одни и те же отношения — навигация, карточка, действие — переводятся между платформами без буквального копирования.
Команда дизайна ВКонтактеИсточник: VK by design ↗Лента как семейство состояний
Разные ширины и типы записи показываются вместе, чтобы изменения проверялись не на одном идеальном примере.
Команда дизайна ВКонтактеИсточник: VK by design ↗Медиа внутри социальной сети
Музыка и подборки получают собственный визуальный характер, не выпадая из общей системы навигации.
Команда дизайна ВКонтактеИсточник: VK by design ↗








