SlideShare ist ein Scribd-Unternehmen logo
1 von 36
Downloaden Sie, um offline zu lesen
Animation im Webdesign 
(Transitional Interfaces)
Julian Mengel - vitamin J 
User Experience Designer 
bei Micromata 
Seit 2000 Hauptberuflich als 
Web / Screen / GUI Designer 
twitter: @vitamin_J
Überblick 
Motivation - warum Animation 
Wo kommen wir her, wo gehen wir hin 
Best Practice Beispiele / Anwendungsfälle 
Prinzipien guter Animation 
Tools (Prototyping / Javascript / CSS)
Technologisch sind wir mit Webstandards – 
im Bezug auf Animation – 
Heute auf einem Stand, den wir mit Flash 
bereits vor 10 Jahren erreicht hatten.
1. Warum Animation (Technologiesicht) 
• CSS3 
• JS 
• Web GL 
• SVG (Animation über SMIL) 
• Anforderungen bzgl. Screengrößen
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
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 Javascript Animationen
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 
spielerischer und ansprechender machen
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 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
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 gute Beispiele 
• Live Coding 
• 3D Physics animation engine 
Negativ: 
• Steile Lernkurve, erweiterte Programmier-Kenntnisse erforderlich
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
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 community 
Negativ: 
• Quartz Composer ist schlecht dokumentiert 
• Mac only 
• bei komplexen Animationen wird es kompliziert 
• reines Prototyping tool
Tools - Design 
Animate CSS 
Sehr einfach zu integrierende CSS-librarry 
• gute Presets 
• sehr einfach zu integrieren 
http://daneden.github.io/animate.css/
Tools - Design 
Bounce JS 
Über visuellen Editor werden CSS3 Animationen erzeugt 
• enthält Presets 
• Animationen können individuell angepasst werden 
http://bouncejs.com/
Animation Webdesign -Webmontag Kassel 2014

Weitere ähnliche Inhalte

Andere mochten auch

Draft - vid
Draft - vidDraft - vid
Draft - vidmkp28
 
Establecimiento de una presencia eficaz en la web
Establecimiento de una presencia eficaz en la webEstablecimiento de una presencia eficaz en la web
Establecimiento de una presencia eficaz en la weblaufanny
 
Clown precioso okokokok payaso
Clown precioso okokokok payasoClown precioso okokokok payaso
Clown precioso okokokok payasoingarvi
 
Calentamiento global a.a.
Calentamiento global a.a.Calentamiento global a.a.
Calentamiento global a.a.Alex Alvarez
 
Pasos para elaboración del proyecto entre pares chiriqui
Pasos para elaboración del proyecto entre pares chiriquiPasos para elaboración del proyecto entre pares chiriqui
Pasos para elaboración del proyecto entre pares chiriquiMEDUCA
 
Historia ..[1]
Historia ..[1]Historia ..[1]
Historia ..[1]kmila701
 
Entrevista a un sacerdote olmeca
Entrevista a un sacerdote olmecaEntrevista a un sacerdote olmeca
Entrevista a un sacerdote olmecalicapoot
 
Unsaludoparamisamigos con frases de sabiduria
Unsaludoparamisamigos con frases de sabiduriaUnsaludoparamisamigos con frases de sabiduria
Unsaludoparamisamigos con frases de sabiduriaingarvi
 

Andere mochten auch (20)

Draft - vid
Draft - vidDraft - vid
Draft - vid
 
Rio alto
Rio altoRio alto
Rio alto
 
Manejo del estrés
Manejo del estrésManejo del estrés
Manejo del estrés
 
instituto
institutoinstituto
instituto
 
Geo8.2
Geo8.2Geo8.2
Geo8.2
 
Establecimiento de una presencia eficaz en la web
Establecimiento de una presencia eficaz en la webEstablecimiento de una presencia eficaz en la web
Establecimiento de una presencia eficaz en la web
 
Clown precioso okokokok payaso
Clown precioso okokokok payasoClown precioso okokokok payaso
Clown precioso okokokok payaso
 
Calentamiento global a.a.
Calentamiento global a.a.Calentamiento global a.a.
Calentamiento global a.a.
 
Iphone4 (2)
Iphone4 (2)Iphone4 (2)
Iphone4 (2)
 
Presentacion del vino
Presentacion del vinoPresentacion del vino
Presentacion del vino
 
Caza tesoro
Caza tesoroCaza tesoro
Caza tesoro
 
Pasos para elaboración del proyecto entre pares chiriqui
Pasos para elaboración del proyecto entre pares chiriquiPasos para elaboración del proyecto entre pares chiriqui
Pasos para elaboración del proyecto entre pares chiriqui
 
Historia ..[1]
Historia ..[1]Historia ..[1]
Historia ..[1]
 
Entrevista a un sacerdote olmeca
Entrevista a un sacerdote olmecaEntrevista a un sacerdote olmeca
Entrevista a un sacerdote olmeca
 
Caqueta turistico 2011
Caqueta turistico 2011Caqueta turistico 2011
Caqueta turistico 2011
 
Nuclear
NuclearNuclear
Nuclear
 
El cuervo
El cuervoEl cuervo
El cuervo
 
Unsaludoparamisamigos con frases de sabiduria
Unsaludoparamisamigos con frases de sabiduriaUnsaludoparamisamigos con frases de sabiduria
Unsaludoparamisamigos con frases de sabiduria
 
3 estacion caso 2
3 estacion caso 23 estacion caso 2
3 estacion caso 2
 
Verbo to be
Verbo to beVerbo to be
Verbo to be
 

Ähnlich wie Animation Webdesign -Webmontag Kassel 2014

Einführung in User Experience Design
Einführung in User Experience DesignEinführung in User Experience Design
Einführung in User Experience Designchmoser79
 
"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag
"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag
"Wir arbeiten genauso wie davor - nur anders", bitkom-VortragErgosign GmbH
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developerchristianschweinhardt
 
Wie Sie Mit Design Sprints Echten Digitalen Wandel Schaffen
Wie Sie Mit Design Sprints Echten Digitalen Wandel SchaffenWie Sie Mit Design Sprints Echten Digitalen Wandel Schaffen
Wie Sie Mit Design Sprints Echten Digitalen Wandel SchaffeniTiZZiMO
 
Mehr Gäste durch das Web
Mehr Gäste durch das WebMehr Gäste durch das Web
Mehr Gäste durch das WebAngelika Röck
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapGregor Biswanger
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGapIndiginox
 
Low Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
Low Budget Usability Testing Webtreff Konstanz Patric Schmid BenutzerzentraleLow Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
Low Budget Usability Testing Webtreff Konstanz Patric Schmid BenutzerzentralePatric Schmid
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGapStefan Kolb
 
IA Konferenz 2018 | Das Prototypen-Dilemma
IA Konferenz 2018 | Das Prototypen-DilemmaIA Konferenz 2018 | Das Prototypen-Dilemma
IA Konferenz 2018 | Das Prototypen-Dilemmausability.de
 
Das Prototypen-Dilemma
Das Prototypen-DilemmaDas Prototypen-Dilemma
Das Prototypen-DilemmaJohannes Baeck
 
Präsentation Digital Fitness Webinar Künstiliche Intelligenz
Präsentation Digital Fitness Webinar Künstiliche IntelligenzPräsentation Digital Fitness Webinar Künstiliche Intelligenz
Präsentation Digital Fitness Webinar Künstiliche IntelligenzStephanMeyer25
 
JavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerJavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerDennis Wilson
 
Website Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre TeamarbeitWebsite Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre TeamarbeitOliver Annen
 
Agile UX - Wege zur agilen nutzerzentrierten Produktentwicklung
Agile UX - Wege zur agilen nutzerzentrierten ProduktentwicklungAgile UX - Wege zur agilen nutzerzentrierten Produktentwicklung
Agile UX - Wege zur agilen nutzerzentrierten ProduktentwicklungRainer Gibbert
 
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...eparo GmbH
 
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Bokowsky + Laymann GmbH
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDConny Stier
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätPeter Rozek
 
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...eparo GmbH
 

Ähnlich wie Animation Webdesign -Webmontag Kassel 2014 (20)

Einführung in User Experience Design
Einführung in User Experience DesignEinführung in User Experience Design
Einführung in User Experience Design
 
"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag
"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag
"Wir arbeiten genauso wie davor - nur anders", bitkom-Vortrag
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developer
 
Wie Sie Mit Design Sprints Echten Digitalen Wandel Schaffen
Wie Sie Mit Design Sprints Echten Digitalen Wandel SchaffenWie Sie Mit Design Sprints Echten Digitalen Wandel Schaffen
Wie Sie Mit Design Sprints Echten Digitalen Wandel Schaffen
 
Mehr Gäste durch das Web
Mehr Gäste durch das WebMehr Gäste durch das Web
Mehr Gäste durch das Web
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Low Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
Low Budget Usability Testing Webtreff Konstanz Patric Schmid BenutzerzentraleLow Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
Low Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
IA Konferenz 2018 | Das Prototypen-Dilemma
IA Konferenz 2018 | Das Prototypen-DilemmaIA Konferenz 2018 | Das Prototypen-Dilemma
IA Konferenz 2018 | Das Prototypen-Dilemma
 
Das Prototypen-Dilemma
Das Prototypen-DilemmaDas Prototypen-Dilemma
Das Prototypen-Dilemma
 
Präsentation Digital Fitness Webinar Künstiliche Intelligenz
Präsentation Digital Fitness Webinar Künstiliche IntelligenzPräsentation Digital Fitness Webinar Künstiliche Intelligenz
Präsentation Digital Fitness Webinar Künstiliche Intelligenz
 
JavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerJavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
 
Website Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre TeamarbeitWebsite Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre Teamarbeit
 
Agile UX - Wege zur agilen nutzerzentrierten Produktentwicklung
Agile UX - Wege zur agilen nutzerzentrierten ProduktentwicklungAgile UX - Wege zur agilen nutzerzentrierten Produktentwicklung
Agile UX - Wege zur agilen nutzerzentrierten Produktentwicklung
 
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
 
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
 
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
 

Animation Webdesign -Webmontag Kassel 2014

  • 1. Animation im Webdesign (Transitional Interfaces)
  • 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.
  • 5. 1. Warum Animation (Technologiesicht) • CSS3 • JS • Web GL • SVG (Animation über SMIL) • Anforderungen bzgl. Screengrößen
  • 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?
  • 10. Warum viele sich sträuben… Animated Gif’s HTML - Blink and marquee tag Animierte Mauszeiger Flash Intros sinnlose Javascript Animationen
  • 11. Unsinnige Animation ist gefährlich…
  • 12. Beispiel für sinnvolle Animation https://www.google.de/design/spec/animation/authentic-motion.html
  • 16. Beispiel für sinnvolle Animation emotionale Bindung Trägheit oder Verformung von Objekten kann das Erlebnis spielerischer und ansprechender machen
  • 18. Sinnvolle Animation - Storytelling
  • 19. Beispiel für sinnvolle Animation Verständnis Schlecht Besser
  • 20. Beispiel für sinnvolle Animation Verständnis noch Besser
  • 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?
  • 27. Follow Through and Overlapping
  • 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/

Hinweis der Redaktion

  1. 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.
  2. 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 .
  3. CSS3 (2D und 3D Transformationen, Keyframes) sind heute Browserübergreifend nutzbar (ab IE10/11) Javascript kein Webstandard aber defacto Standard
  4. 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
  5. Diese Animation stiftet keine nötige Unruhe, sie ist unaufdringlich und tut nur das was notwendig ist. - Beispiel für ein transitional interface
  6. Beispiel für ein transitional interface Kein unnötiger Wechsel in einen Detail Dialog, sondern eine kurze klare Animation
  7. - Beispiel für ein transitional interface
  8. Spielerische Elemente Die Objekte reagieren träge, Elastisch zeigen Verformung und wirken dadurch lebendig, da sie sich Physikalisch korrekt verhalten Haben eine Stofflichkeit
  9. 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)