12 LESSONS from An Event Apart San Francisco – ? 5: Val Head was the 9th speaker at An Event Apart San Francisco last week. Her session, Motion In Design Systems: Animation, Style Guides, and the Design Process, led us through everything designers and developers need to make web animation work for our whole team.
Val covered guidelines for designing animation that fits your brand, making animation part of your design process, and documenting your animation decisions in your style guide for future use.
It takes a village
Animation works best when the whole team plans for it. If it’s simply a wish—say on the part of the designer—everyone in the chain will be too busy with higher priority tasks, and the animation won’t get made.
Which is a pity, because well-considered animations (such as Val showed) can make interactions much easier to understand. Additionally, if choreographed by the entire team as part of a bigger picture, animations can reinforce your brand. (Done without consideration, and without the support of the entire team, they’re more likely to contradict important brand attributes.)
Better animation requires good communication, comprised of…
- Shared vocabulary
- Established animation values
- Documentation and repeatability
Deliverables – the things that start conversations
The first deliverables for animation are conversation starters: storyboards and sketches that help the team envision where there is potential for animation in their user flow, see how an animation could make the screen easier for users to understand, and begin to plan how to animate between screens. Best of all, anyone can create a sketch or storyboard: artistic talent is not required (these are not Pixar animations but simple conveyors of ideas).
In every storyboard, we should draw or describe a trigger (what starts the action?), an action (what takes place?), and a quality (how does it happen?).
Motion comps and interactive prototypes
Motion comps answer questions about how the animations should look, move, and behave, and allow for quick iteration. When handing them off to the development team, it’s important to include the duration and delay values; details of the easing used; repeat values, and iteration counts.
Interactive prototypes come next. They allow the team to explore what the interaction will be like to use, decide if it feels right in context, and determine how animations interact with input or real data. Val took us through a number of tools that can be used for prototyping, from apps like Atomic to good old HTML, CSS, and JavaScript.
Define and document – save future you time and effort
Interface animations are most effective when they work in concert as part of the bigger picture. Designing and choreographing your web animation efforts from the top down leads to more effective animations that integrate into your design system. And, defining a motion language for your brand can help your team to develop a shared vision from which to work.
Don’t just create animations—define and document them. Define your brand in motion with the same care you take for your logo, style guide, and pattern libraries. Use design principles to inform motion decisions. Study Brand Pillars, Voice & Tone, and Experience Pillars, and build your animation guidelines from there. Animations are best when they’re brand-appropriate and repeatable.
Get input from everyone
Having brought us through the rationale for animations and a variety of potential workflows, Val took us deeply into the details that make for effective animations, and ended with a game plan enabling everyone on the team to become an undercover animation superhero.
Tomorrow I’ll be back with more top takeaways from another AEA San Francisco 2016 speaker. The next AEA event, An Event Apart St. Louis, takes place January 30-February 1, 2017
See also: 4 tools for designing better UI animation by Val Head.
