Animation Webdesign -Webmontag Kassel 2014

443 Aufrufe

Veröffentlicht am

Veröffentlicht in: Präsentationen & Vorträge
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
443
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Das Thema Animation erwacht wieder aus einem Dornröschen Schlaf.
    - Wenige sprechen und Schreiben darüber
    - Während Vorbereitung Transitional interfaces (Pascale D’Sylva) gestolpert.
  • Flash vor 10 Jahren auf 98% aller Rechner verfügbar
    In den letzten 10 Jahren hatten Designer die Wahl zwischen Gift & Galgen
    entweder Flash und keine IOS Nutzer
    oder Webstandards keine Animation für IE-Nutzer .
  • CSS3 (2D und 3D Transformationen, Keyframes) sind heute Browserübergreifend nutzbar (ab IE10/11)
    Javascript kein Webstandard aber defacto Standard
  • Alle Betriebsystemhersteller nutzen Animation als Gestaltungselement. Mit Flat Design wurde Animation auch zunehmend als Gestaltungselement eingesetzt (Windows 8).
    Apps oder Digitale Services werden zu interaktiven Erlebnissen
    Animationen machen es einfacher Nutzer emotional zu erreichen
  • Diese Animation stiftet keine nötige Unruhe, sie ist unaufdringlich und tut nur das was notwendig ist.
    - Beispiel für ein transitional interface
  • Beispiel für ein transitional interface
    Kein unnötiger Wechsel in einen Detail Dialog, sondern eine kurze klare Animation
  • - Beispiel für ein transitional interface
  • Spielerische Elemente
    Die Objekte reagieren träge, Elastisch zeigen Verformung und wirken dadurch lebendig, da sie sich Physikalisch korrekt verhalten
    Haben eine Stofflichkeit
  • Die Animation von einem Zustand zum nächsten hat nicht nur spielerischen Charakter
    Lenkt den Focus des Benutzers kurz auf die Animation und wird dadurch besser wahrgenommen
    Bei sehr kleinen Devices iWatch (z.B animierte Player Leiste)
  • 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/

    ×