Product Video Help

Create a video using After Effects and/or Premiere that clearly provides the context/problem, promotes/explains the design solution, and gives a call-to-action. The video allows us to see your product in action and better understand how it works in context.

Rubric

  • demonstration of context, design, features, and interaction
  • quality of video production and narrative structure

Specs

  • It should be no longer than 1.5 minutes in length and it should be 1920×1080.

Considerations
The complexity of the video can really range.
Click to see Tips

  1. You could use stock footage to provide context and space that your product/experience would be in, in conjunction with close up shots of your animated user interface and animated type.
  2. You could either animate your user interface in After Effects or screen-record a hi-fi prototype of your interface moving from screen-to-screen within Figma. This could either be composited or not.
  3. If you have to demonstrate an environment/product you may also choose to include either a diagrammatic drawing, illustration, photoshop comp, or a 3D rendering – if needed in the video.
  4. You will also want to find music to set the tone and consider using voiceover and/or text to carry the narration.

 


Past Student Examples / Approaches
Click to see Examples

Stock Footage + 2D Animation/Prototype

Combination of Video with Prototype 

Combination of Animation with Prototype

Animating the Prototype with Type

Entirely Animated

Video/Animation Composite 


After Effects/Premiere/Motion Resources
Click to see Resources

To clarify – After Effects is used for animating. Premiere is used for video editing and sound editing. You can composite your animations over your footage by importing either AE compositions into Premiere or importing Premiere sequences into AE.

Premiere Demo Video // I created this video to demonstrate most aspects of using Premiere to edit your video footage. From importing clips to exporting in Adobe Media Encoder, it also includes importing After Effects Compositions as Dynamic Links to composite your animations over the top of video footage at around the 29:00-minute mark.

Beginner After Effects Steps from 260
Beginner Premiere Steps from 260

Rotobrushing
Track Motion
Tracking Camera
Keylight – Green Screen
Precomps
Parenting 
Easing
Ease ‘n Wizz plugin
YouTube Tutorial on Animating UI
Guide to Material Motion in AE

UI Motion Tips
UI Motion Lecture
Design Better: Animation Handbook
Animation That Matters
Google Material Design
Creating Usability with Motion
Motion Design Doesn’t Have to be Hard


Stock Footage
Click to find Free Stock Footage


Copyright-Free Music 
Click to find free Music


Tips
9 Tips For Creating Killer Product Videos