Design Trend: Motion in Web Design
Animation, video backgrounds, GIFs, and all the fun hover states in-between.
Animation is stupidly popular in web design right now. 2014 in web format looks a little something like a couple GIFs melded with some autoplaying video, coupled with subtle hover animations over buttons and forms.
Showing How It Works
We’re seeing a lot of animation used to show how a product is made or how it works.
The landing page for Facebook’s new iOS application, Paper, uses full-screen video to showcase the unique gestural controls designed into the app. It’s a stunning website, and the technical feat behind the video astounds as you study the details.
FiftyThree uses a lot of great motion throughout its website. The site for its newest product — Pencil — seems innocuous enough, until halfway down the page, your scrolling motion unravels the hardware of its product, giving you a peek at what’s inside.
Apple’s Mac Pro Homepage is perhaps the most well-known example of dissecting a product through motion and scrolling on a website. Including video, animated graphics, and scroll-based trigger animations, this one’s got a wealth of animation inspiration.
Explaining a Concept
Some great websites utilize motion and animation to explain an otherwise abstract concept. Here’s a few great examples.
Coin uses a lot of nice motion techniques as you scroll through the site. However, it excels at selling its concept through animation. Seeing four credit cards combine into one — the ubiquitous Coin — explains the product concept in a succinct manner.
Dataveyes doesn’t simply explain what it does (analyze data), but it also makes a case for why it does it — all conveyed through the clever animation of particles moving throughout the backdrop of its website.
Adding Style
And of course, sometimes motion is used purely for style. The following are great examples of cool, attractive motion applied to the web.
This 2013 annual report doesn’t need animated gifs, or statistics that grow as you scroll, but it certainly looks stylish for the better.
This page is filled with motion that occurs as you hover and scroll. It’s purely cosmetic, but it adds motion to an otherwise modular page.
The animation present in Names for Change isn’t vital to its layout. It is, however, a wonderful detail that brings a slight bit of engagement to an otherwise static page.
Telling a Story
Some sites use motion to supplement a narrative. These go beyond the superficial, instead augmenting how we interpret a narrative.
The New York Times’s story juxtaposes Mary Pilon’s text with illustrations by Attila Futaki. The illustrations, which move as the reader scrolls, add a sense of depth that complements — and enhances — the emotions running throughout the narrative.
This website uses well-timed scrolling animation to build the journey of the fracking industry. This animated story brings engagement to what might otherwise remain a series of statistics.
What’s Next?
I suspect we’ll be seeing more fabulous sites that implement motion in new and innovative ways.
Tell me — what examples of motion in animation are your favorite?
