Graduate Motion Graphics → Fall 2018 GD 5569 → 3 Studio Credits

Project 2:
Documenting A User Interface (UI)


  • Oct 2 - Project Assigned
  • Oct 9 - Arrive to class with progress on static designs.
  • Oct 16 - Arrive with finished designs and progress on animation.
  • Oct 23 - Arrive with progress on animation.
  • Oct 30 - Arrive with final animation and presentation.


In this project, you will be creating an animated UI walkthrough of a web product. You can approach this project in a few ways.

a. Create something for your thesis

If your thesis project has an interactive component, feel free and use this project to develop an animated presentation of that interactive component.

b. Enhance an existing portfolio piece

If you already have have an interactive design project in your portfolio that you would like to present in motion, you are welcome to use this project to do that.

c. Start something from scratch.

If you are creating a standalone project, you can use the following prompt: You are tasked with creating a web app for a conceptual public service. Ask yourself, what is a problem that needs to be addressed? How can your service address that problem? Who is this service for? Your animated product demonstration should do a few things:

  1. It should present a coherent visual identity.
  2. It should show how the product educates new users about what it is and how it works.
  3. It should document at least one primary action a user will perform through the app/service.

Say you were creating an app for a future healthcare service. You might animate a title screen that transitions to an onboarding experience. This onboarding experience might let users to swipe through a series of headlines and illustrations talking about the benefits of that service, or tap a call to action that leads directly to a signup form.

Key deliverables:

  1. A summary of your product, including its purpose, the key features, and the target audience.
  2. A static design (with notes, sketches or other documentation of interaction) built with after effects importing in mind.
  3. An animation that walks through the your design on an audience-appropriate device.
  4. A considered final presentation of your motion walkthrough. You've decided who is going to use your app, but who is this presentation for? Voters? Policymakers? Funders?