Как я учился преподавать: мой опыт создания модуля по анимации интерфейсов

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

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

Как я попал в авторы

Как-то на корпоративную почту пришло письмо от продюсера курса Нетологии. Команда собирала образовательный проект по UX/UI-дизайну и искала студии с подходящей экспертизой. Меня позвали выступить приглашённым автором и записать блок про анимацию интерфейсов.

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

Команда нашла наше агентство по портфолио, изучила работы и написала. У меня было несколько созвонов с ними: они рассказывали, что предстоит делать, и уточняли, потянем ли мы такой объём. Дальше мы уже обсуждали нюансы работы.

Изначально все записи планировали делать в Москве, а обитаю я в Сибири, поэтому университет взял на себя все командировочные расходы: команда купила билеты, предложила варианты жилья и организовала съёмку.

Как проходила работа по подготовке курса

Мне передали материалы, которые подготовила команда аналитиков. Они изучают, какие темы нужно давать студентам в каждом блоке программы. Заодно мне показали внутреннюю структуру урока — она должна быть общей для всех модулей. Каждое занятие начинается с теории, которую я разбираю на реальных примерах, и в конце даю практическую часть. По этой схеме я и собирал информацию.

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

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

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

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

Мы это решили двумя способами:

1. Простое и короткое движение я сделал гифкой;

2. Сложный эффект с переходами и таймингами записывал отдельным роликом. Монтажёры добавляли эти фрагменты в готовую запись урока поверх слайда.

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

К моменту, когда я закончил с подготовкой, у меня уже был готов 21 час теоретического материала.

Как я готовил базовые уроки анимации и задания со звёздочкой

Практическую часть я решил выстроить на одном проекте. Подумал, в каком интерфейсе можно собрать максимум вариантов анимации и взаимодействий. Так я придумал вымышленный «ОченьБанк», нарисовал для него мобильное приложение и сам же его проанимировал. Получился полигон, где я мог показывать разные методы анимации на одном и том же интерфейсе.

Студент переходил от урока к уроку, повышая скилл. Базовые блоки показывали простую анимацию — как сделать скролл, настроить карусельку и добавить лёгкую инерцию движению. Затем добавлялись параллакс и анимация самих объектов внутри ProtoPie: например, большой элемент при касании уменьшается, а при отпускании возвращается к исходному размеру. Отдельный блок был про встраивание готовой анимации: 3D-иконки и домик с экрана ОченьБанка я заранее собрал в Blender, превратил в видео и вставлял их в ProtoPie уже как часть интерфейса.

Самые сложные блоки были про переменные и условия, как раз поэтому я и выбрал ProtoPie. На тот момент основной альтернативой был Principle, но в переменные он не умел, а в ProtoPie с ними можно было наворачивать что угодно.

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

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

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

Этот приём я взял из своих прошлых наработок. Несколько лет назад мы делали сайт для спортивного центра с бассейном в центре города. Весь дизайн крутился вокруг образа воды. На главной я сделал отслеживание курсора — при наведении на карточку расходились те же круги, только реакция была на движение мышки. Для практики в курсе я перенёс эффект в ProtoPie и переделал его под мобильный интерфейс, где срабатывал тап.

Все мои задумки в практической части вышли на 41 час. Это был самостоятельный кусок работы, который я собирал уже после того, как закрыл теоретическую программу.

Как я записывал уроки в студии университета

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

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

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

В здании университета есть большой холл с диванчиками, оттуда можно попасть в десятки студий для записи курсов. То есть одновременно можно записывать разных экспертов. Я всё время работал в одной и той же комнате, в которой был стол, ноутбук, свет, камера и задник.

На фото ниже я в фирменной футболке Нетологии — по какой-то причине моя чёрная не подошла, и мне выдали свою, тоже чёрную. Я приезжал на запись, переодевался, отрабатывал смену и сдавал футболку обратно. К концу съёмок попросил подарить её мне: слишком много часов мы провели вместе. Подарили.

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

Как я перезаписывал часть курса удалённо

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

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

С камерой было два варианта:

• первый — снимать видео отдельно на iPhone, звук записывать на микрофон, а потом монтировать всё вместе;

• второй — обычная вебка, но нормальной у меня не было, только встроенная в ноутбук.

Поэтому команда прислала курьером Logitech C922. Я забирал камеру, записывал урок и возвращал оборудование тому же курьеру — и так было несколько раз. Под конец мы с ним начали здороваться как старые друзья.

Записывать пробовали через сервис типа Zoom, который предложила команда: открываешь сайт, к тебе все подключаются и начинается запись. Так мы записали несколько уроков, а потом выяснилось, что на видео поехал весь звук.

Тогда мы поменяли подход: созванивались в Zoom с куратором и продюсером, а запись урока я вёл через OBS. Это программа, которая позволяет записывать экран и веб-камеру одновременно. В углу кадра было моё лицо с веб-камеры, а в основной части — экран с ProtoPie или с тем, что я в этот момент показывал.

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

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

Если самолёты пролетали тихо, я говорил дальше и проверял с командой, попал ли гул в дорожку: если попал — делал дубль.

Что я понял про себя и для себя

В этот проект я шёл как практик, который привык работать руками и объяснять некоторые методы команде. Но за время курса я выяснил, что опыт можно подавать по-разному.

• Рабочий приём нужно уметь разобрать словами. Когда долго чем-то занимаешься, многие приёмы собираются на автомате. А в учебном модуле студенту нужно понять, как этот результат был достигнут. На курсе я впервые проговаривал сам для себя, как работает тот или иной метод, собирается эффект и по каким шагам.

• Камера — это отдельный квест. До курса я думал, что для записи достаточно просто хорошо знать материал. На студии оказалось, что говорить на камеру — это совершенно другой навык. Его нужно осваивать только на практике, не боясь разговаривать и полноценно объяснять.

• Я заново посмотрел на свою работу. То, что раньше я показывал на пальцах и делал по наитию, теперь могу разложить по шагам с готовыми примерами. И сам стал внимательнее: то, что объяснить сложно, обычно и в работе собрано как-то не так. После курса я заметил, что мне стало проще объяснять решения дизайнерам в команде.