Inspiration

Motion Graphics for Complete Beginners

The art of bringing graphics to life through animation.

Image: 3D Wall

You might have heard the terms ‘motion graphics’ and ‘motion graphic design’ but, if you’re like me, you might have had a hard time working out exactly what they mean.

Put simply: motion graphics refers to animated graphic design.

‘MoGraphs’ (as the industry sometimes refers to them) is really the art of bringing graphics to life through animation. Simple graphic forms can be animated, while flat images, such as photographs, can be edited to suggest the illusion of movement.

How do ‘MoGraphs’ differ from Animation?

MoGraphs is to Animation what Graphic Design is to Art; one piece of the larger discipline. Graphic design often has a commercial aspect to it, as do motion graphics, while art and animation tend to focus more on entertainment. That’s not to say that graphic design can’t also be entertaining – Robert M. Ball’s Beautiful Death series, for example – but entertainment is not the primary purpose.

Motion Graphics Designer Jared Flynn put it succinctly, suggesting that an animator utilizes character and narrative to communicate ideas, while a motion designer reduces that communication to more the basic elements of color, space, and typography.

In conjunction with students at the University for the Arts in Bremen, Envato marketplace author placdarms contributed to this fantastic educational video about the basics of motion graphic design. If you’ve got 23 minutes to spare, it’s packed with so much great information that I think everyone could take a little something away from it.

How can they be used?

First, a little history. The inception of motion graphics goes back decades. Early cinema relied on motion graphics techniques for opening titles. Their creative exploration came in the 1940s and 1950s, when artists such as Oskar Fischinger, Saul and Elaine Bass, and Pablo Ferro began pushing motion graphics techniques to their limits.

The opening credits of Hitchcock’s Psycho and North By Northwest were both designed by Bass. This iconic style remains a reference point for designers even today, representing the unique ways typography and form can be presented.

These techiques were also used heavily in the abstract designs for, well, pretty much every James Bond film title ever.

Daniel Craig will feature in the 2019 Bond film I’ve tentatively titled MoGraphs are Forever.

So popular were motion graphics techniques in the 1960s and 1970s that their style is often utilized as a callback to the era. The Archer title credits are a great modern example of this:

Motion graphics have also long been used for logo reveals, especially in television networks or movie production companies. (For more info on the use of motion graphics in logo reveals, see our article on the Top Logo Reveal Video Templates for After Effects.)

The pervasiveness of technology means that animations can be applied to almost anything to give them a boost in our busy lives. Motion graphics can be used to great effect in animated digital billboards. Websites can utilize them – sparingly though, please – to highlight or draw attention to particular areas.

Remember, you’re aiming for this:

Welcome to the Universe won the 2017 People’s Voice Webby Award for best use of animation or motion graphics. (Webby Awards)

Not this:

If you’re looking for more on what not to do, Dom has you covered with 13 Terrible Web Trends and how to Recreate them.

Many websites are using a parallax effect for backgrounds. This animation technique involves moving foreground images and background images at different speeds, creating the illusion of depth. Used effectively and this gives a hint of dynamic movement without overwhelming the content. We have talked about this in depth before, so if you’re interested in hearing more about how parallax can be used in websites, have a read though this article on Things to Consider When Using Parallax Scrolling in Web Design.

The Firewatch website shows how parallax can be used simply without overwhelming viewers. (Firewatch)

Motion graphics can also be used very creatively print. Though falling out of favour a little in recent times, lenticular printing can still be used effectively. You’ve most likely seen this used in children’s books, where different frames of a scene are cut into thin strips and spliced together under a ridged piece of plastic. The visible frame then changes depending on your angle of view. These styles can still be used on promotional materials, such as cups or postcards, as well as full-size advertisements.

Spanish Child Advocacy agency, ANAR, provided a well known example of lenticular advertising in 2013. Using horizontal lenticular lines rather than vertical, ANAR were able to target their message of support to children under 10.

Motion designs are versatile techniques that can be used across a broad range of projects in different mediums. While the digital uses are obvious and abundant, remember that there are also ways to include motion graphics in printed projects.

Of course, if neither digital nor print motion graphics are suitable for your project, you could always consider magical means. Please note, however, that magical means are only available to select customers at this time. Please contact your local school for wizardry and witchcraft for more information.

For more information on using motion graphics, or if you’re interested in browsing the marketplace offerings:


Tyson Pink

About the Author Tyson Pink

Tyson is a freelance writer and editor, and LEGO tragic. He drinks too much coffee. You can find him at his website, or follow him on Twitter.