---
layout: post
title: Motion In Design Systems: Animation, Style Guides, and the Design Process - Val Head - Front-trends Warsaw 2017
date: 2017-05-24 18:00:00 +01:00
categories:
- conferences
tags: [front-trends, notes, __category__]
---
These are my notes from Front-trends 2017 Warsaw conference.
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. In this session, Val will cover 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. All the things you need to make web animation work for you and your team.
The deliverables we are using are failing us.
If animation is left to the end, it can never be more than a decoration.
Good UI animation takes the whole team. You need everyone feel that's important and valuable.
Better comms about the animation makes it easier to buy-in, come up with better ideas, repeatable reusable patterns.
Start talking deliverables:
They are for exploration. Not pixar-level, but simpler.
It makes you thing where's the potential for the animation in the flow. "Is it useful here?", "How will the anim make this screen easy to understand?", "I have this idea"
Anyone can make one early in the process
You can spend a small amount of time to better thing if it's a good idea to develop
What to draw in a storyboard:
- trigger - what starts the action - draw or describe in words
- action - what takes place? - draw as many frame as needed
- quality - how does ithappen? describe in words
(see example of storyboard for dragging in the slides)
A storyboard can help a team be sure they're talking about the same thing.
- videos that playback the details of how the anim looks and behaves
- hi-fi of animation representation
(example on screen - lots of differences between state A and B - how do I develop it?)
It's also a good way to have conversation about animation.
(shows more examples)
Motion comps are not fully interactive, though.
- what will it like to be to use?
- does it feel right in the context?
- will it interact with real data?
There are lots of prototype tools, you can also have smart defaults to customize.
"Framer", "Atomic" which is browser bases, "Codepen" :D
Use the GSAP framework to prototype things, even if you're not using it in the end.
Top secret tip: If you presenting a prototype, you can slow it down from the console -> animations -> 25% tab
- Share internally or externally depending on goals
- Make a few or as many as you need
- Get feedback and input along the way
- Use design principles to inform motion decisions
- (see slides)
Create your custom ease-in-out as a starting place
designinterfaceanimation.com the book
web animations workshops
@vlh