Как развивалась команда моушен-дизайна ВКонтакте
О пути в профессию, проектах и фокусе на интерфейсе.
Александр Афанасьев
Руководитель команды моушен-дизайна ВКонтакте
Привет! Меня зовут Саша Афанасьев. Сейчас я руковожу командой моушен-дизайна ВКонтакте, а до этого несколько лет добавлял движения платформе в одиночку. Недавно нашей команде исполнился год: это повод оглянуться, оценить свои успехи и поделиться планами.
Рассказываю, какие задачи решает команда моушен-дизайна ВКонтакте (всё, везде и сразу) и откуда она вообще взялась — делюсь наглядными кейсами, раскрываю профессиональные тайны и показываю красивое.
Это наш шоурил с самыми крутыми проектами. Включайте, чтобы посмотреть на красоту!
Что ещё за моушен-дизайнеры ВКонтакте?
Долгое время моушен-дизайном ВКонтакте занимался я один. Потом ко мне присоединились Саша Марьин и Саша Качура (да, у нас команда Саш!), а с этого года нас стало ещё больше. Кроме того, моушен-дизайнеров нанимают в крупные команды: свои специалисты уже есть в VK Клипах и маркетинге. Для маркетинга это возможность получить ещё больше симпатий пользователей. По результатам исследования Animoto, 77% человек считают, что компании, которые используют видео в коммуникациях, более вовлечены во взаимодействие с аудиторией.
У всех нас разные истории поиска себя в индустрии.
Например, я вообще учился на разработчика — а анимацией начал заниматься, когда играл в КВН. Для конкурсов со смешным монтажом снимал всё подряд на видео и собирал из этого ролики. Позже проекты, сделанные по фану, помогли устроиться на первую серьёзную работу — моушен-дизайнером на ТВ. А в 2018 году я увидел вакансию в сообществе VK Designers. Мне сразу сказали, что она экспериментальная. Предстояло не только соединять 2D и 3D, но и стать мостиком между маркетингом и продуктом.
Саша Марьин работал в театре — это его страсть. Но и к диджиталу его тянуло с самого детства. После нескольких поставленных спектаклей и творческих кризисов он пришёл в моушен и обнаружил здесь сочетание технологий и искусства, которое так долго искал. Начал прокачивать скиллы, набираться опыта и после нескольких попыток попал в команду ВКонтакте.
А Саша Качура писал сценарии для видео. Если собрать просмотры всех роликов, которые он придумал, получится несколько сотен миллионов. Со временем он понял, что работать с дизайном ему интереснее, чем быть сценаристом. Начал изучать туториалы и участвовать в разных проектах, собрал портфолио — и устроился ВКонтакте.
Никто из нас не ожидал, что когда-то будет работать ВКонтакте: казалось, это только для разработчиков. Внутри команды мечты мы стали первопроходцами — с нами появилось новое направление.
Где используется моушен-дизайн?
Что может сделать моушен-дизайнер? «Всё, везде и сразу».
А если подробнее:
- создать красивый имиджевый ролик, который сопроводит статью или запись в соцсетях, — согласно опросу Levels Beyond survey, 40% человек скорее посмотрят видео бренда, чем будут читать ту же информацию;
- анимировать презентацию, чтобы спикер увлёк зрителей своим выступлением;
- подсветить продуктовый запуск в историях ВКонтакте;
- предложить идеи для сторителлинга — например, придумать персонажа, который пользуется новым сервисом, и наглядно показать, как он решает свои проблемы.
И это лишь несколько примеров.
Моушен-дизайн помогает просто говорить о сложном, так как сочетает в себе сразу несколько составляющих: движение, звук, историю и — что важно — изображение. Через видео легче объяснять запутанные концепции и процессы, чем, например, в статье. Всё потому, что мозг лучше воспринимает визуальную информацию: на это ему требуется всего 13 миллисекунд, что показывает исследование Массачусетского технологического института.
В последнее время мы стали больше двигаться в сторону «оживления» интерфейса — в приложении ВКонтакте и отдельных приложениях сервисов, например, VK Музыки. Пользователям важно получать ответ на свои действия, видеть подсказки для более простой навигации, чувствовать эмоциональное вовлечение. И для всего это мы добавляем движение — иконкам, модальным окнам, баннерам и не только.
Мы разделяем анимации в интерфейсе на три больших блока:
- Функциональные
Это анимации, которые повышают удобство использования продукта. Например, иконка подтверждения, которую видит человек при авторизации ВКонтакте. Она помогает, бегло взглянув, убедиться, что всё в порядке, нет никаких проблем с входом в соцсеть.
Обычно эти анимации незаметны, но без них пользователю станет тревожнее. Это форма обратной связи — намёк, что действие было распознано платформой.
2. Структурные
Это анимации, которые сопровождают человека при переходе в новый раздел. Здесь мы делаем акцент на том, что платформа поменяла состояние, и просим человека обратить на это внимание.
Часто элементы меняют свои размеры и саму структуру происходящего на экране. Например, как в нашем концепте вкладки сообществ, который можно увидеть ниже: пользователь «проваливается» в подразделы.
Такой тип чаще относится к нативным анимациям, но мы работаем и над своими вариантами.
3. Эмоциональные
Самый заметный и любимый пользователями тип анимаций. Он развлекает и вызывает эмоциональный фидбэк. Может быть ярким дополнением, которое мотивирует совершить полезное действие: перейти по ссылке, скачать, прослушать.
Разные типы анимации — разные подходы к работе: в одном случае в центре удобство и функциональность, в другом — эмоции и развлечение
Анимация в VK Музыке
Прямо сейчас Саша Марьин работает над анимацией для приложения VK Музыка.
Треки и мелодии — это про ритм и движение, а ещё про эмоции. Моушен-дизайн сильно на них влияет, и это заложено в нас биологически: он захватывается боковым зрением и поэтому вызывает реакцию, даже когда мы этого не осознаём.
Анимация текста уже в проде, на очереди — иконки в панели вкладок. Остальное готовится к запуску и совсем скоро дойдёт до пользователей
Наши коллеги провели внутреннее исследование, которое показало, что большинству пользователей нужны тексты треков в VK Музыке. Это действительно важная часть эмоциональной связи между слушателем и исполнителем.
Но мы сразу поняли, что не остановимся на анимации одного элемента. Так что дополнительно добавили движения иконкам в плеере, панели навигации, окну распознавания трека. Всё это нужно для того, чтобы пользователи быстро и логично переключались между разными элементами — и могли приятно погружаться в музыку.
В работе над проектом мы используем авторский подход: слушаем 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. В итоге дизайнер показал шоурил с трёхмерными концептами, зацепил нас и стал частью команды ВКонтакте.
Обычно уже с первого собеседования становится понятно, подходит ли нам кандидат. Но чтобы понять, насколько он сам заинтересован в работе, мы даём тестовое задание.
Это ролик в стилистике ВКонтакте, где нужно повторить флоу простого действия в соцсети: например, отправки видеосообщения или подарка. Но есть нюанс — макетов мы не даём. Смотрим на то, что придумает дизайнер: постарается ли соответствовать гайдам или удивит свежим видением. Особенно пристально приглядываемся к тому, есть ли ошибки в интерфейсе, а ещё понимает ли человек, как работает фича и с какой стороны её лучше подсветить.
Главное в работе моушен-дизайнера — постоянно обучаться новому. Нам до сих пор встречаются задачи, которые не решить с ходу, приходится идти и смотреть туториалы. И это (давайте хором) нормально. А ещё мы периодически ставим задачи сами себе — чтобы драйвить новые направления для развития.
Когда-то мы удивлялись, что ВКонтакте нашлось место моушен-роликам. А теперь видим, какие огромные возможности открывает анимация интерфейса. Особенно на такой большой платформе.
Впереди ещё много работы, и у нас грандиозные планы — так что это только начало.
За исключением некоторых автомобилей.
Чаще всего говоря о личном бренде, говорят о развитии своего сайта и социальных сетей. Это в общем понятно, и в данной публикации обратимся к конкретике с примером. Пример будет своего рода иллюстрацией, для наглядности.
«VK пользуются все: и подростки, и пенсионеры. И среди них много платёжеспособных людей. Им можно продать почти любой продукт, если работать вдолгую: заинтересовывать, прогревать, отвечать на вопросы, напоминать о себе». — Рассказывает клиент рекламной экосистемы Vitamin.tools, возвращающей до 18% от пополнения рекламы, маркетолог Кирилл Чарушин.
Выжимка заявлений главы банка со звонка с аналитиками и инвесторами.
26-летнего россиянина задержали осенью 2024 года в Португалии в ходе масштабной операции американских спецслужб против мошенничества на крипторынке.
OpenAI развернула функцию Deep Research для всех подписчиков ChatGPT Plus. Илон Маск сделал Grok 3, включая функцию DeepSearch, бесплатным для всех пользователей X. Стоит ли вкладывать деньги в подписку ChatGPT или Grok 3 может справиться с теми же задачами бесплатно? Выясняем.
Заодно пошутили, что устройству уготовано место рядом с «умной» брошью от Humane.
Комментарий недоступен
Для иллюстрации статьи выбран очень странный рисунок. (Первый кадр в видеоролике) На рисунке изображен мужчина в кепке с хлопушкой. У мужчины мощные ручищи, большие бицепсы, и очень тонкая шея. Бывает что на иллюстрациях пропорции у персонажей неправильные. Есть на свете вымышленная страна тонкошеих и большеруких где все люди такие. Но тут мужик один.
Дальше сам персонаж предельно упрощен и примитивен. Это частный художественный прием. Но у него складки на рубашке очень натуральные. Странное сочетание.
Верю, что в команде ВК люди сами к себе будут относиться критичнее.
Обновите железо в серверах, пожалуйста! Тормозит на разных ПК(
Чую это все моушен-дизайн. Походу налепили "новых технологий" в ненужные места на веб-страницу и оно все работает так себе в браузере.