Successfully reported this slideshow.

Functional Animation with SVG - OpenWest 2018

1

Share

Upcoming SlideShare
Inclusive Design 101
Inclusive Design 101
Loading in …3
×
1 of 80
1 of 80

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Functional Animation with SVG - OpenWest 2018

  1. 1. SVG + JS + UX => FUNCTIONAL ANIMATION Presented by Duke Speer @Duke3D OpenWest - June, 2018 joind.in/talk/view/24378
  2. 2. SLIDES ARE HERE: JOIND.IN/TALK/VIEW/24378 NOTE – CODEPEN SLIDES AND DEMOS HOTLINK THROUGH TO PENS joind.in/talk/view/24378
  3. 3. https://hashnode.com/post/start-simple-using-svgs-on-web-cikiox3se00i9sf53929d4qet HOW DEEP WILL YOU DIVE? "If you don't know SVG you can't call yourself a web developer; call yourself a web enthusiast" - Dmitry Baranovskiy (Creator of Snap.svg)
  4. 4. https://httparchive.org/reports/state-of-the-web HOW DEEP WILL YOU DIVE?
  5. 5. https://hashnode.com/post/start-simple-using-svgs-on-web-cikiox3se00i9sf53929d4qet HOW DEEP WILL YOU DIVE? You can't be a web performance expert without being an image expert! ~ Jason Grigsby
  6. 6. STATE OF THE SVG Mature Image Format • 1.0 Spec effective 2001 • 1.1 Spec effective 2011 New Features In Progress • 2.0 Spec Candidate Sept.2016 • Animation API Frameworks Galore • Vue.js • React.js • Greensock • jQuery plugins • Raphael.js • Meteor … many more
  7. 7. STATE OF THE SVG
  8. 8. STATE OF THE SVG Responsive by design Container wraps a fully addressable DOM Both CSS and Javascript Media Queries based on Viewbox Accessible – Aria labels
  9. 9. VERSATILE CODE IMPLEMENTATIONS
  10. 10. https://commons.wikimedia.org/wiki/File:Bitmap_VS_SVG.svg VECTOR IMAGE FORMAT
  11. 11. https://commons.wikimedia.org/wiki/File:SVG-v-PNG8-enlarged.jpg INFINITELY SCALABLE – SMALL TEXT FILE
  12. 12. https:// RASTER OR VECTOR?
  13. 13. https:// RASTER OR VECTOR?
  14. 14. https:// RASTER OR VECTOR?
  15. 15. https:// RASTER OR VECTOR?
  16. 16. MESH GRADIENTS flickr.com/photos/danlin/202637886
  17. 17. 316K 62K PORTRAIT SMOOTHING OR VECTOR SIMPLIFICATION?
  18. 18. https://
  19. 19. OPTIMIZE! Illustrator – Export As instead of Save As Reduce Points – Simplify Shapes Reduce decimal points to 1 (Illustrator won’t go to zero.) Check for clean paths – human readable Keep layer names used in animation – discard rest. Remove CRUFT, unused groups, etc.
  20. 20. OPTIMIZE! SVGOMG Peter Collingridge's SVG Editor SVGO / SVGO-GUI High Performance SVGs
  21. 21. https:// OPTIMIZE!
  22. 22. ICONS - ONE APPROACH FOR GRACEFUL DEGRADATION Use this syntax that draws on browser tag error correction in older browsers: <svg width="96" height="96"> <image xlink:href="svg.svg" src="svg.png" width="96" height="96"/> </svg> And here’s the magic: Browsers that support SVG will read the code as: <svg width="96" height="96"> <image xlink:href="svg.svg" width="96" height="96"/> </svg> They ignore the unexpected src attribute and will load and show only the SVG file.
  23. 23. ICONS - ONE APPROACH FOR GRACEFUL DEGRADATION Use this syntax that draws on browser tag error correction in older browsers: <svg width="96" height="96"> <image xlink:href="svg.svg" src="svg.png" width="96" height="96"/> </svg> Browsers which do not support SVG will ignore the unknown svg tag and xlink attribute. Thanks to parser error correction, image is replaced with img and the code is rendered as: <img src="svg.png" width="96" height="96"/> and will show the fallback bitmap image.
  24. 24. SVG SPRITES V. ICON FONTS For very simple images (e.g. icons), it may be preferrable not to create a separate SVG file. Write all the content inline in HTML. It saves a request and could even be shorter than the file path. <svg height="160" width="160"> <path d="M5 1v14l9-7"> <image src="images/next.png"> </svg> source: https://lynn.ru/examples/svg/en.html u
  25. 25. SVG ACCESSIBILITY <svg aria-labelledby="title” height="160" width="160"> <title id="title">Next Article Arrow</title> <path d="M5 1v14l9-7"> <image src="images/next.png"> </svg> u
  26. 26. http://www.joeharrison.co.uk/projects/responsivelogos MEDIA QUERIES INSIDE SVG CONTAINER
  27. 27. BRIEF HISTORY OF ANIMATION Disney Animation: The Illusion of Life By Frank Thomas and Ollie Johnston - 1981
  28. 28. 12 PRINCIPLES OF ANIMATION FOR STORYTELLING Exaggeration Solid drawing Arc Staging Secondary Action Appeal Straight Ahead Action and Pose to Pose Timing & Spacing Follow Through and Overlapping Action Anticipation Squash and Stretch Slow In and Slow Out
  29. 29. https:// COMPUTER-BASED ANIMATION Principles of Traditional Animation Applied to 3D Computer Animation By John Lasseter, Pixar - 1987
  30. 30. PRINCIPLES OF ANIMATION FOR USER EXPERIENCES Exaggeration Solid drawing Arc Staging Secondary Action Appeal Straight Ahead Action and Pose to Pose Timing & Spacing Follow Through and Overlapping Action Anticipation Squash and Stretch Slow In and Slow Out
  31. 31. INTERACTION ANIMATION
  32. 32. PRINCIPLES OF ANIMATION FOR USER INTERFACES Purposeful Easing Morphing Zooming Loading Secondary Action Target 0.2 – 0.6 seconds Establish Context Reveal a Mental Model for Info Architecture Reveal Persistant Navigation Tools Draw eye to changes of state Connect related objects Minimize perceived long loading times Communicate brand mood and personality
  33. 33. MENTAL MODELS ?
  34. 34. https://www.choicefurnituresuperstore.co.uk/images/Pd- Global-Furniture/Vermont-Oak/3-Pd-Global-Vermont-Oak- Chest-of-Drawers-2-Over-3-Drawers.jpg MENTAL MODELS
  35. 35. https://www.choicefurnituresuperstore.co.uk/images/Pd- Global-Furniture/Vermont-Oak/3-Pd-Global-Vermont-Oak- Chest-of-Drawers-2-Over-3-Drawers.jpg MENTAL MODELS Underwear Socks T-Shirts Sweaters Shorts
  36. 36. MENTAL MODELS ?
  37. 37. MENTAL MODELS
  38. 38. EASE IN-OUT
  39. 39. https://www.smashingmagazine.com /2015/05/functional-ux-design-animations/ EXPAND INTO VIEW – CONTRACT TO “HOME” Principles: - Follow Through - Exaggeration via Bounce style Ease In/Out
  40. 40. EASING ADDS REALISM
  41. 41. https:// EASES – BEZIER CURVE
  42. 42. https:// EASES – BEZIER CURVE
  43. 43. Under 200ms likely not perceived – not worth the overhead to load extra code. Larger animations take more time to appear high quality / have smooth motion Unless filling time to disguise a long load, over 600ms is likely holding up the user. My default is 0.3sec. Adding 20-30 ms is significant for improving readability. TIMING
  44. 44. FACILITATE USER EXPERIENCE https://www.sarasoueidan.com/blog/building-a-circular-navigation-with-svg/
  45. 45. FACILITATE USER EXPERIENCE
  46. 46. FACILITATE USER EXPERIENCE
  47. 47. DESIGN GUIDELINES FOR INTERACTIVE ANIMATIONS Meet a stated purpose! Animation is not decoration. It should guide or facilitate the user reaching a goal. Keep it simple and unobtrusive – great interface animation is gentle and almost invisible! Design to be non-blocking and interruptible. Enable input and respond immediately to that input. Brief - Long enough to be seen, but not so long that the user is waiting for it to finish on a repetitive activity. Reduce Cognitive Load – remove mystery and confusion about what’s off the edges of the screen. Call user’s attention to asynchronous changes of state – (e.g. order status goes from submitted to accepted.) Cluster and associate related objects via color, contrast, and opacity. Use low-hanging fruit – transforming position, rotation, scale, opacity and color incurs the least overhead.
  48. 48. DESIGN GUIDELINES FOR INTERACTIVE ANIMATIONS A good UX designer can easily explain the logic behind each decision in a design concept. This includes the information architecture, the hierarchy of page content, the flow and the assumptions made. ~ Amit Daliot, Lead architect - 5ive
  49. 49. DESIGN GUIDELINES FOR INTERACTIVE ANIMATIONS Interface animation should match your brand’s mood, voice and personality. Does this example promote Apple’s reputation for sophisticated elegance?
  50. 50. EXPRESSING BRAND STORY & PERSONALITY https://www.behance.net/gallery/32158897/Brand-Identity-by-Ramotion-Branding-Agency-in-SF
  51. 51. EXPRESSING BRAND STORY & PERSONALITY https://www.behance.net/gallery/32158897/Brand-Identity-by-Ramotion-Branding-Agency-in-SF
  52. 52. DESIGN GUIDELINES FOR INTERACTIVE ANIMATIONS Best practice – include animation styles in your Brand and UX Style Guide to create consistency across all platforms and more DRY reusable code segments. Drawer animation Our side-to-side animations are influenced by the carriage of the IBM Executive electric typewriters. We extracted qualities like precision and accuracy from the machine. The carriage slings smoothly as it returns to the left margin, stopping exactly in the same place every time. https://ibm-design-language.eu-de.mybluemix.net/design/language/experience/animation/elements/
  53. 53. DESIGN GUIDELINES FOR INTERACTIVE ANIMATIONS Best practice – include animation styles in your Brand and UX Style Guide to create consistency across all platforms and more DRY reusable code segments. IBM 2560 multi-function card machine The sliding of the multi-function card machine is used as inspiration for the mobile drop down. As a punched card is fed from the hopper, it gracefully pushes out from the left side. Then, the card halts for a split second and slides out of sight, the way the drop down zips back up into place. https://ibm-design-language.eu-de.mybluemix.net/design/language/experience/animation/elements/
  54. 54. DESIGN GUIDELINES FOR INTERACTIVE ANIMATIONS Best practice – include animation styles in your Brand and UX Style Guide to create consistency across all platforms and more DRY reusable code segments. IBM 729 magnetic tape unit The rhythmic oscillations of tape reels in motion got us thinking about a user’s waiting experience. If a user watches search results load, showing the machine at work relays a sense of efficiency. The swift and even balance of the spinning circles indicates that progress is being made. https://ibm-design-language.eu-de.mybluemix.net/design/language/experience/animation/elements/
  55. 55. RESOURCES Animating Your Brand by Donovan Hutchinson in 24 Ways has a more realistic perspective on including animation in style guides. https://24ways.org/2015/animating-your-brand/ Val Head gave a talk on Motion In Design Systems: Animation, Style Guides, and the Design Process – ($19 to access the recording.) https://aycl.uie.com/virtual_seminars/motion_in_design_systems_animation_style_guides_and _the_design_process One of the better write-ups about animation considerations is by Sarah Drasner in her article Animation in Design Systems published by 24 Ways https://24ways.org/2016/animation-in-design-systems/ Note - The charts on the following pages are from this article.
  56. 56. SET REALISTIC OBJECTIVES
  57. 57. SET REALISTIC OBJECTIVES https://ibm-design-language.eu-de.mybluemix.net/design/language/experience/animation/elements/
  58. 58. CONFIRM INTERACTIONS
  59. 59. COMMUNICATE CONTEXT CONSISTENTLY
  60. 60. COMMUNICATE CONTEXT CONSISTENTLY
  61. 61. DRAW ATTENTION TO STATE CHANGES
  62. 62. ZOOM / FLOW INTO DETAILS AND TASKS
  63. 63. ZOOM / FLOW INTO DETAILS AND TASKS
  64. 64. HINT AT NEXT STEPS ALONG GARDEN PATH
  65. 65. HELP TELL YOUR SITE OR PRODUCT’S STORY
  66. 66. CHOOSING THE PROPER TOOL http://www.themetisfiles.com/wp-content/ uploads/2016/04/Hammer-and-Nail.jpg Use low-hanging fruit – transforming position, rotation, scale, opacity and color incurs the least overhead. CSS 2D transforms of SVG elements render most efficiently. Using JS to increment and repaint elements may get pixelated during the transform. (CSS/Greensock solves this.) GSAP SVGMorph and SVGDraw have no equal for sophisticated effects that work on all browsers.
  67. 67. ADD INTEREST …
  68. 68. WHEN THE POINT COUNTS DON’T MATCH …
  69. 69. READ MORE
  70. 70. CLIENT PROJECT DEMO Removed – Not approved for public release.
  71. 71. SVG + JS + UX => FUNCTIONAL ANIMATION Presented by Duke Speer @Duke3D OpenWest - June, 2018 joind.in/talk/view/24378
  72. 72. RESOURCES – NEW TO SVG Start simple: using SVGs on web https://hashnode.com/post/start-simple-using-svgs-on-web-cikiox3se00i9sf53929d4qet Using SVG – An Intro to Icons on CSS-Tricks https://css-tricks.com/using-svg/ Book for beginners … Practical SVG https://abookapart.com/products/practical-svg Tutorial for first SVG Animation https://designmodo.com/svg-animation/
  73. 73. RESOURCES – SVG IN FRONTEND FRAMEWORKS React https://css-tricks.com/productive-in-react/ https://www.youtube.com/watch?v=PGUMRVowdv8 Vue http://vueconf.us/workshops/?focus=sarah-drasner https://github.com/sdras/animating-vue-workshop Nuxt for Vue https://nuxtjs.org/guide Raphael http://dmitrybaranovskiy.github.io/raphael/ Meteor https://guide.meteor.com/ui-ux.html SVG Drawing Tool - Inkscape - FOSS/Free https://inkscape.org/en/about/features/
  74. 74. RESOURCES – SVG Dimitri - You Don’t Know SVG https://www.youtube.com/watch?v=SeLOt_BRAqc Reduced Motion Option in UI for Accessibility https://hugogiraudel.com/2018/03/19/implementing-a-reduced-motion-mode/ 3D to SVG Converter http://stylecampaign.com/blog/2014/03/3D-to-SVG/ One Project’s Character Animation Process https://playgroundinc.com/blog/the-playground-vector-animation-process/ Cell Animation by hand https://www.smashingmagazine.com/2015/09/creating-cel-animations-with-svg/
  75. 75. RESOURCES – SVG Blog Re: The problems that Greensock solves https://greensock.com/css-performance Greensock Intro https://www.youtube.com/watch?v=v9GK4Rf6w3A Getting Started with Greensock – another viewpoint https://www.youtube.com/watch?v=v9GK4Rf6w3A Convert to SVG https://hashnode.com/post/start-simple-using-svgs-on-web-cikiox3se00i9sf53929d4qet https://image.online-convert.com/convert-to-svg Animation in Design Systems https://24ways.org/2016/animation-in-design-systems/ https://css-tricks.com/the-importance-of-context-shifting-in-ux-patterns/ Animation Tech Compared https://css-tricks.com/comparison-animation-technologies/ Benchmarks https://css-tricks.com/weighing-svg-animation-techniques-benchmarks/ Greensock - Motion on a path https://davidwalsh.name/gsap-svg Courseware https://frontendmasters.com/courses/svg-animation/

×