2. Julian Mengel - vitamin J
User Experience Designer
bei Micromata
Seit 2000 Hauptberuflich als
Web / Screen / GUI Designer
twitter: @vitamin_J
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. Technologisch sind wir mit Webstandards –
im Bezug auf Animation –
Heute auf einem Stand, den wir mit Flash
bereits vor 10 Jahren erreicht hatten.
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.
8. Dient die Animation der
Usability?
Persönlichkeit der Applikation?
Freude an der Nutzbarkeit?
21. 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
22. Illusion of Life?
Wie kann man digitalen Objekte zum leben erwecken?
30. 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
31. 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
32. Writing Code for animation is like
drawing Pixels with a Microwave.
33. 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
34. Tools - Design
Animate CSS
Sehr einfach zu integrierende CSS-librarry
• gute Presets
• sehr einfach zu integrieren
http://daneden.github.io/animate.css/
35. Tools - Design
Bounce JS
Über visuellen Editor werden CSS3 Animationen erzeugt
• enthält Presets
• Animationen können individuell angepasst werden
http://bouncejs.com/
Notes de l'éditeur
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)