Animation Webdesign -Webmontag Kassel 2014

36
Animation im Webdesign (Transitional Interfaces)

Transcript of Animation Webdesign -Webmontag Kassel 2014

  • 1. Animation im Webdesign(Transitional Interfaces)

2. Julian Mengel - vitamin JUser Experience Designerbei MicromataSeit 2000 Hauptberuflich alsWeb / Screen / GUI Designertwitter: @vitamin_J 3. berblickMotivation - warum AnimationWo kommen wir her, wo gehen wir hinBest Practice Beispiele / AnwendungsfllePrinzipien guter AnimationTools (Prototyping / Javascript / CSS) 4. Technologisch sind wir mit Webstandards im Bezug auf Animation Heute auf einem Stand, den wir mit Flashbereits vor 10 Jahren erreicht hatten. 5. 1. Warum Animation (Technologiesicht) CSS3 JS Web GL SVG (Animation ber SMIL) Anforderungen bzgl. Screengren 6. Warum Animation (Designsicht)Windows, Android, IOS haben Wandel eingeleitetAnimation ist/wird integraler Bestandteil des Screen undInteraktionsdesignsApps werden zu interaktiven ErlebnissenEmotionale Bindung zwischen Apps und Nutzern (UX)Animationen machen Interaktionen einfacher und intuitiver frdern dasNutzererlebnis 7. Dient die Animation derUsability?Persnlichkeit der Applikation?Freude an der Nutzbarkeit? 8. Nein?dann lass es. 9. Warum viele sich strubenAnimated GifsHTML - Blink and marquee tagAnimierte MauszeigerFlash Introssinnlose Javascript Animationen 10. Unsinnige Animation ist gefhrlich 11. Beispiel fr sinnvolle Animationhttps://www.google.de/design/spec/animation/authentic-motion.html 12. Beispiel fr sinnvolle Animation 13. Beispiel fr sinnvolle Animation 14. Beispiel fr sinnvolle Animation 15. Beispiel fr sinnvolle Animationemotionale BindungTrgheit oder Verformung von Objekten kann das Erlebnisspielerischer und ansprechender machen 16. Little Big Details 17. Sinnvolle Animation - Storytelling 18. Beispiel fr sinnvolle AnimationVerstndnisSchlecht Besser 19. Beispiel fr sinnvolle AnimationVerstndnisnoch Besser 20. ZusammenfassungWie Produkte aussehen und wie sich anfhlen sind beides Schlssel zumErfolg eines erfolgreichen ProduktesPhysikalisch korrekte Animationen wirken natrlicher, steigern dasNutzererlebnis und helfen bei der Orientierung von Screen-bergngenMittels Animation kann man digitalen Produkten einen persnlichenCharakter verleihen 21. Illusion of Life?Wie kann man digitalen Objekte zum leben erwecken? 22. Squash and stretch 23. Anticipation 24. Slow in slow out 25. Exaggeration 26. Follow Through and Overlapping 27. http://the12principles.tumblr.com/ 28. Tools, Tools,Tools 29. Tools - JavascriptFamo.usJavascript FrameworkPositiv Sehr gute Dokumentation Sehr gute Lernbeispiele Sehr gute Beispiele Live Coding 3D Physics animation engineNegativ: Steile Lernkurve, erweiterte Programmier-Kenntnisse erforderlich 30. Tools - JavascriptFramer.jsJavascript Prototyping library, Photoshop integration (Ebenene Export nachFramer),Positiv Sehr gute Dokumentation gute Beispiele, Live Preview, integrierte Spring-physics kostenlose TrialNegativ:Kostenpflichtig - 79 Dollar 31. Writing Code for animation is likedrawing Pixels with a Microwave. 32. Tools - DesignFacebook OrigamiQuartz Composer pluginPositiv gute Beispiele integrierte Spring Physics Groe communityNegativ: Quartz Composer ist schlecht dokumentiert Mac only bei komplexen Animationen wird es kompliziert reines Prototyping tool 33. Tools - DesignAnimate CSSSehr einfach zu integrierende CSS-librarry gute Presets sehr einfach zu integrierenhttp://daneden.github.io/animate.css/ 34. Tools - DesignBounce JSber visuellen Editor werden CSS3 Animationen erzeugt enthlt Presets Animationen knnen individuell angepasst werdenhttp://bouncejs.com/