Course · Motion Design
Movement that explains
0.1 / What it's about
Good exercise explained before you read.
Motion design is design in time: logos, typography, interfaces, and short films that move. The course takes you from the principles of animation through timing and kinetic typography to movement in UI design and the production of a finished clip.
As a running example, you will be accompanied by Museum Klang, a fictional music museum in Basel with a website, social media presence, and screens in the foyer. You can also complete every exercise using your own project.
Key questions of the course:
QUESTION 1
What makes a movement believable and lifelike?
QUESTION 2
How long does a movement take, and in what order?
QUESTION 3
How does type move without becoming illegible?
QUESTION 4
When does exercise help, and when does it do more harm than good?
Course framework:
TARGET AUDIENCE
Creators
Learners in graphic, media or UX design who want to bring their designs to life.
SCOPE
5 × 90 mins
Plus final project; each module can also be taken individually.
FORMAT
Hands-on
Short input, tools, and practice on an end-to-end project.
REFERENCE
Cross-references
Connections to typography, UX & UI design, content & social media, and accessibility.
0.2 / Learning objectives
After the course, you will design with purpose.
0.3 / Course content
All modules and sections at a glance.
Five modules, each with a core question and a tool. Briefly explained, then tried out for yourself.
MODULE 01
What brings movement to life?
MODULE 02
How long does a movement take?
MODULE 03
How does type move?
MODULE 04
When does movement help in the interface?
MODULE 05
How does an idea become a finished clip?
0.4 / Procedure per module
Each module follows the same structure.
Each module has the same structure, so you can quickly find your way around and also use it individually.
01
Introduction (10 mins)
An observation from a film, app or advert.
02
Input (20 mins)
Basics and rules.
03
Tool (15 mins)
Explore the topic in the interactive tool.
04
Exercise (35 mins)
Application to a project of your own.
05
Reflection (10 mins)
What do you take forward into your work?
In each section, you will find a bolded key point and a task for further reflection.
0.5 / Record of achievement
In the end, you have a dynamic visual identity.
Final project: an animated visual identity for a real or fictional institution, featuring a logo, clip and interface.
01
Concept
Define the character of the movement in three words.
02
Logo
The logo in motion, with quiet composure.
03
Clip
A social media clip of up to 15 seconds.
04
Interface
Three micro-interactions for the website.
05
Guide
Define durations, easing, and rules for everyone.
Evaluation criteria: clear character, good timing, legible font, justified movement within the interface, and a composed overall feel.
0.6 / Literature and Sources
Good movement has role models.
• Thomas, F. & Johnston, O. (1981): The Illusion of Life: Disney Animation. Abbeville Press.
• Williams, R. (2001): The Animator’s Survival Kit. Faber & Faber.
• Krasner, J. (2013): Motion Graphic Design. 3rd edition. Focal Press.
• Head, V. (2016): Designing Interface Animation. Rosenfeld Media.
• Google: Material Design 3, Motion. m3.material.io
• W3C: Web Content Accessibility Guidelines 2.2, Sections 2.2.2, 2.3.1 and 2.3.3.
• MDN Web Docs: prefers-reduced-motion.
Please note: The years indicate the edition used here.