Как развивалась команда моушен-дизайна ВКонтакте

О пути в профессию, проектах и фокусе на интерфейсе.

Привет! Меня зовут Саша Афанасьев. Сейчас я руковожу командой моушен-дизайна ВКонтакте, а до этого несколько лет добавлял движения платформе в одиночку. Недавно нашей команде исполнился год: это повод оглянуться, оценить свои успехи и поделиться планами.

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

Долгое время моушен-дизайном ВКонтакте занимался я один. Потом ко мне присоединились Саша Марьин и Саша Качура (да, у нас команда Саш!), а с этого года нас стало ещё больше. Кроме того, моушен-дизайнеров нанимают в крупные команды: свои специалисты уже есть в VK Клипах и маркетинге. Для маркетинга это возможность получить ещё больше симпатий пользователей. По результатам исследования Animoto, 77% человек считают, что компании, которые используют видео в коммуникациях, более вовлечены во взаимодействие с аудиторией.

У всех нас разные истории поиска себя в индустрии.

Например, я вообще учился на разработчика — а анимацией начал заниматься, когда играл в КВН. Для конкурсов со смешным монтажом снимал всё подряд на видео и собирал из этого ролики. Позже проекты, сделанные по фану, помогли устроиться на первую серьёзную работу — моушен-дизайнером на ТВ. А в 2018 году я увидел вакансию в сообществе VK Designers. Мне сразу сказали, что она экспериментальная. Предстояло не только соединять 2D и 3D, но и стать мостиком между маркетингом и продуктом.

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

А Саша Качура писал сценарии для видео. Если собрать просмотры всех роликов, которые он придумал, получится несколько сотен миллионов. Со временем он понял, что работать с дизайном ему интереснее, чем быть сценаристом. Начал изучать туториалы и участвовать в разных проектах, собрал портфолио — и устроился ВКонтакте.

Что может сделать моушен-дизайнер? «Всё, везде и сразу».

А если подробнее:

И это лишь несколько примеров.

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

В последнее время мы стали больше двигаться в сторону «оживления» интерфейса — в приложении ВКонтакте и отдельных приложениях сервисов, например, VK Музыки. Пользователям важно получать ответ на свои действия, видеть подсказки для более простой навигации, чувствовать эмоциональное вовлечение. И для всего это мы добавляем движение — иконкам, модальным окнам, баннерам и не только.

Мы разделяем анимации в интерфейсе на три больших блока:

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

Обычно эти анимации незаметны, но без них пользователю станет тревожнее. Это форма обратной связи — намёк, что действие было распознано платформой.

2. Структурные

Это анимации, которые сопровождают человека при переходе в новый раздел. Здесь мы делаем акцент на том, что платформа поменяла состояние, и просим человека обратить на это внимание.

Часто элементы меняют свои размеры и саму структуру происходящего на экране. Например, как в нашем концепте вкладки сообществ, который можно увидеть ниже: пользователь «проваливается» в подразделы.

Такой тип чаще относится к нативным анимациям, но мы работаем и над своими вариантами.

3. Эмоциональные

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

Прямо сейчас Саша Марьин работает над анимацией для приложения VK Музыка.

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

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

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

Чтобы встроить анимацию в приложение, мы используем векторный формат Lottie. Благодаря этому анимации весят немного, легко масштабируются и быстро меняют цвет в зависимости от того, какая тема выбрана у пользователя: светлая или тёмная.

У Lottie есть открытая библиотека анимаций. Необязательно работать с профессиональными программами для видеомонтажа вроде Adobe After Effects, чтобы добавить анимацию в приложение. Мы тоже постепенно собираем свою библиотеку, которую в скором времени прикрутим к открытой дизайн-системе VKUI. Кстати, наши коллеги по департаменту дизайна уже делились её компонентами.

Редизайн профиля ВКонтакте — одно из самых крупных обновлений прошлого года. И мы решили рассказать о нём в движении: согласно исследованию Wyzowl, 73% человек предпочли бы посмотреть короткое видео, чтобы узнать подробности о продукте. Изменений было много, и мы хотели показать, как всё это работает и какую пользу может принести.

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

Мы в движении показали все новинки, которые могли вызывать вопросы, максимально подробно, шаг за шагом.

Исследования показали, что ознакомительные ролики с анимацией досматривают 75% пользователей. Но что ещё важнее, они начинают быстрее находить то, что искали.

В нашей специальности нужно уметь делать всё (а ещё везде и сразу, да).

Я советую изучить:

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

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

Искать работу мечты можно не только на сайтах для рекрутмента, но и в тематических сообществах — вот пример. И всё же самый действенный способ — мониторить вакансии на сайте желаемого работодателя и писать ему напрямую. В команде моушен-дизайна ВКонтакте пока нет вакансий, как только появятся, мы сразу же поделимся новостями: team.vk.company/vacancy.

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

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

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

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

Главное в работе моушен-дизайнера — постоянно обучаться новому. Нам до сих пор встречаются задачи, которые не решить с ходу, приходится идти и смотреть туториалы. И это (давайте хором) нормально. А ещё мы периодически ставим задачи сами себе — чтобы драйвить новые направления для развития.

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

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