Val Head’s talk was about animation in interfaces. It covered what to animate, when to animate, and how to get those animations communicated to a team so that they would actually be built.
reasons people think they can’t animate: time, budget, ideas never get made, the evil developers never make it! ;) #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Is that a @wilto in @vlh's slides? #aeasea #hahahahahaha pic.twitter.com/989sCEYrlL
— Anne Gibson (@perpendicularme) April 3, 2017
(Yes, yes it is a Mat Marquis.)
Once upon a time designers create animations and then toss them over the wall to developers and go “go with it”… #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
…then developers get annoyed and can’t do what the designers want and everyone’s annoyed. #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
You “just” need to include your whole team to do good ui animation #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Need shared vocabulary
Establish animation values for the brand
Document so it’s repeatable #aeasea— Anne Gibson (@perpendicularme) April 3, 2017
Good UI animation takes the whole team. @vlh #aeasea
— Stephanie 🔮 Web Witch (@seaotta) April 3, 2017
https://twitter.com/travis_fulton/status/849023961950072836
An important point. When I’m working flat I often forget to think about animation and its possibilities.
“This website is a one-state thing that doesn’t move” is a common situation #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Animation should not be a last minute revelation. Include everyone in the conversation, so we all can get animated – together! @vlh #aeasea
— Rebecca Watson (@RVivusArtDesign) April 3, 2017
Storyboards/sketching are a good start to sketching motion ideas #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
We’re not talking about Pixar’s gorgeous storyboard frames here. We’re not making an animated film #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
A sketch storyboard #aeasea pic.twitter.com/NA56SQQxOq
— Anne Gibson (@perpendicularme) April 3, 2017
Where is the potential for animation in this flow? Where would it help? How could motion make this easier to understand? #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
How do we go from place A to place B and can animation help that? #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
“I have this crazy idea…” is also totally cool, and you should storyboard it #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Anyone can make a storyboard & storyboards allow for quick iterations with little commitment. #aeasea
— Stephanie 🔮 Web Witch (@seaotta) April 3, 2017
But what do i draw?
1. Trigger: what starts the action? Draw or describe in words #AEASEA— Anne Gibson (@perpendicularme) April 3, 2017
2. Action: what takes place? Draw in as many frames as needed.
3. Quality: how does it happen? Describe in words #AEASEA— Anne Gibson (@perpendicularme) April 3, 2017
You can be terrible at drawing and write words and still do storyboards. (And vice versa!) #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Storyboards are great for early stages, you can get input from people who aren't designers. #aeasea
— Stephanie 🔮 Web Witch (@seaotta) April 3, 2017
Motion comps: quick animations of changes that actually are animated #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Motion comps answer questions like:
Exactly how should this animation look?
How should it move?
Which items should move? #AEASEA— Anne Gibson (@perpendicularme) April 3, 2017
Where should things move? When do they move?
Dot he animation qualities reflect our brand? #AEASEA— Anne Gibson (@perpendicularme) April 3, 2017
Tools for motion comps:
Adobe AfterEffects or Flash or Animate CC
Hype – for making HTML 5 stuff #AEASEA— Anne Gibson (@perpendicularme) April 3, 2017
Motion comps give a definitive feel to how an animation will feel. These are high fidelity, almost like a motion style tile. #aeasea
— Stephanie 🔮 Web Witch (@seaotta) April 3, 2017
Motion comps also answer the question: Do the animation qualities reflect our brand? Important to consider when adding animation. #aeasea
— Stephanie 🔮 Web Witch (@seaotta) April 3, 2017
Motion Comp hand-offs: make sure to include…
– duration and delay values
– details of easing
– repeat values, iteration counts#AEASEA— Anne Gibson (@perpendicularme) April 3, 2017
Interactive prototypes: allows the user to interact with the comp #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
What will the interaction feel like to use? Will it feel responsive, seem like it’s timed well? #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Does the animation feel right in context? Once it’s built into the rest of the page does it make sense? #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
How does it work with real input and real data? Your 3-thing animation blows up on 20 items #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Tools: Framer, Principal, Atomic: Smart defaults to customize. HTML, Framer, Codepen: wide open canvas #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Framer does great things, but you can’t transfer it to production code easily. #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Atomic doesn’t have much carryover…. otoh it’s a browser-based app with detailed timeline tools for building #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Atomic makes it easy to share a library with your team too #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
HTML, CSS, and js prototypes are easy tools. Take a screenshot with a button in front of it. #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Green sock animation platform is also handy for creating prototypes #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
“If you ask someone if they want to see something in slow motion, they will never say no.” #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
You don’t have to use all these tools or all these tools in a specific order. Do what works for you #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
share internally or externally depending on goals
Make as few or as many as you need to answer a question #AEASEA— Anne Gibson (@perpendicularme) April 3, 2017
Get feedback and input along the way – better chance of getting buy-in at the end #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Define your brand in motion. Art direction, tone of voice come through in motion just like in color and type #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
1. Brand personality and point of view. (Brand guideline might help.)
2. Prototype, explore iterate #AEASEA— Anne Gibson (@perpendicularme) April 3, 2017
3. Extract animation design decisions. #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Use design principles to inform motion decisions. “Clear” or “uncluttered”
Use brand pillars, voice & tone, experience pillars #AEASEA— Anne Gibson (@perpendicularme) April 3, 2017
Use design principles to inform motion decisions when it comes to defining motion for your brand. #aeasea
— Stephanie 🔮 Web Witch (@seaotta) April 3, 2017
Build animation guidelines from brand and design principles. #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Intuit has a really great concise style guide online https://t.co/9i1CEiV5Fc #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Intuit:
Lead the way
Keep it simple
Have fun#AEASEA— Anne Gibson (@perpendicularme) April 3, 2017
1 maps to Human, reassuring, friendly
2 maps to crisp, minimal, concise
3 maps to lively, charming, cheerful#AEASEA— Anne Gibson (@perpendicularme) April 3, 2017
Entrance animation to be friendly and charming: a little overshoot and bounce #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Concise to reassuring could be comes in to location and then zooms forward a notch. Knows what it’s doing #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Minimal – maybe pops in quick and doesn’t come in from the bottom #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Something doesn’t have to come in all the way from the bottom to give impression that it came in from the bottom #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Not all animation will fit best in every place, so context will count #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Documenting animation decisions:
Durations – ranges, rhythm. How long? How fast?
Properties – what’s animated? All at once? #AEASEA— Anne Gibson (@perpendicularme) April 3, 2017
Easing values that are used – document them. (You can’t tell what they are by looking at them.) #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Document physical space – weight and mass, depth and layers. #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Shorter durations for simple animations like fades or color changes #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Longer durations for large movements like page transitions, drag and drop, drawers, etc. #aeasea
— Anne Gibson (@perpendicularme) April 3, 2017
Optimal timing may change based on viewport – big screens and small screens may need different durations #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Can set classes for durations, can set limits. You can be strict or general (with why) #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Easing values: you can really have a point of view. Select custom easing values for the basics #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Just creating custom easings to use give your product a different feel and animation equity #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Different content/objects need different curves depending on whether interactive or not #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Establish an easing palette for hierarchy and expressiveness. #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Ways to document: probably needs to be interactive, so designers can play with the demo #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Sales force does a very declarative description “Use this for this and that for that.” #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
People really love Material Design’s motion guidelines – but it’s also *Google’s* brand. #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
If you follow Material Design to the letter when it’s their brand, that’s weird. Take what works for you *as a starting point* #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Consistent forces of gravity – apply them
How many layers to your interface?
Distance between layers? #AEASEA— Anne Gibson (@perpendicularme) April 3, 2017
If you document depth, you can use it consistently and everything looks like it’s coming from the same place #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Which properties do you animate? Why and when? Only 2D? 3D? #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Scale, position, rotation, and opacity are the most performant and common. Use the combo that works for you #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Named Animations can be good to put in your style guide
Names can be anything that is meaningful to you #AEASEA— Anne Gibson (@perpendicularme) April 3, 2017
Show examples and descriptions to define named animations in your docs. #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Call out and define classic principles of animation that you use. (Follow through, squash & stretch, etc.) #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Create the animations you need, not every possible animation #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
You probably will never need the 180 degree flip, for example #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Purpose-based animation for repetitive but negative.
Subtle and personality for frequent but good#AEASEA— Anne Gibson (@perpendicularme) April 3, 2017
Attention on the fix for negative unique issues.
Bigger personality for room for rare but very positive
These all merge#AEASEA— Anne Gibson (@perpendicularme) April 3, 2017
Don't try and use fun animations when there's an error. User is probably frustrated and won't be amused. #AEASEA
— Stephanie 🔮 Web Witch (@seaotta) April 3, 2017
share what you’re working on and why so that it’s easier to get buy in and get everyone’s mark on it #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Even when it’s final, provide an easy channel for questions and input #AEASEA
Style guides are living things!— Anne Gibson (@perpendicularme) April 3, 2017
Encourage your team/stakeholders to see the value in animation
Share examples, model discussion#AEASEA— Anne Gibson (@perpendicularme) April 3, 2017
Be prepared for small changes over time to your animation. Don’t launch 50 animations all at one shot #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Don’t wait for permission. If you think you have a great idea, make a prototype, comp, etc. #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
For animation, having a thing to show is the best way to get buy-in #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
https://t.co/9v8067g9zP for Val’s book on designing interface animation #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Sketchnotes from Krystal Higgins