Webdesign-Trend

Webdesign-Trend: Rich Animations

Mit gezielt eingesetzten Animationen Webseiten aufwerten

Vorab: Weniger ist mehr! Um einen Besuch auf der eigenen Webseite unterhaltsamer und innovativer zu gestalten, werden immer häufiger Animationen integriert. Diese sollen die Story-Elemente der Webseite unterstützen und aufwerten. Die dafür aktuellen Trend-Animationen werden hier näher vorgestellt.

Intro-Screens

Ein Eyecatcher als Einstieg: Ein animierter Intro-Screen überspielt den Aufbau einer Webseite und verhindert, dass der Besucher sieht, wie sich die Seite nach und nach zusammenbaut. Gerade bei Internetauftritten mit viel Content auf der Startseite ist der Einsatz einer solchen Animation empfehlenswert.

Beispiel:

Screenshot matteozanga.it

Lade-Animationen und Lade-Icons

Ladezeiten sind lästig und ermüdend. Um diese Zeit für den Besucher möglichst angenehm zu gestalten werden Ladeanimationen eingesetzt. Es sollte allerdings darauf geachtet werden, dass die Animationen möglichst einfach gehalten werden und keinen Sound beinhalten. Optisch sollten sie natürlich zum Rest der Seite und der verwendeten Farbpalette passen.

Lade Icons gif

 

Hover-Animationen

Hover-Effekte verleihen einer Webseite tiefe und geben dem Besucher Feedback, wenn er mit der Maus über ein Call-to-Action-Element fährt. Unsichere Nutzer neigen auch dazu per Mouseover zu testen, ob es sich um einen Link oder anderweitige Interaktionsflächen handelt.

Zu den Hover-Beispielen

Page-Transitions

Animiert zwischen Unterseiten einer Webseite wechseln? Kein Problem. Dafür gibt es die sogenannten Page-Transitions. Sie ermöglichen einen flüssigen Übergang beim Wechseln der Seiten. Allerdings sollte man mit diesem Feature sparsam umgehen. Sind sehr viele Unterseiten vorhanden, können die Animationen lästig wirken und den Besucher zum Absprung verleiten.

Zu den Beispielen

Scrollen oder Smooth Scrolling

Ein Feature das mittlerweile bei immer mehr Webseiten zu finden ist. Das sanfte Scrollen setzt Animation voraus und ermöglicht die Kontrolle der Geschwindigkeit, in der der User durch die Seite scrollt und zwischen definierten.

Beispiele:

Screenshot Rich animationsScreenshot Rich animations 2

Screenshot Rich animations 3Bewegte Animationen und Grafiken

Mit Bewegungen kann man gezielt die Aufmerksamkeit der Besucher bekommen. Beispielweise leite ich den Blick auf ein Produkt oder Menü-Eintrag. Oder noch besser: Der User wird zur Interaktion motiviert. Zum Beispiel ein umfangreiches Formular auszufüllen oder einen Button zu klicken.

Copyright Bilder

  • Titelbild: Screenshot www.paperplanes.world, 08.02.2017
  • Content 1: Screenshot www.matteozanga.it, 08.02.2017
  • Content 2: Screenshot www.jordancole.com.au, 08.02.2017
  • Galerie 3: Screenshot www.frontierexperience.ca, 08.02.2017
  • Galerie 4: Screenshot www.dividebyfour.eu, 08.02.2017

Diesen Beitrag bewerten

0 Kommentare

Dein Kommentar

Möchtest du mitdiskutieren?
Fühl dich frei, beizutragen!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden .