Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Animate a Smarter UI: Tips for Motion on the Web

2,772 views

Published on

Join the conversation: #smarterUI

Animate a Smarter UI: Tips for Motion on the Web
Gabe Martin (@gabemartin) & Robby Grant (@fourgrant)

Some of the mp4 examples are here: http://d.pr/f/xUx6/4DjJHI5t (not all but some)

Description:
You’ve seen them. The blinking, pulsing eyesores. Animations used by developers and designers who think “Because I can” is a good excuse.
It’s not.
On the web, there should be a reason for everything. Every transition, triggered event, and state change needs a purpose.
In this session, we’ll cover the only 5 reasons to ever use web animations:
1. Focus
2. Notify
3. Hint
4. React
5. Orient
(Plus one bonus — but it’s a secret.)
We’ll break down each category, looking at what works and what doesn’t — and why. You’ll see some brilliant uses of UI animation. And some terrible displays of superfluous bouncies.
Then, we’ll dig into some real code and give a live demo of creating some simple, purposeful animations with a little personality.
You’ll leave with a few new tricks up your sleeve and a fresh outlook on animations on the web.

http://schedule.sxsw.com/2014/events/event_IAP23559

Published in: Design
  • Be the first to comment

Animate a Smarter UI: Tips for Motion on the Web

  1. 1. ANIMATE ASMARTERUI Tips for motion on the web @fourgrant and @gabemartin #smarterUI
  2. 2. It’syourjob
 toadapt
  3. 3. Learnmoreaboutthestuff we offer on our website. Evolution&Adaptation Callto Action!
  4. 4. Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation
  5. 5. Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation
  6. 6. Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation
  7. 7. Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation
  8. 8. Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation
  9. 9. Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation
  10. 10. Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation
  11. 11. Animationcanaddlife
  12. 12. Animationcanaddspace
  13. 13. Animationcanadddelight
  14. 14. Onlyuseanimation when itimprovesuser experience The Golden Rule:
  15. 15. 5reasonsto use 
 webanimation
  16. 16. Focus
  17. 17. Focus clarify an action isolate specific content direct user attention
  18. 18. Focus Clarify an action
  19. 19. Focus Isolate specific content
  20. 20. Focus Direct user attention
  21. 21. Focus Hint
  22. 22. Hint
  23. 23. Hint guide the user suggest an action highlight an option
  24. 24. Hint Guide the user Gmail tab example (removed)
  25. 25. Hint Suggest an action
  26. 26. Hint Highlight an option
  27. 27. Focus NotifyHint
  28. 28. Notify
  29. 29. Notify show that content requires attention alert the user to updates inform the user of new content
  30. 30. Notify Show that content requires attention Facebook Message example
  31. 31. Notify Alert the user to updates
  32. 32. Notify Alert the user to updates
  33. 33. Notify Inform the user of new content
  34. 34. Focus React NotifyHint
  35. 35. React
  36. 36. React give confidence to user confirm an action prove the interface is working
  37. 37. React Give confidence to the user
  38. 38. React Confirm an action
  39. 39. React Prove the interface is working
  40. 40. Focus React NotifyHint Orient
  41. 41. Orient
  42. 42. Orient show user’s relationship to content give context expand virtual space
  43. 43. Orient Show user’s relationship to content
  44. 44. Orient Give context
  45. 45. Orient Expand virtual space
  46. 46. Focus React NotifyHint Orient Personify
  47. 47. Personify
  48. 48. Personify
  49. 49. Personify
  50. 50. Personify
  51. 51. Focus React NotifyHint Orient Personify
  52. 52. Focus React NotifyHint Orient Personify
  53. 53. Onlyuseanimation when itimprovesuser experience The Golden Rule:
  54. 54. CodeDemo
  55. 55. Thankyou

×