An Intro to Motion Graphic Design for Web Designers
Understanding the Underlying Principles of Motion Graphic Design.
by Chris Gargiulo
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. When well produced with good sound design (ie. voice overs, sound effects, music, etc.), motion graphic design can transcend its medium and be an effective means of communication across several different forms of new media.
Motion Graphic Design can be found in a variety of applied contexts, such as opening title sequences for film and tv, animated logos, special effects for film/tv, traditional broadcast advertising for TV, online web advertising, promotional web videos, animated infographics, etc. In the early days of the web there were various forms of Flash intros, Flash web sites, and animated banner ads. The future of the web is unknown, but there is a lot of potential for more integrated motion graphic applications on the web as new technologies emerge and as new browsers support these new features, such as html5 canvas, css3 animation, etc. As technologies evolve, the means may change, but the underlying principles of design and animation remain the same. A good motion graphic designer should have a strong understanding of graphic design and animation and be able to apply them in a variety of contexts.
Do web designers need to know how to create motion graphics?
Interface design students often ask me if it is necessary to learn motion graphic design. Unfortunately, there is no simple right/wrong or yes/no answer. It all depends on the designer and his/her goals. For example, I might say yes if a student wants to be a more generalist designer interested in working in a variety of different areas (ie. Print + Web + Motion). I might say no if a students knows for sure that they want to be a more specialized web designer with a deeper skill set in one particular area, but probably not, because I believe that it is an advantage for any designer to have a basic understanding of motion graphic design.
A Definition of Motion Graphic Design
There are multiple ways to define motion graphics. For web designers learning it for the first time, I prefer the following over-simplified version:
Motion graphic design is graphic design plus time, where designers take the elements of design and the elements of film and apply the principles of design with the principles of animation.
Elements of Design
- Line
- Color
- Shape
- Texture
- Space
- Form
Principles of Design
- Unity
- Balance
- Hierarchy
- Scale/proportion
- Dominance/emphasis
- Similarity and contrast
Elements of Film
- Image
- Mise-en-scene
- Cinematography
- Framing
- Lighting
- Movement
- Editing
- Sequence
- Montage
- Sound
- Dialogue
- Narration
- Music
- Foley/effects
Principles of Animation
- Squash and stretch
- Anticipation
- Staging
- Straight ahead action and pose to pose
- Follow through and overlapping action
- Slow in and slow out (ie. easing)
- Arcs
- Secondary action
- Timing
- Exaggeration
- Solid drawing
- Appeal
Conclusion
There are multiple different forms of motion graphics and many different applications. Regardless of the context, motion graphic design can be an effective means of communication. For web designers, it is a powerful skill to have, because designers are well suited to be able to take the elements of design and film and apply the principles of design and animation, to create well-informed and well-designed motion graphics.