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

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

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

Александр Афанасьев

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

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

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

Это наш шоурил с самыми крутыми проектами. Включайте, чтобы посмотреть на красоту!

Что ещё за моушен-дизайнеры ВКонтакте?

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

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

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

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

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

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

Где используется моушен-дизайн?

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

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

  • создать красивый имиджевый ролик, который сопроводит статью или запись в соцсетях, — согласно опросу Levels Beyond survey, 40% человек скорее посмотрят видео бренда, чем будут читать ту же информацию;
  • анимировать презентацию, чтобы спикер увлёк зрителей своим выступлением;
  • подсветить продуктовый запуск в историях ВКонтакте;
  • предложить идеи для сторителлинга — например, придумать персонажа, который пользуется новым сервисом, и наглядно показать, как он решает свои проблемы.

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

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

А так мы рассказывали о новинках в профиле: об обложке, лаконичных вкладках с контентом и быстрой публикации записей в одно нажатие

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

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

  1. Функциональные

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

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

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

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

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

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

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

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

Разные типы анимации — разные подходы к работе: в одном случае в центре удобство и функциональность, в другом — эмоции и развлечение

Анимация в VK Музыке

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

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

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

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

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

<p><i>В работе над проектом мы используем авторский подход: слушаем VK Музыку, пока анимируем VK Музыку </i></p>

В работе над проектом мы используем авторский подход: слушаем VK Музыку, пока анимируем VK Музыку

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

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

Движение для обучения пользователя

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

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

Онбординг — это процесс адаптации пользователя к продукту

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

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

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

Главное, как и с любым инструментом, не злоупотреблять. Иначе растёт риск перегрузить интерфейс лишним визуальным шумом и отвлечь пользователей от главного.

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

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

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

  • графический пакет Adobe;

  • редакторы Cinema 4D и Blender;
  • Octane Render и Redshift;
  • специальные программы — Marvelous Designer, Moho, Substance 3D Painter.

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

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

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

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

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

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

В моей практике был любопытный случай. Дизайнер думал, что нам требуется специалист по работе с 2D-персонажами: привык к таким заказам от крупных компаний. На этом он и сделал упор в своём портфолио.

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

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

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

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

Так наш дизайнер Костя Матусяк выполнил задание на креатив, которое мы сформулировали внутри команды

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

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

5353
15 комментариев

Комментарий недоступен

1
Ответить

Для иллюстрации статьи выбран очень странный рисунок. (Первый кадр в видеоролике) На рисунке изображен мужчина в кепке с хлопушкой. У мужчины мощные ручищи, большие бицепсы, и очень тонкая шея. Бывает что на иллюстрациях пропорции у персонажей неправильные. Есть на свете вымышленная страна тонкошеих и большеруких где все люди такие. Но тут мужик один.
Дальше сам персонаж предельно упрощен и примитивен. Это частный художественный прием. Но у него складки на рубашке очень натуральные. Странное сочетание.
Верю, что в команде ВК люди сами к себе будут относиться критичнее.

1
Ответить

Обновите железо в серверах, пожалуйста! Тормозит на разных ПК(

Ответить

Чую это все моушен-дизайн. Походу налепили "новых технологий" в ненужные места на веб-страницу и оно все работает так себе в браузере.

1
Ответить