Let's Talk
“Wow. Just… wow. This is such a great design. You’ve totally captured our brand and everyone here loves it. Just one little thing: could we maybe add some flashy swoops, or maybe a video, or some cartoon characters? Then you’ll have it!”
Designers hear this type of feedback regularly. It’s something we’ve all become accustomed to hearing. Don’t get me wrong, it’s good feedback, and it usually means you’ve nearly nailed the design. Sometimes it’s just a sharper serif, a less hipster-laden hero image, or a quippier tagline. It’s the keystone challenge for any UX team to create a look that pleases the client while achieving brand consistency and industry relevance. But, if the design is spot-on, and the little tweaks leave your client in a state of underwhelmity™, what then?
My response is often: “Wait until you see it move.”
The hurdles to motion on the Web have been cleared. Flash has had its day, CSS3 brought new tools to front-end developers, and countless plug-ins and frameworks have unleashed Web animation to the masses. Poorly executed animation often assails users with features they didn’t know they didn’t need, and more often goes wholly unnoticed.
You clicked “next page”? Check out how the entire browser window FLIPS OVER LIKE A PIECE OF PAPER! Complete with a page-turning “whoosh” sound effect and everything!
The right balance gives the nearly-there static design an aura of quality, polish, and--dare I say--delight.
Which, when explained to your client, sounds great. They love it. Who wouldn’t want their users to experience delight? But you’re in a boardroom with a handful of static designs on the big screen, and you’ve naught but a whiteboard at your disposal. Animations are best seen animated, which can be difficult to convey verbally.
THE CHALLENGE:
How do you show what your absurdly gorgeous animations will be like without actually building them?
Designers are regularly tasked with presenting several themes or options, each exploring a particular avenue, sometimes at the behest of the client, sometimes at the whim of our own inspiration. It’s silly, nay, imprudent, to suggest fully or partially building each design into functioning HTML complete with animations.
But your clients are sharp; they’ll want to see something. You can certainly try the same tack as your design approach--a quick competitive analysis will turn up a bevy of little and large animations from which to start your discussion. However, evaluating 15 different button-click animations is difficult, and quickly exhausts both parties. You may have a previous project that showcases the animation you have in mind, but it’s likely not the solution for your client’s needs. Plus, who wants to have the same animation as that other guy?
I want a NEW animation that’s MINE! ANI-MINE-TION!
If you’ve got a motion-savvy client, you can try whiteboarding your genius animation concepts. Sometimes, some simple hand gestures are enough. But these are difficult to properly document, and your pantomimes will likely need further explanation to parties new to the project.
So, your static designs should likely remain just that. How do you explain to your client that there’s more to come?
THE SOLUTIONS, PROBABLY:
- Before setting pointer to pixel, make “animation” a separate stop on the bus route of Web design (somewhere between “Homepage Designtown” and “Here-Is-Your Website...ville.”). Your client will have a better understanding of what’s to come--and how to make more helpful suggestions to static designs--once animation discovery is a part of the design process. You’ll forestall unnecessary modifications to the design you so carefully crafted once your client understands interactive life will be breathed into the design at a later phase.
- Set expectations for the type of animations to come. The word “animation” comes with some legit baggage. It conjures images of dragons in-flight, explosions, cartoon characters, or exploding cartoon dragons. Work with your client to establish the right level of subtlety in your animation. Slide, fade, and glow instead of boom, bang, and flash.
- Maintain a library of frequently-utilized animations in a wireframe-style, barebones theme. Rather than generating an animated prototype of your designs, simply pull up a few animation options to show alongside your static mockups. Common patterns such as an off-canvas navigation, button hover, and dropdown menus can be showcased in a few different styles to give your client a better feel for the fully-developed application.
- As recommended in any “Design Better!” article, maintain open and frequent communication with your client. During the initial cut-up phases, let your client take a test-drive of the animations you’re working on. Include animation revisions in your early production sprints, and quickly work out the right interactions as the project gets rolling. Your talking points from the design presentation will still be fresh in the client’s mind (and yours), and they’ll be pleased to see a quick follow-up--which eases any Design Approval-Remorse (which is totally a thing) and generates excitement for following production sprints.
RECOMMENDATIONS
- Animate.css The de-facto CSS animation library contains dozens of common patterns that are easily integrated with existing stylesheets.
- Magic Animations It’s like Animate.css, but with wackier animations.
- Hover.css It’s also like Animate.css, but with a focus on hovered elements, like buttons.
- Zurb Motion UI Part of Zurb’s already sterling collection of development frameworks, Motion UI gives SASS developers a highly-customizable toolkit for creating custom-chained animations from a set of base patterns.
- AniJS While it’s not pure CSS, AniJS requires no intimate knowledge of JavaScript to begin animation. A JavaScript-like syntax allows users to write highly-specific animation rules beyond the abilities of a CSS-only library.
- BounceJS A JavaScript library that allows developers to create smooth animation sequences by customizing and chaining tween effects. Just check it out, it’s hard to explain, but it’s friggin’ awesome.