queo blog

Basics für die Animation von User Interfaces

Mit dem Aufstieg von Flat Design haben wir uns fürs Erste von skeomorpher Darstellung mit übertriebenen Schatten und verspielten Texturen im Web und in User Interfaces verabschiedet. Moderne UI Elemente sind flach und minimalistisch, mit dem Fokus auf Typographie, Fotos und den Inhalt an sich. Zusätzlich ist das Web noch responsive und schlank geworden. Doch die grafischen Mittel sind schnell ausgeschöpft, die Gestaltung ein bisschen monoton geworden und die Interaktion manchmal etwas unersichtlich. Wie kann man nun aus der Masse heraustreten?

Bedeutung von Animation

Wie einige von euch schon ahnen, ist der neue Trend klar –  Animation und Motion Design. Dies hat sich auch mehrmals auf der WebExpo 2015 bestätigt. Neue Web-Technologien und Prototyping-Tools machen es möglich, die UI-Elemente in Bewegung zu setzen, schnell und einfach wie nie zuvor. Doch vorbei ist die Zeit von Flash-Intros und übertriebener Effektschlacht, heutzutage geht es primär darum, Animation vor allem sinnvoll zu nutzen.

Bewegung kann uns helfen, die Zustandsänderung der UI-Elemente zu verdeutlichen und dadurch nachvollziehbar und sichtbar zu machen. Dazu zählen vor allem Buttons, Navigationselemente, Listen, Formulare und modale Fenster. Insbesondere bei Apps ist es auch erwünscht, die verschiedenen Ansichten in einer kontinuierlichen Weise darzustellen.

Ein gutes Beispiel hierfür ist das Material Design von Google, welches Design Guidelines für eine gemeinsame visuelle Sprache der Google Produktfamilie bereitstellt. Dabei werden nicht nur das Layout, die Styles, die UI-Komponenten oder die Patterns definiert, auch die Animation wird gleichberechtig betrachtet. Sie wird zu einem notwendigen Bestandteil des User Interface Designs.

Was soll animiert werden?

Um nicht von der dunklen Seite der Animation verführt zu werden, muss man einige Grundlagen und Prinzipen beachten. Dem Designer wird ein neues Mittel in die Hände gelegt und es liegt nun an ihm, dieses mit Vernunft zu benutzen. Eine visuelle Überforderung kann negative Auswirkungen auf die User Experience haben.

Es wird empfohlen, nur fünf grundlegende Attribute der Elemente zu animieren:

  • Position
  • Größe
  • Rotation
  • Ursprung
  • Transparenz

Durch die Kombination dieser kann man alles bauen, was bei einem User Interface benötigt wird. Wie kann ich aber meine UI-Elemente so animieren, dass ihre Bewegung natürlich aussieht und genau das ausdrückt, was erwünscht ist? Damit haben sich schon die Jungs in den Walt Disney Studios in den 1930er-Jahren beschäftigt und dabei zwölf Gesetze der Animation festgelegt. Diese kann man wunderbar auch auf die User Interfaces übertragen.

Rolle des Designers

Was bedeutet das alles für uns Web- und Interactive Designer? Vor allem müssen wir anfangen, die Animation als einen wichtigen Bestandteil des Interfaces zu betrachten, denn eine gut entworfene Animation vermittelt Inhalte, ohne Worte benutzen zu müssen und kann dadurch die UX des Produktes deutlich verbessern. Um Up-to-Date zu bleiben, müssen wir unser Toolset um Motion–Design-Werkzeug erweitern. Heutzutage gibt es eine große Auswahl an Technologien, Prototyping-Apps und Frameworks.

Ein guter Startpunkt ist sicher CSS3, u.a. mit @keyframes. Mehr dazu hat Tobias Ahlin in seinem Vortrag bei der WebExpo 2015 zusammengefasst. Eine beliebte Option, Animation zu prototypen und zu testen, ist Adobe After Effects. Ein Workflow hierfür wurde bei Smashing Magazine vorgestellt. Wer mit JavaScript vertraut ist, kann auch den Vorteil von vielen Frameworks und Tools benutzen, wie beispielsweise Framer.js. Marie Schweiz hat in ihrem Vortrag bei der WebExpo gezeigt, dass man auch mit Stift und Zettel effektiv arbeiten kann.

wow

Quelle: Internet

Möglichkeiten gibt es also viele und jeder kann nach seinen Präferenzen oder Fähigkeiten einen guten Einstiegspunkt finden. Und wie sieht es mit euch aus? Habt ihr schon mit Animation angefangen? Und welche Tools verwendet ihr dafür und warum?


2 thoughts on “Basics für die Animation von User Interfaces

  1. Guter Beitrag Alex 😉 Gibt es Projekte bei queo, wo du das schon eingesetzt hast? Ich persönlich bin eigentlich eher ein Fan davon Animation eher in der Interaktion einzusetzen (so wie Google bei Android). Bei inhaltlicher Präsentation muss man denke ich sehr aufpassen, ob und wo eine Animation Sinn macht.

    • Hallo, Elisa!
      Der Autor ist nicht Alex, sondern ich è.é
      Und um deine Frage zu beantworten: ich hatte selber noch keine Gelegenheit, animation einzusetzen. Wie gesagt, muss die Animation vor allem sinnvoll sein. Und das tritt vor allem bei der Interaktion auf, ja 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.