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…