Simplicity is the key to great design. Anything that complicates or irritates should be immediately jettisoned, in favour of a cleaner approach, and functionality should always come before beauty.
As such I still get shivers when I think about animation and web design, given the amount of user experience crimes committed over the years. Animation was a dirty word. It meant too many crazy gifs, too many flashing ads, or even worse, it meant ‘innovative’ Flash websites.
Lots of websites still suffer from animation overload, but when done with appropriate amounts of restraint I think motion can help improve the user experience.
Moving backgrounds, rolldown navigation and micro UX effects were three of the web design trends I highlighted back in January. I think a broader trend is the rise of animation / motion, and no doubt it will be on next year’s list.
I thought I’d explore some of the different areas of a website (or mobile app) where motion can come into play, to improve the user experience by communicating meaning, or as a visual flourish that bridges the gap between clicking and loading.
Before we begin, let us doff our hats in the direction of HTML5 and CSS3, not to mention better browsers, faster devices, nicer screens, and quicker internet connections. All of these things have allowed designers to use motion in a way that doesn’t suck.
A bunch of these examples come from the ever-enlightening Codrops, which should probably be on your reading list if it isn’t already.
Ok, brace yourself for some gifs…
Page header transitions
There are numerous ways of animating your page header, should you wish to do so.
Page loading effects
As well as headers, you can add fast, lightweight animated effects as a new page loads. Choose from parallelograms, windscreen wipers and spill effects, among others.
Infinite scroll fade ins
Note how Samsung displays additional content as you scroll down the page…
Take ownership of your hover states! Make your website stand out from the crowd by focusing on the little details. Try using fades, washes, different font sizes, and so on.
Dynamic / animated charts
Why bother with static images when you can render a chart on the fly?
Some sites use CSS animations in a really subtle way, for example a page background that changes ever so slightly.
It is possible to scroll individual columns, as well as whole pages.
I’ve seen a bunch of mobile apps that use folds like this, either vertical or horizontally.
Progress bars and buttons
A ‘submit’ button that also acts as a progress bar.
The slow reveal
This is perhaps best illustrated by the before and after images of the D-Day landings, as seen on The Guardian. Drag your mouse across the picture from left to right (and vice versa) to flip between old and new pictures.
Mobile menu transitions
This is an example of a staggered transition, from Paper. Various other mobile animations and transitions can be found at Capptivate.
Minimal / innovative forms
What if forms weren’t so headache inducing, so long, so paginated, so goddamned boring? Form optimisation should be a priority, and there are some new design patterns coming into play…
Rich arrows / scroll buttons
Scrolling is all the rage, so it makes sense to choose a quality design for those navigational arrows.
Pushdown navigation and pull-out sliders (as can be seen on Medium, below) are growing in popularity as a web design trend.
What other examples have you seen out in the wild? Are animations and motion transitions here to stay? Do leave a comment below.