Animation im Webdesign 
(Transitional Interfaces)
Julian Mengel - vitamin J 
User Experience Designer 
bei Micromata 
Seit 2000 Hauptberuflich als 
Web / Screen / GUI Desig...
Überblick 
Motivation - warum Animation 
Wo kommen wir her, wo gehen wir hin 
Best Practice Beispiele / Anwendungsfälle 
P...
Technologisch sind wir mit Webstandards – 
im Bezug auf Animation – 
Heute auf einem Stand, den wir mit Flash 
bereits vor...
1. Warum Animation (Technologiesicht) 
• CSS3 
• JS 
• Web GL 
• SVG (Animation über SMIL) 
• Anforderungen bzgl. Screengr...
Warum Animation (Designsicht) 
Windows, Android, IOS haben Wandel eingeleitet 
Animation ist/wird integraler Bestandteil d...
Dient die Animation der 
Usability? 
Persönlichkeit der Applikation? 
Freude an der Nutzbarkeit?
Nein? 
dann lass es.
Warum viele sich sträuben… 
Animated Gif’s 
HTML - Blink and marquee tag 
Animierte Mauszeiger 
Flash Intros 
sinnlose Jav...
Unsinnige Animation ist gefährlich…
Beispiel für sinnvolle Animation 
https://www.google.de/design/spec/animation/authentic-motion.html
Beispiel für sinnvolle Animation
Beispiel für sinnvolle Animation
Beispiel für sinnvolle Animation
Beispiel für sinnvolle Animation 
emotionale Bindung 
Trägheit oder Verformung von Objekten kann das Erlebnis 
spielerisch...
Little Big Details
Sinnvolle Animation - Storytelling
Beispiel für sinnvolle Animation 
Verständnis 
Schlecht Besser
Beispiel für sinnvolle Animation 
Verständnis 
noch Besser
Zusammenfassung 
Wie Produkte aussehen und wie sich anfühlen sind beides Schlüssel zum 
Erfolg eines erfolgreichen Produkt...
Illusion of Life? 
Wie kann man digitalen Objekte zum leben erwecken?
Squash and stretch
Anticipation
Slow in slow out
Exaggeration
Follow Through and Overlapping
http://the12principles.tumblr.com/
Tools, Tools, 
Tools…
Tools - Javascript 
Famo.us 
Javascript Framework 
Positiv 
• Sehr gute Dokumentation 
• Sehr gute Lernbeispiele 
• Sehr g...
Tools - Javascript 
Framer.js 
Javascript Prototyping library, Photoshop integration (Ebenene Export nach 
Framer), 
Posit...
Writing Code for animation is like 
drawing Pixels with a Microwave.
Tools - Design 
Facebook Origami 
Quartz Composer plugin 
Positiv 
• gute Beispiele 
• integrierte Spring Physics 
• Große...
Tools - Design 
Animate CSS 
Sehr einfach zu integrierende CSS-librarry 
• gute Presets 
• sehr einfach zu integrieren 
ht...
Tools - Design 
Bounce JS 
Über visuellen Editor werden CSS3 Animationen erzeugt 
• enthält Presets 
• Animationen können ...
Animation Webdesign -Webmontag Kassel 2014
Animation Webdesign -Webmontag Kassel 2014
Nächste SlideShare
Wird geladen in …5
×

Animation Webdesign -Webmontag Kassel 2014

527 Aufrufe

Veröffentlicht am

Veröffentlicht in: Präsentationen & Vorträge
  • Als Erste(r) kommentieren

Animation Webdesign -Webmontag Kassel 2014

  1. 1. Animation im Webdesign (Transitional Interfaces)
  2. 2. Julian Mengel - vitamin J User Experience Designer bei Micromata Seit 2000 Hauptberuflich als Web / Screen / GUI Designer twitter: @vitamin_J
  3. 3. Überblick Motivation - warum Animation Wo kommen wir her, wo gehen wir hin Best Practice Beispiele / Anwendungsfälle Prinzipien guter Animation Tools (Prototyping / Javascript / CSS)
  4. 4. Technologisch sind wir mit Webstandards – im Bezug auf Animation – Heute auf einem Stand, den wir mit Flash bereits vor 10 Jahren erreicht hatten.
  5. 5. 1. Warum Animation (Technologiesicht) • CSS3 • JS • Web GL • SVG (Animation über SMIL) • Anforderungen bzgl. Screengrößen
  6. 6. Warum Animation (Designsicht) Windows, Android, IOS haben Wandel eingeleitet Animation ist/wird integraler Bestandteil des Screen und Interaktionsdesigns Apps werden zu interaktiven Erlebnissen Emotionale Bindung zwischen Apps und Nutzern (UX) Animationen machen Interaktionen einfacher und intuitiver fördern das Nutzererlebnis
  7. 7. Dient die Animation der Usability? Persönlichkeit der Applikation? Freude an der Nutzbarkeit?
  8. 8. Nein? dann lass es.
  9. 9. Warum viele sich sträuben… Animated Gif’s HTML - Blink and marquee tag Animierte Mauszeiger Flash Intros sinnlose Javascript Animationen
  10. 10. Unsinnige Animation ist gefährlich…
  11. 11. Beispiel für sinnvolle Animation https://www.google.de/design/spec/animation/authentic-motion.html
  12. 12. Beispiel für sinnvolle Animation
  13. 13. Beispiel für sinnvolle Animation
  14. 14. Beispiel für sinnvolle Animation
  15. 15. Beispiel für sinnvolle Animation emotionale Bindung Trägheit oder Verformung von Objekten kann das Erlebnis spielerischer und ansprechender machen
  16. 16. Little Big Details
  17. 17. Sinnvolle Animation - Storytelling
  18. 18. Beispiel für sinnvolle Animation Verständnis Schlecht Besser
  19. 19. Beispiel für sinnvolle Animation Verständnis noch Besser
  20. 20. Zusammenfassung Wie Produkte aussehen und wie sich anfühlen sind beides Schlüssel zum Erfolg eines erfolgreichen Produktes Physikalisch korrekte Animationen wirken natürlicher, steigern das Nutzererlebnis und helfen bei der Orientierung von Screen-übergängen Mittels Animation kann man digitalen Produkten einen persönlichen Charakter verleihen
  21. 21. Illusion of Life? Wie kann man digitalen Objekte zum leben erwecken?
  22. 22. Squash and stretch
  23. 23. Anticipation
  24. 24. Slow in slow out
  25. 25. Exaggeration
  26. 26. Follow Through and Overlapping
  27. 27. http://the12principles.tumblr.com/
  28. 28. Tools, Tools, Tools…
  29. 29. Tools - Javascript Famo.us Javascript Framework Positiv • Sehr gute Dokumentation • Sehr gute Lernbeispiele • Sehr gute Beispiele • Live Coding • 3D Physics animation engine Negativ: • Steile Lernkurve, erweiterte Programmier-Kenntnisse erforderlich
  30. 30. Tools - Javascript Framer.js Javascript Prototyping library, Photoshop integration (Ebenene Export nach Framer), Positiv • Sehr gute Dokumentation • gute Beispiele, • Live Preview, • integrierte Spring-physics • kostenlose Trial Negativ: Kostenpflichtig - 79 Dollar
  31. 31. Writing Code for animation is like drawing Pixels with a Microwave.
  32. 32. Tools - Design Facebook Origami Quartz Composer plugin Positiv • gute Beispiele • integrierte Spring Physics • Große community Negativ: • Quartz Composer ist schlecht dokumentiert • Mac only • bei komplexen Animationen wird es kompliziert • reines Prototyping tool
  33. 33. Tools - Design Animate CSS Sehr einfach zu integrierende CSS-librarry • gute Presets • sehr einfach zu integrieren http://daneden.github.io/animate.css/
  34. 34. Tools - Design Bounce JS Über visuellen Editor werden CSS3 Animationen erzeugt • enthält Presets • Animationen können individuell angepasst werden http://bouncejs.com/

×