Web Animation using JavaScript: Develop & Design (Develop and Design)

(やまだぃちぅ) #1

Elegance


The line between frivolous and consequential motion design is an easy one to discern:
does a particular piece of motion design satisfy one of the best practices discussed in the
“Utility” section of this chapter? If not, remove it. It’s frivolous, and it’s jeopardizing the
usability of your UI.


Don’t be frivolous


To hone your judgment about what is frivolous, download the most popular apps, play
with each extensively, and judge whether they feature animation to a greater or lesser
extent than your app does. Play close to attention to what each animation conveys, and
why it conveys it. If you feel that these apps use animation to a much lesser extent than
yours does, consider toning back the motion design in your UI.


There’s one exception   to  this    don’t-be-frivolous  mantra—read on!

Your one opportunity to be frivolous


A page’s loading sequence—when all of your elements animate into view from an initial
state of invisibility—is your one opportunity to be over-the-top and frivolous with your
animations. Why? Because this sequence happens only once, and it won’t repeatedly get
in the way of the user’s interaction with your site. Also, this is your moment to leverage
your motion design skills to deliver a great first impression on your site.

Free download pdf