Главное Свежее Вакансии Образование
18 165 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

12 бесплатных After Effects туториалов для UX-дизайнеров

Больше интересного у нас на канале: https://t.me/uxidesign . Они не научат вас всему, но расскажут об основных принципах и дадут вам хорошую основу для дальнейшего развития. Перевод статьи Jake Rocheleau.

b_59c0cd821e28c.jpg

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

Это все отлично смотрится в финальном проекте, но его не так-то просто сделать с помощью статического макета. Поэтому дизайнеры выбрали анимационные программы, такие как After Effects, для создания макетов, основой которых является движение.

Если вы пытаетесь изучить этот skillset, я настоятельно рекомендую эти бесплатные видеоролики на YouTube.

1. Button UI animated

b_59c0cd825c057.jpg

Этот очень короткий туториал по UI-анимации идеально подходит для начинающих с маленьким опытом работы с AE. Он требует некоторого терпения в работе с интерфейсом, но инструкции четкие и понятные.

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

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

2. Prototype motion

b_59c0cd82a0505.jpg

Еще одна простая анимация, которую вы можете сделать, - это сайдинг меню, как в этом видео. В нем рассказывается, как анимировать меню в After Effects и как работать с отдельными слоями в программном обеспечении.

Это довольно длинный туториал с 40-минутным пошаговым руководством. Но это стоит вашего времени, если вы сможете дойти до конца.

3. AE icon animation

b_59c0cd82e452c.jpg

Маленькие анимации иконок не добавят что-то интерфейсу, но они смогут улучшить UX. Эти движения значков относятся к тем небольшим микроинтерфейсам, о которых говорилось ранее.

И этот туториал по анимации иконок рассказывает о микроинтерминациях, давая простые указания. Вы даже можете скачать бесплатные иконки в формате PSD/AI и использовать их для анимации.

Но это также удобно для дизайнеров иконок, которые создают свои собственные значки с нуля и хотят оживить их для производства.

4. Animated UI/UX cursors

b_59c0cd8334ace.jpg

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

Если вы хотите добавить движения курсора к своим макетам, то этот туториал - для вас. Он довольно короткий, всего 15 минут, но информация тут является очень ценной и актуальной как для мобильных, так и для веб-дизайнеров.

5. Iphone UI app

b_59c0cd836e89a.jpg

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

Само по себе это может показаться не таким, поскольку люди знают, как выглядит сам процесс.

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

6. App page swipes

b_59c0cd83b21a6.jpg

Разработчики мобильных приложений могут использовать свайпы страниц для многопоточных интерфейсов. Они отлично подходят для галерей и для постраничных эффектов.

В этом кратком туториале вы узнаете, как создавать анимации для свайпов страниц с помощью After Effects, используя несколько существующих макетов. Это видео взято у UX in Motion, где можно найти еще тонну подобных туториалов и приватных воркшопов.

Тема движения UX не раскрыта широко в Интернете, но эти ребята являются одним из тех немногих, кто действительно вникает в детали. Просмотрите весь их канал на YouTube, если хотите узнать больше.

7. Jelly UI animations

b_59c0cd8401d37.jpg

Вероятно, вы видели странные liquid-jelly меню в приложениях для Android или даже просто в Интернете. Они не слишком распространены, потому что их трудно воссоздать в коде, но с помощью этого Jelly UI туториала вы можете создавать анимации с нуля.

Это еще одна халява от UX в Motion, длинной всего в около 5 минут.

Но вы узнаете много нового о After Effects и в общем о UX анимационном процессе. В частности, как импортировать вектора и работать с этими файлами на временной шкале, или вкратце - просто получите основы по работе с интерфейсом.

8. Unfolding animation

b_59c0cd8446162.jpg

Хотя я не могу сказать, что эта анимация напрямую влияет на интерфейс, это точно что-то классное, что можно добавить в логотип своего сайта. Unfolding анимации в основном используется в видеороликах для создания привлекательного визуального изображения.

Но веб-сайты могут тоже иметь похожие развернутые анимации, используя SVG-графику и основные JS-анимации.

Даже если вы не хотите создавать анимации логотипов, этот туториал может просто провести вас через рабочий процесс AE. Идеально подходит для изучения нового материала без особого стресса.

9. Basic UI prototype animations

b_59c0cd848b52a.jpg

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

Это сначала считаюсь частью приложения Path, но со временем переросло в популярный тренд для Android и iOS девайсов.

За это 20-минутное видео вы почерпнете новые идеи для анимации значков и дизайна меню. С этим довольно просто работать, и вы можете пользоваться предварительно разработанными значками для рабочего процесса, чтобы сэкономить свое время.

10. 3D layer splits

b_59c0cd84bbf98.jpg

Анимации для презентаций полезны для работы с клиентами или для обмена идеями в команде. Именно в этом может помочь этот туториал по 3D-анимации.

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

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

11. iOS 8 switches

b_59c0cd8500f73.jpg

Анимированные кнопки включения/выключения впервые появились в ранних версиях iOS и с тех пор распространились на Android и веб-сайты.

У лучших UI switches есть пользовательские анимации, и вы можете создать свои собственные, следуя этому 25-минутному туториалу. Предполагается, что у вас уже есть switch графика, но вы также можете скачать бесплатный PSD и использовать ее этого для работы.

Кроме того, вы сможете использовать эту анимацию для любого типа переключателя, который вы создадите в будущем. Отличный туториал для тех, кто только начинает использовать After Effects для целей UI/UX.

12. Smooth icon animations

b_59c0cd8545290.jpg

Последний в моем списке - этот подробный туториал по движению иконок, который использует несколько различных векторных фигур. Это довольно подробный туториал, длинной всего в 30 минут, и охватывающий несколько разных техник.

Как только вы научитесь хорошо работать с After Effects, вы сможете применить эти идеи к другим стилям иконок. Вот почему этот урок настолько хорош для новичков; он учит, как работать в AE-интерфейсе с конкретными техниками для дизайнеров UI/UX.

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

Больше интересного у нас на канале: https://t.me/uxidesign

+3
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.