Create Physical Methaphors animations in Keynote

Create Physical Methaphors animations in Keynote - student project

This is the project outline

Project Description

You will explore five contexts where using animation helps the user understand the functioning of and app UI with keynote. The contexts are:

- The overall physical methaphor used in the app

- Logo animation

- Error states

- Button states

- Loading & Blank state


Pick one of the contexts and explore different animations that could fit on key screens of the interface. An example would be, creating a transition between screens and creating an animation focusing on the physical metaphor. 

Is recommended to find examples on the internet and try to replicate them.


Since animations can be difficult to share, you will have to create a little video of it.

  1. Create a document with slide size of 1334x750. (alternatively you can use the file I provided to do the animations)
  2. Draw or copy paste your Screen Design 
  3. Export your animation to Quicktime
  4. Share your project  in the projects section with the rest of the students


The principles of UX choreography

Spatial interfaces

Stop gratuitous ui animations