Motion design creates movement, excitement and adds life to otherwise static experiences. When it comes to digital environments, it not only creates delight but also serves strategic purposes such as brand expression, accessibility, information and guidance.
Using motion design to animate with purpose and create delightful experiences
2h 52m 17s
English
Paid
In this course, you will learn how to integrate motion to your designs with purpose in mind. We will cover topics ranging from micro-interactions to full screen transitions as well as how to prepare, animate and export your animations in After Effects and Lottie.
At this end of this class, you will be able to design with motion in mind and to animate your web models.
About the Author: Awwwards
Awwwards is the long-running design-recognition site that selects and showcases the best web design work published online — and now also operates a paid course platform staffed by the same kind of high-craft front-end developers whose sites win Awwwards Site of the Day awards.
The CourseFlix listing carries four Awwwards courses on the visual / animated end of front-end engineering: Impress everyone with a 3D particle scene with Blender and Three.js, Creating a simple portfolio website with WebGL and Barba.js, Merging WebGL and HTML worlds, and Using motion design to animate with purpose. Material is paid and aimed at designers and developers building portfolio-grade interactive sites.
Watch Online 19 lessons
0:00
/ #1: Introduction
All Course Lessons (19)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction Demo | 04:04 | |
| 2 | Why use motion design? | 03:08 | |
| 3 | Types of animations and examples | 03:45 | |
| 4 | Intro | 01:32 | |
| 5 | Focusing attention and guiding the user | 01:54 | |
| 6 | Creating emotion and showcasing personality and brand | 02:54 | |
| 7 | Informing and giving feedback to the user | 03:02 | |
| 8 | Timing, easing and offset | 03:59 | |
| 9 | Finding inspiration | 02:49 | |
| 10 | Chapter conclusion | 01:39 | |
| 11 | Intro | 01:40 | |
| 12 | After Effects - Importing your design files | 10:19 | |
| 13 | After Effects - Workspace and compositions | 13:10 | |
| 14 | After Effects - Animating your design | 45:02 | |
| 15 | After Effects - Creating your own motion design | 50:26 | |
| 16 | After Effects - Exporting your animation | 06:06 | |
| 17 | What is Lottie | 02:35 | |
| 18 | Animating and exporting your animation in Lottie | 12:41 | |
| 19 | Conclusion | 01:32 |
Unlock unlimited learning
Get instant access to all 18 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 3y agoScience of Character Animation
By: Motion Design SchoolLearn how to create lively and charismatic characters from scratch and direct funny animation scenes on your own.9h 20m -
Updated 2y agoCreate a Cool Ice Effect Animation in Adobe After Effects
By: Envato Tuts+This is a course for artists and designers who are interested in animation and motion graphics.1h 34m -
Updated 2y agoCreate a Promo Video in After Effects
By: DesignCode (Meng To)In this course we will show you how to create a promo video using After Effects.2h 30m
Frequently asked questions
What prerequisites are needed before taking this course?
The course does not specify prerequisites, but a basic understanding of digital design principles may be beneficial. Familiarity with tools like Adobe After Effects could help, as the course involves importing, animating, and exporting designs using this software.
What will I be able to create by the end of this course?
By the end of this course, you will be able to create purposeful motion designs that enhance digital experiences. You will learn to import design files, animate them in Adobe After Effects, and export animations using tools like Lottie for web use.
Who is the target audience for this course?
This course is ideal for digital designers and developers interested in enhancing user experience through motion design. It also suits professionals focused on brand expression and accessibility in digital environments.
How does the depth of this course compare to similar motion design courses?
This course offers specific insights into using motion design for strategic purposes such as brand expression and accessibility, which might not be covered in more general animation courses. It also provides practical knowledge about tools like After Effects and Lottie.
Is there any specific software taught in this course?
Yes, the course covers Adobe After Effects extensively, including importing design files, animating them, and exporting the animations. It also introduces Lottie, a tool for exporting animations for web use.
What topics are not covered in this course?
The course does not cover 3D animation or video production techniques. Its focus is on 2D motion design for digital interfaces, particularly using After Effects and Lottie.
How can the skills from this course be applied to other careers?
Skills gained from this course, such as creating animations with After Effects and exporting them with Lottie, are valuable in careers like web design, UI/UX design, and digital marketing, where enhancing user experience is crucial.