Анимация интерфейсов — востребованный скил, который открывает перед веб-дизайнерами «дверь» в современные проекты с высокими чеками. В этом материале мы вместе с профильным экспертом разберём, как начинающему и практикующему дизайнеру интерфейсов научиться анимировать сайты и приложения без кодинга, и порекомендуем к изучению качественные платные и бесплатные материалы.
Зачем учиться анимировать интерфейсы
Нынешних пользователей уже не впечатляют статичные картинки на сайтах и в приложениях, в тренде — интерактивность и моушен-графика. Мигающий курсор при вводе текста, изменение цвета кнопки после её нажатия или затемнение фона при выводе всплывающего окна — всё это анимация, которая делает сайт удобным и дружелюбным к юзеру.
Если вы хотите быть на одной волне с мировыми веб-дизайнерами, сотрудничать с крупными заказчиками и создавать дорогие проекты — пора расширить компетенции и добавить в резюме навык анимации интерфейсов.
Мы связались со старшим UX/UI-дизайнером Школы программистов МШП Артуром Юсуповым и попросили его поделиться с нашими читателями мнением о роли анимации в веб-дизайне.
Веб-разработчики могут создавать анимацию и с помощью кода CSS, но в этой статье мы сконцентрируемся на дизайнерах, которые не занимаются кодингом. Рассказываем, где начинающим и практикующим дизайнерам получить прикладные знания по анимации интерфейсов.
«Как эксперту выйти на стабильные 100 000 ₽/мес» На продаже своих услуг без всякого «наставничества»
Получить план
Подборка онлайн-курсов по анимации интерфейсов
Осваивать UX/UI-анимацию с нуля или восполнять пробелы в знаниях веб-дизайна приходите на онлайн-курсы под крыло профессиональных дизайнеров. Чтобы помочь вам с выбором, мы уже изучили предложения разных образовательных платформ и отобрали лучшие из них.
В топ попали профильные программы веб-анимации и комплексное обучение по направлению «дизайн интерфейсов». Курсы мы сопроводили ёмкими описаниями — оставили только самое важное.
Вы освоите приложение для создания анимированных интерактивных прототипов сайтов Principle на MacOS, разберёте реальные кейсы из практики дизайн-студии AIC и сможете самостоятельно анимировать интерфейсы: делать их нативными и «живыми»
Продолжительность. 2 месяца
Что в программе. Вы узнаете, как с помощью инструментов и драйверов Adobe After Effects анимировать переходы между экранами сайта и разные элементы интерфейса: кнопки, иконки, карточки и др.
Итоги обучения. В конце курса вас ждёт несколько проектов: создание веб – анимации для лендинга и разработка ролика-видеопрезентации
Авторский курс анимации интерфейсов, в ходе которого вы под руководством профессиональных моушен-дизайнеров «проживёте» весь процесс создания UI-анимации: от установки и настройки необходимых программ до презентации и продвижения своих работ на Dribbble и Behance
Продолжительность. 4 месяца
Что в программе. Вы узнаете, на каких принципах базируется веб – анимация, и научитесь анимировать текст, объекты, цвет и контуры фигур в Adobe After Effects. Вы поймёте, как создавать анимацию появления, вращения, масштабирования, параллакс и др., и сможете объединять эффекты в комплексные сцены с переходами и сменой слайдов. По всем практическим работам преподаватели дадут обратную связь во время онлайн- и видеоразборов
Итоги обучения. Курсы по After Effects ценны практикой: вы подготовите 24 анимационных шота и разместите их на Dribbble и Behance
Курс будет полезен и новичкам в анимации, и опытным веб-дизайнерам, которые хотят добавить в копилку навыки анимации интерфейсов.
Обучение не растянуто по времени — занимает всего 4 месяца. На курсе вы разберёте базовые модели анимации в веб-дизайне, на практике освоите After Effects и сделаете первые шаги в анимации интерфейсов
Вы на реальных примерах и практике разберёте возможности и инструменты для создания анимации в программе Adobe After Effects
Продолжительность. 4 месяца
Что в программе. Вы поймёте, как настраивать рабочее пространство, устанавливать необходимые плагины и создавать и редактировать проекты в Adobe After Effects. Вы научитесь анимировать текст, инфографику, двухмерных персонажей и 3D-объекты и грамотно проводить рендер сцен. Вы также освоите инструмент для видеомонтажа — программу Adobe Premiere PRO
Итоги обучения. Вы закрепите умения на домашних заданиях и соберёте работы в анимационный ролик
Вы научитесь создавать не просто красивый веб-дизайн, а удобные с точки зрения пользователя интерфейсы с 3D-графикой и анимацией. Своим опытом со студентами поделится дизайн-агентство Cuberto
Продолжительность. 6 месяцев
Что в программе. В течение первых 3 месяцев вы будете учиться создавать прототипы сайтов в Figma и совершенствовать их юзабилити. Затем вы погрузитесь в разработку дизайн-концепций и узнаете, как добавлять на сайты 3D-графику из Blender и анимировать тот или иной элемент интерфейса в Adobe After Effects
Итоги обучения. Вы поймёте, как составлять мотивационные письма, портфолио и резюме и грамотно выстраивать рабочие процессы в отношениях с клиентами. Вы выполните 5 работ для портфолио и выпускной проект — сайт для реального заказчика, который может пригласить вас на работу. Из документов школа выдаст диплом о профпереподготовке и сертификат
Программа охватывает целый комплекс тем: от создания прототипов сайтов в Tilda и Figma до разработки трёхмерной графики в Cinema 4D и анимации интерфейсов в Adobe After Effects и Principle
Продолжительность. 11 месяцев
Что в программе. Вы разберётесь, как проектировать дизайн мобильных и веб-ресурсов с учётом принципов UX и адаптивности, научитесь внедрять в интерфейсы 3D-графику и анимировать логотипы, страницы и переходы между ними
Итоги обучения. Вы прокачаете портфолио и личный бренд, а эйчары проконсультируют по карьерным вопросам
Фундаментальная программа для тех, кто хочет пройти путь в веб-дизайнеры с самого начала и получить диплом о профпереподготовке
Продолжительность. 12 месяцев
Что в программе. Вы начнёте обучение с азов цифрового дизайна и типографики и узнаете, как исследовать поведение пользователей и работать с векторной и 3D-графикой. Вы научитесь проектировать детализированные прототипы веб-приложений и анимированный интерфейс для них. Вы добавите в резюме владение инструментами Figma, Tilda, Invision, After Effects, Illustrator и Photoshop
Итоги обучения. Для закрепления навыков вы разработаете несколько проектов, самый крупный из которых — прототип веб-портала. Вы сможете выбрать оптимальный для себя путь развития карьеры и потренироваться в прохождении интервью с работодателем
Вопросы из зала
Вместе с экспертом разобрали несколько вопросов от читателей.
— Чем моушен-дизайн отличается от анимации интерфейсов?
Ответ подготовил наш эксперт — профессиональный киберпсихолог и дизайнер интерфейсов Артур Юсупов.
Моушен-дизайн — это полноценные графические сюжеты, которые, помимо графики, включают в себя видео и аудио. Моушен-дизайн имеет широкое представление: от анимированных иллюстраций и заставки прогноза погоды до 3D-моделирования графиков в бизнес-презентациях и арт-инсталляций на выставке.
Анимация в интерфейсе имеет прикладную специфику, как гласит название, и ограничена правилами поведения элементов в интерфейсе и техническими возможностями в реализации
— Чтобы заниматься анимацией интерфейсов, обязательно быть веб-дизайнером?
Спросили у эксперта — вот что Артур нам ответил.
К сожалению, без знания основ, правил и ограничений в веб-интерфейсах нельзя разработать анимацию. Курсы по веб-дизайну и анимации можно изучать последовательно: сперва веб-дизайн, а потом анимацию. Или же делать это параллельно — в зависимости от возможностей
— Почему я должен доверять вашему выбору курсов?
Поясним, как мы выбирали курсы для этой статьи.
Сначала мы провели ресёрч — нашли узкопрофильные программы и комплексные курсы веб – дизайна, в которые входит блок уроков по анимации интерфейсов. Таких курсов набралось 17 штук.
Потом детально проанализировали содержимое программ: темы и формат уроков, объёмы практики, опыт преподавателей и др. Из всего списка мы отобрали 6 прикладных программ, где студентов учат не просто «пользоваться» тем или иным инструментом, а использовать его для решения конкретных рабочих задач.
Особое внимание мы уделили наличию обратной связи и практических проектов в программе. Считаем, что профессиональное сопровождение студента на всём образовательном пути и качественные кейсы для портфолио — главные преимущества онлайн-курсов перед самообучением.
Теперь вы можете решить, совпадают ли наши с вами взгляды на качественное онлайн-образование и стоит ли прислушиваться к рекомендациям Checkroi.
— Зачем отдавать деньги онлайн-школе, если всю информацию можно нагуглить бесплатно?
Студенты идут на онлайн-курсы по разным причинам: у кого-то сложности с самодисциплиной, кому-то не хватает системных знаний в веб-дизайне, а кто-то хочет подтвердить свои умения документом об образовании.
Мы в Checkroi за осознанный подход к обучению, поэтому всем студентам рекомендуем сначала оценить свои знания и возможности и ознакомиться с доступными в интернете материалами, а потом, с пониманием дела и сформированным запросом, выбирать школу и курс. Или не выбирать — решаете только вы.
В следующем разделе мы как раз поделимся бесплатными уроками, как сделать анимацию на сайте — оставайтесь на связи.
Бесплатные уроки по анимации интерфейсов
Анимация интерфейсов — узкопрофильный навык, поэтому полноценных обучающих материалов в интернете не так уж много. Собрали информацию по крупицам и подготовили для вас мини-подборку с бесплатными ресурсами по теме:
- основы Adobe After Effects от «Нетологии» — на видеоуроках и практических заданиях вы разберёте инструментарий редактора и научитесь создавать и анимировать текст и 3D-объекты, удалять из кадра ненужные элементы и заменять фон;
- бесплатный курс по анимации интерфейсов и UI-дизайну от UxJournal — хороший текстовый курс из 4 глав: вы узнаете об истоках, принципах и характеристиках UX/UI-анимации и поймёте, как выстроена работа над созданием анимации в крупных компаниях: Google, Headspace и др. Оригинальный материал размещён на сайте InVision Studio в формате гайда на английском языке;
- уроки анимации в Figma от Сергея Чиркова — 9 видеоуроков о том, как создавать микроанимацию интерфейсов с помощью «умной анимации» в Figma;
- начальный курс по Principle от Move It — за 10 коротких роликов вы узнаете, как импортировать проект из Figma или Sketch в Principle, создать несколько видов базовых анимаций и подготовить файлы к экспорту из программы;
- UI анимация в After Effects от Projector — полуторачасовая запись воркшопа, на котором пользователь рассмотрит азы работы в After Effects для web – design.
Помимо обучения и многочасовой практики, не забывайте тренировать насмотренность: приходите вдохновляться на Dribbble, Behance, Awwwards и другие креативные платформы.
Коротко о главном
Владение анимацией интерфейсов и программами для её создания — нужные навыки для любого веб-дизайнера. Умение работать в нескольких направлениях и с разными инструментами повышает вашу стоимость на рынке труда, сулит больше интересных проектов и полезных знакомств. Да и при прочих равных, работодатель всегда остановит выбор на претенденте с большим набором скилов.
В этой статье мы собрали полезные материалы и проверенные онлайн-курсы по созданию анимации в интерфейсах, которые станут отличным подспорьем для вашего профессионального роста!
При взаимодействии с компьютером, ноутбуком, смартфоном или фотокамерой с цифровым экраном постоянно требуется обратная связь от системы: нажали ли мы на кнопку, обрабатываются ли наши данные, загрузился ли файл. Здесь на помощь приходит анимация в интерфейсе: иконка сердечка бьётся при добавлении в избранное, окно плавно закрывается при клике на кнопку «Закрыть», бегущая полоса показывает прогресс загрузки файла и др.
Анимация в интерфейсе может не только давать обратную связь, но и вызывать эмоциональный отклик у пользователя, удивляя игрой форм и элементов.
К анимации в интерфейсе можно подойти с двух сторон: через код — в программе Framer X, например, используется язык программирования CoffeeScript, или через программы, ориентированные на дизайнеров — After Effects или Principle