ART 257

Motion Graphic Design

@ KCC New Media Arts

Intro

Course Content

Teacher

Contact

ART 257

Motion Graphic Design

Design in Motion

Teacher: Chris Gargiulo

Motion Graphic Design introduces motion graphic design to add the element of time to basic graphic design principles. Students learn the basics of 2D animation techniques, story structure, and filmmaking primarily for web-based applications.

Motion Graphic Design is a broad field that includes motion graphics for film, television, and the web. In its most basic form, it is graphic design with the addition of time and audio. Depending upon the medium, context, and style, the technologies for motion graphics production vary. As mediums converge and technologies evolve, the means may change, but the underlying principles of animation and motion graphics remain the same. In this class we will learn the basics of motion graphic design by creating animations for the web using primarily Adobe After Effects. During the first few weeks of the semester we will explore core animation principles such as squash and stretch, timing, and easing (slow in/out). Topics and assignments will range from kinetic typography, or type in motion, to commercial interstitials, promotions, and advertisements. Techniques will range from basic keyframe animation to advanced masking. During the second half of the semester, we will go through the full design process of planning, designing, and animating one large-scale motion graphics piece.

Course Content

Content Not Posted

The Schedule

1 exercise and 3 projects over 16 weeks

Points
Grade
50
Ball
10%
100
Video Project
20%
100
Motion Project
20%
150
Final Project
30%
100
Crit
Crit
20%
500
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
100%

Grading System

500 Points Total

10%
Intro Exercise

Bouncing Ball
50 Points

20%
Project #1

Video Project
100 Points

20%
Project #2

Motion Project
100 Points

30%
Project #3

Final Project
150 Points

20%
Class Participation

Critiques
100 Points

The Calendar

Week-by-week due dates

Calendar loading...

The Process

3P: Three steps for the production of all time-based projects

1

Pre-Production

Writing, Story Development, Design Exploration, & Pre-Visualization

2

Production

Video/Film/Photography, Design, Animation, & Sound/Audio Recording.

3

Post-Production

Editing, Compositing, Sound Design, Refinement, & Rendering.

Lessons

Intro to Motion Graphic Design A Brief Introduction for Web Designers

A Brief Summary

Motion graphics can be seen as an extension of graphic design, where elements of graphic design are set to motion over time, and the designer's role is to effectively combine the principles of design with the principles of animation and filmmaking.

Essential elements & principles to consider:
  • Elements of Design
  • Principles of Design
  • Elements of Filmmaking
  • Principles of Animation
Lesson:
Intro to Motion Graphic Design Motion Graphic Design: A Brief Introduction for Web Designers

Motion Design Process For Time-Based Media

A Brief Summary

The creative design process for time-based media such as film/tv and motion graphic design consists of three general steps: pre-production, production, and post-production. Pre-production consists of writing, planning, and sketching the story and concept. Production is when all assets are designed, created, shot, animated, and produced at full production quality. Finally, during post-production everything is put together with final audio through an iterative process of refinement to ensure that the end product is a polished piece of time-based media..

The 3 Step Production Process:
  1. Pre-Production
  2. Production
  3. Post-Production
Lesson:
Design Process for Time-Based Media Design Process: For Time-Based Media

Exercises

Bouncing Ball An Intro to Animation Exercise

A Brief Summary

One of the classic exercises found within the curricula of many animation schools is the bouncing ball, where the goal is to take a basic circle or image of a ball and to bring it to life. It is a great way to get your feet wet and learn the basics of animation in a simple applied context. This exercise can be done independent of technology on paper or using your technology of choice.

Essential elements & principles to consider:
  • Elements of Design: Color & Shape
  • Principles of Design: Scale
  • Principles of Animation: Squash and stretch, Staging, Straight ahead action and pose to pose, Slow in and slow out, Arcs, Timing, & Exaggeration
Exercise:
Bouncing BAll Exercise Bouncing Ball: An Intro to Animation Exercise

Motion Design Techniques Various Tips & Tricks

A Brief Summary

Knowing that there are multiple different ways to create and execute multiple different designs and effects, I put together a series of different techniques as a helpful resource for motion graphic design students and designers working on time-based projects. Time-based software packages, such as non-linear editors, compositing and animation programs, and audio editing applications, vary greatly when it comes to step-by-step techniques, each offering different ways to solve similar time-based design problems. Here is a collection of a few different techniques and resources, that despite being software-specific, include universal approaches to solving common motion graphic design problems.

Exercises:
Motion Design Techniques Techniques in Motion: Different Techniques for Different Effects

Projects

H&R Block Video An Intro-level Video Project

A Brief Summary

This video project is a simple, short video promo for H&R Block. Using stock video footage and stock audio, it is designed to introduce the basics of video editing in an applied, pseudo-commercial context to highlight the full time-based broadcast production process of pre-production, production, and post-production.

Essentials elements & principles to consider:
  1. Elements of Film (image, editing, sound)
  2. Elements of Sound Design (music, sound effects)
Project:
HR Block Video Project H&R Block Video: A Short, Introduction-level Video Project

Lorem Ipsum Promo A Motion Graphic Design Project

A Brief Summary

This motion graphic design project is a generic, no-frills animated promo for a fictional client "Lorem Ipsum." Using latin text and simple icons, it is designed to demonstrate basic animation principles in an applied, pseudo-commercial context to highlight the full motion graphic design production process of pre-production, production, and post-production.

Essentials elements & principles to consider:
  • Elements of Design (line, shape, text)
  • Principles of Design (Unity, Balance, Hierarchy, Scale/proportion, Dominance/emphasis)
  • Elements of Sound Design (music, voice over, sound effects)
  • Principles of Animation (Staging, Slow in and slow out, Timing)
Project:
Lorem Ipsum Promo Video Project Lorem Ipsum Promo Video: A Generic Motion Graphic Design Project

Week-by-Week

1 Intro to the Course Expand/Collapse

This week we talk about motion graphic design as we go over the course in detail, including a brief overview of the major assignments and deliverables. Read More »

Agenda:

  1. Introduction to Motion Graphic Design.
  2. Introduction to the course.
  3. Introduction to your peers.

Assignment: Due: Week 2

  • Reading: Read the intro to Motion by Design (short reading assignment).
  • Hosting Plan: If you do not have one already, sign up for a hosting plan with a 3rd party hosting provider. Be sure to note your ftp information as well as your username and password. We will set up a class web page for you to post all assignments. Past students have purchased hosting plans from Bluehost, iPage, Super Green Hosting, and GoDaddy (these are just a few of many hosting providers available). Plans should include ample disk space (ie. more than 2GB or unlimited), support for CGI, PHP, and MySQL, multiple domain hosting (to host more than one site), one-click install/support for Wordpress, Joomla, and Drupal (popular CMS options), and a low, competitive price (an example rate is around $3-$5/month – this is subject to change based upon current trends for hosting prices).
  • Sneak Peek: In anticipation of next week, visit the Bouncing Ball Exercise page and watch the video lesson. Try your best to complete the exercise on your own.
2 Overview of the Creative Process Expand/Collapse

This week we will go over the full creative design process for time-based media and complete the bouncing ball exercise. Read More »

Agenda:

  1. Introduction to the full creative design process for time-based media.
  2. In class we will walk through the Bouncing Ball Exercise.
  3. In class we will set up your class web page and learn how to post a video.

Assignment: Due: Week 3

  1. Bouncing Ball Exercise: After you set up your class web page, post your completed Bouncing Ball Exercise video to a youtube or vimeo account then embed it on your class web page.
3 Intro to Lorem Ipsum Project - ACT I Expand/Collapse

This week we will begin Motion Graphic Design Project #1: Lorem Ipsum Promo by studying pre-production documents and setting up ACT I. Read More »

Agenda:

  1. In class we will finish setting up your class web page and make sure everyone knows how to post a video.
  2. Introduction to the Lorem Ipsum Promo Motion Graphic Design Project #1. We will setup the project locally and begin ACT I scenes 1-3.

Assignment:

  1. Lorem Ipsum Promo: ACT I - There is no homework due next week, but if you were unable to keep up with the lessons in class, please do your best to setup ACT 1, Scenes 1, 2, and 3.
4 Lorem Ipsum Project - ACT II Expand/Collapse

Continuing Motion Graphic Design Project #1: Lorem Ipsum Promo by completing ACT I and beginning ACT II. Read More »

Agenda:

  1. In class we will begin where we left off last week - completing ACT I and moving on to ACT II of the Lorem Ipsum Promo Motion Graphic Design Project #1.

Assignment: ACT II Part 1 (Setup) Week 5

  1. Lorem Ipsum Promo: ACT II - Go to the Video Lesson section of the Lorem Ipsum Promo Project page (at the bottom) and watch the video lesson for ACT II Part 1. Please try your best to complete the following before class next week.
    1. Set up each scene in ACT II - by bringing in all ACT II scene graphic elements (layers)
    2. Set up the general timing for each scene in ACT II - by trimming each layer to the timeline markers for each scene (with overlap for scene transitions)
    3. Set up the voice over audio for each scene in ACT II - by bringing in all voice over audio files for ACT II and setting up the timing for each as best as you can (to match the general timing of the story reel)
    4. Finish the end of ACT I and beginning of ACT II - by zooming into the figure's head at the end of ACT I. then use the figure's head from ACT I as the starting point for the animated pie chart in ACT II (apply a radial wipe effect to the figure head layer recreate the black 60% part of the pie chart)
5 Lorem Ipsum Project - ACT II Expand/Collapse

Continuing Motion Graphic Design Project #1: Lorem Ipsum Promo by completing the remaining scenes for ACT II. Read More »

Agenda:

  1. In class we will begin where we left off last week - completing ACT II of the Lorem Ipsum Promo Motion Graphic Design Project #1.

Assignment:

  1. Lorem Ipsum Promo: ACT II - - There is no homework due, but if you were unable to keep up with the lessons in class, please do your best to finish all of the scenes from ACT II, and please feel free to continue on to ACT III.
6 Lorem Ipsum Project - ACT III Expand/Collapse

Continuing Motion Graphic Design Project #1: Lorem Ipsum Promo by completing ACT I and ACT II and beginning ACT III. Read More »

Agenda:

  • In class we will begin where we left off last week - completing ACT II and moving on to ACT III of the Lorem Ipsum Promo Motion Graphic Design Project #1.
  • We will be doing a series of After Effects "tests" to learn more techniques such as basic line animation techniques and text animation (kinetic typography). Please download the source AE file to complete the in-class exercises.

Assignment: Due: Week 7

  • Lorem Ipsum Promo: First Draft - Once you have completed the initial setup of ACT I, II, and III with all final graphics and audio for each scene, please export and post this video as Draft #1. If you were unable to keep up with the lessons in class, please do your best to finish setting up all ACTs and all Scenes.

Final Project: Promo Due: Week 16

7 H&R Block Video Project Expand/Collapse

Begin Motion Graphic Design Project #2: H&R Block Video Project to learn the basics of video editing with stock video and audio using Adobe Premiere. Read More »

Agenda:

  • In class we will finish our After Effects "Test" exercises where we left off last week.
  • We will begin the H&R Block Video Project (Motion Graphic Design Project #2).

Assignment: H&R Block Video Project Due: Week 9

  • H&R Block Video Project - After you have visited and read the H&R Block Video Project web page and watched the video lesson at the bottom, please create and post your own short H&R Block video using stock video and audio.
    • You have full artistic freedom, so please feel free to be as creative as you like (or not).
    • For example, you can use the exact same story, concept, video footage, and audio clips that I used in the video lesson - this is fine and you will recieve full points.
    • Or... you can experiment freely with any aspect of the video that you want, such as using other source video and audio from the NMA stock library, or developing a completely new concept, or even going so far as creating a similar video for a different client - so long as it remains short (15 seconds is ideal).
    • Conceptually and artistically, it's completely up to you - so most importantly, have fun!

Final Project: Promo Due: Week 16

8 H&R Block Video Project Expand/Collapse

In-class demo of AV equipment such as video cameras and microphones. In-class studio time to continue working on Motion Graphic Design Project #2: H&R Block Video Project. Read More »

Agenda:

  • In-class time to work on the H&R Block Video Project (Motion Graphic Design Project #2).
  • In-class demo of AV equipment.
    • Brief overview of AV equipment
    • Video Shooting Techniques
    • Lighting Techniques
    • Audio Recording Techniques

Assignment: H&R Block Video Project Due: Week 9

  • H&R Block Video Project - After you have visited and read the H&R Block Video Project web page and watched the video lesson at the bottom, please create and post your own short H&R Block video using stock video and audio.
    • You have full artistic freedom, so please feel free to be as creative as you like (or not).
    • For example, you can use the exact same story, concept, video footage, and audio clips that I used in the video lesson - this is fine and you will recieve full points.
    • Or... you can experiment freely with any aspect of the video that you want, such as using other source video and audio from the NMA stock library, or developing a completely new concept, or even going so far as creating a similar video for a different client - so long as it remains short (15 seconds is ideal).
    • Conceptually and artistically, it's completely up to you - so most importantly, have fun!

Final Project: Promo Due: Week 16

  • Final Project Schedule: Major deliverables and due dates:
    • Week 9: Project ideas in the form of a Project Brief(s) are due.
    • Week 10: Project Synopsis & Storyboards are due.
    • Week 11: Story reel & tests are due.
    • Week 14: 1st Draft is due.
    • Week 15: 2nd Draft is due.
    • Week 16: Final project is due.
  • Project details: Final Motion Graphic Design Project (#3): Promo Video
9 FINAL Project - PROJECT BRIEF (IDEAS) Expand/Collapse

Brainstorm sessions to help figure out the client and conceptual direction of your final projects. We will also have a mini lesson to discuss different ways to create storyboards. Read More »

Agenda:

  • Brainstorm: final project ideas
  • Informal critique/screening of the Motion Graphic Design Project #2.
  • Mini Lesson: Storyboarding.
  • In-class work time to work on your storyboards and synopsis.

Final Project: Promo Due: Week 16

  • Final Project Schedule: Major deliverables and due dates:
    • Week 9: Project ideas in the form of a Project Brief(s) are due.
    • Week 10: Project Synopsis & Storyboards are due.
    • Week 11: Story reel & tests are due.
    • Week 14: 1st Draft is due.
    • Week 15: 2nd Draft is due.
    • Week 16: Final project is due.
  • Project details: Final Motion Graphic Design Project (#3): Promo Video
10 FINAL Project - PRE-VISUALIZATION Expand/Collapse

In-class studio time to complete your synopsis and storyboards so you can next create a story reel and conduct visual tests. We will also have a mini lesson to discuss different ways to create a story reel. Read More »

Agenda:

  • Mini Lesson: Story Reels.
  • In-class work time to work on your story reels and to conduct visual tests.

Final Project: Promo Due: Week 16

  • Final Project Schedule: Major deliverables and due dates:
    • Week 9: Project ideas in the form of a Project Brief(s) are due.
    • Week 10: Project Synopsis & Storyboards are due.
    • Week 11: Story reel & tests are due.
    • Week 14: 1st Draft is due.
    • Week 15: 2nd Draft is due.
    • Week 16: Final project is due.
  • Project details: Final Motion Graphic Design Project (#3): Promo Video
11 FINAL Project - PRODUCTION Expand/Collapse

Informal working critique to view the final project story reels and in-class studio time to work on your first drafts of your final projects. Read More »

Agenda:

  • Informal working critique: Story Reels.
  • In-class work time to work on your first drafts.

Final Project: Promo Due: Week 16

  • Final Project Schedule: Major deliverables and due dates:
    • Week 9: Project ideas in the form of a Project Brief(s) are due.
    • Week 10: Project Synopsis & Storyboards are due.
    • Week 11: Story reel & tests are due.
    • Week 14: 1st Draft is due.
    • Week 15: 2nd Draft is due.
    • Week 16: Final project is due.
  • Project details: Final Motion Graphic Design Project (#3): Promo Video
12 FINAL Project - PRODUCTION Expand/Collapse

Work Week: in-class studio time to work on your first drafts of your final projects. Read More »

Agenda:

  • In-class work time to work on your first drafts.

Final Project: Promo Due: Week 16

  • Final Project Schedule: Major deliverables and due dates:
    • Week 9: Project ideas in the form of a Project Brief(s) are due.
    • Week 10: Project Synopsis & Storyboards are due.
    • Week 11: Story reel & tests are due.
    • Week 14: 1st Draft is due.
    • Week 15: 2nd Draft is due.
    • Week 16: Final project is due.
  • Project details: Final Motion Graphic Design Project (#3): Promo Video
13 FINAL Project - PRODUCTION Expand/Collapse

Work Week: in-class studio time to work on your first drafts of your final projects. Read More »

Agenda:

  • In-class work time to work on your first drafts.

Final Project: Promo Due: Week 16

  • Final Project Schedule: Major deliverables and due dates:
    • Week 9: Project ideas in the form of a Project Brief(s) are due.
    • Week 10: Project Synopsis & Storyboards are due.
    • Week 11: Story reel & tests are due.
    • Week 14: 1st Draft is due.
    • Week 15: 2nd Draft is due.
    • Week 16: Final project is due.
  • Project details: Final Motion Graphic Design Project (#3): Promo Video
14 FINAL Project - POST-PRODUCTION Expand/Collapse

Informal working critique to view the final project 1st-round drafts and in-class studio time to work on your 2nd-round drafts of your final projects. Read More »

Agenda:

  • Informal working critique: 1st-round drafts.
  • In-class work time to work on your 2nd-round drafts.

Final Project: Promo Due: Week 16

  • Final Project Schedule: Major deliverables and due dates:
    • Week 9: Project ideas in the form of a Project Brief(s) are due.
    • Week 10: Project Synopsis & Storyboards are due.
    • Week 11: Story reel & tests are due.
    • Week 14: 1st Draft is due.
    • Week 15: 2nd Draft is due.
    • Week 16: Final project is due.
  • Project details: Final Motion Graphic Design Project (#3): Promo Video
15 FINAL Project - POST-PRODUCTION Expand/Collapse

Informal working critique to view the final project 2nd-round drafts and in-class studio time to work on your final versions of your final projects. Read More »

Agenda:

  • Informal working critique: 2nd-round Drafts.
  • In-class work time to work on your final version of your final project.

Final Project: Promo Due: Week 16

  • Final Project Schedule: Major deliverables and due dates:
    • Week 9: Project ideas in the form of a Project Brief(s) are due.
    • Week 10: Project Synopsis & Storyboards are due.
    • Week 11: Story reel & tests are due.
    • Week 14: 1st Draft is due.
    • Week 15: 2nd Draft is due.
    • Week 16: Final project is due.
  • Project details: Final Motion Graphic Design Project (#3): Promo Video
16 FINAL Project - CRITIQUE Expand/Collapse

Final Critique. Be prepared to present your final project in an formal critique for client review. Read More »

Agenda:

  1. In-class Final Critique.
    • 10 minutes per person.
    • Order will be determined at 10:45am with an order sign-up on the white board.
    • Further feedback should be provided for your peers via Laulima under each persons's final project discussion area.
  2. Announcements:

Critique Schedule:

Tuesday Thursday Time
----- SETUP ----- 10:45-10:55
#1 #9 10:55-11:05
#2 #10 11:10-11:20
#3 #11 11:25-11:35
#4 #12 11:40-11:50
----- 20 Min. BREAK ----- 11:55-12:15
#5 #13 12:15-12:25
#6 #14 12:30-12:40
#7 #15 12:45-12:55
#8 #16 1:00-1:10

Pinterest

Chris Gargiulo's Pinterest Boards

Motion Graphic Design Related Resources

About

The Teacher

Chris Gargiulo

This is the faculty web site for KCC New Media Arts instructor Chris Gargiulo. Chris is a designer, animator, and filmmaker with experience in print design, web design, front-end web development, motion graphics, and animation for various film, web, and multimedia projects. This site is for his students and for all who are interested in web design related topics and techniques.

Learn more about Chris

Contact

For specific information about this site and the Interface Design concentration of courses within New Media Arts program at Kapi‘olani Community College, please contact:

Chris Gargiulo

Associate Professor

Telephone: 808-734-9707
Email: gargiulo [at] hawaii.edu

For more general information about New Media Arts program at Kapi‘olani Community College, the Associates degree, and the admissions process to become a student, please contact:

Steve Harris

New Media Arts Counselor

Telephone: 808-734-9510
Email: snharris [at] hawaii.edu
Chris Gargiulo KCC New Media Arts