Production for Digital Design / Fall 2015

Assignment Overview

After Effects Webpage Demo

Due: See schedule
Submit via Canvas
HER-V 302 | Fall 2015
Instructor: Aaron Ganci


In this assignment, you will practice using After Effects to generate a demo on how to navigate through a website. Designers often use After Effects (or similar software) to demo what's it's like to actually use a design. This can involve video screen captures or smoke-and-mirror mockups. Demoing a site in this way, instead of static mocks, more accurately depicts what it's like to use a site.

You will need to find an existing website and demo how a user would progress through it. In addition, you will need to set the video to music. To do this, you will need to import an audio (music) file into After Effects and incorporate it into the timeline.

Here are a couple of examples of these types of videos:

Please add a title screen at the beginning of the video that has your name and class number/name.

Because you will be using audio and video of site that you did not create, you need to credit those who did. You should do this with a final slide that credits the creators of the website that you recorded and the audio track that you used. Don't over think it, it's just a simple "credits" screen.

Grading criteria

  • Ability to communicate representative demo.
  • Appropriate pacing through the video.
  • Title and credits screen are present.
  • Video is exactly 36 seconds (3 sec. title slide, 30 sec. walkthrough, 3 sec. credit slide)
  • Submission of video as Vimeo link.

Learning Objectives

At the end of this project, you will be able to:

  • Use After Effects to create a basic website demo.
  • Take and import video screen captures into After Effects.
  • Import and use an audio track in the video.


Category % of total
Assignments 80%
After Effects Exercise 5%
After Effects Webpage Demo Webpage 10%
Glossary webpage 5%
Visual Spec Assignment 10%
Typesetting webpage 20%
Book website #1 30%
Test 20%

*Categories and percentage breakdown subject to change.

Late work

Every assignment in this course will be due at the beginning of the class of its defined due date. Work that is not handed in via the method requested by the instructor (OnCourse, email, etc) by the predetermined time will be considered late. The consequences of late submission fall on sliding scale, increasing in severity over time. If late work is handed in within the following parameters, the grade will be reduced in the following ways:

Due date/time – same day, end of class -10%
Same day, end of class – same day, end of day (11:59pm) -15%
Next day (midnight – 11:59pm) -20%
Any subsequent day -50%
Grading scale
A+ 100-98
A 97-93
A- 92-90
B+ 89-87
B 86-83
B- 82-80
C+ 79-77
C 76-73
C- 72-70
D+ 69-67
D 66-63
D- 62-60
F 59-0