Webdesign Trend Inspiration: Kleine Animationen mit großer Wirkung

23.05.2014 von

Webdesign Trend Inspiration: Kleine Animationen mit großer Wirkung

Ob aufwendiger Parallax-Effekt oder großflächige Videos - Bewegung und Animationen sind ein stetig wachsender Trend. Websites mit großen Animationen wie Videos, sind beeindruckend und bleiben im Kopf.

Aber diese Animationen gefallen nicht jedem Kunden, oder passen zu jedem Projekt. Die stillen Stars sind kleine Animationen, die den Besucher durch die Website begleiten, ohne dabei alle Aufmerksamkeit auf sich zu ziehen.


Manchmal sind diese unscheinbaren Animationen fester Teil der Websiteführung, manchmal verspielte Dekoelemente, die man nicht wirklich “braucht” aber die die Orientierung vereinfachen oder einzelne Elemente gezielt in den Fokus setzen. Die Einsatzmöglichkeiten für Animationen sind vielfältig, aber es gibt mindestens drei Arten, die aktuell besonders häufig vorkommen: der Slide-Effekt in Navigationen, scrollaktivierte Animationen und Hover-Animationen. Schau dir die Websites an und lass dich für dein nächstes Projekt inspirieren. 


Slide-Effekt in Navigationen

Der Slide-Effekt bei Navigationen ist bisher meist von mobilen Websites bekannt. Mehr darüber kannst du in meinem Artikel über mobile Navigationen erfahren.


Slide-out Navigation bei Nixon

Die Navigation von Nixon sieht genauso aus, wie wir es von vielen responsive Websites gewohnt sind. In der geöffneten Navigation ist auch direkt eine Möglichkeit zum Schließen eingebaut, was auch bei mobilen Websites zu empfehlen ist.


Slide-Out Navigation bei CFYE Magazine

Die Navigation des CFYE Magazine reagiert sowohl auf Klicken, als auch bei Mouse-Over. Beim Öffnen der Navigation schiebt sich dann der Rest der Website zur Seite. Die einzelnen Punkte haben einen großen Abstand und dadurch ist die Navigation auch auf mobilen Touch-Geräten leicht zu bedienen.


Slide-Out Navigation bei Bethel University

Die Bethel University verwendet einen Slide-Effekt für die Suchfunktion in der Navigation. In diesem Fall öffnet sich die Navigation von der rechten Seite, passend zu der Platzierung des “Suchen”-Links.


Slide-Out Navigation bei The Hunger Games

Die Website für den dritten Teil der Hunger Games Reihe verwendet zwar auch viele großflächige Animationen wie Videohintergründe, eine der unscheinbareren Animationen zeigt sich aber beim Mouse-Over über der Navigation. In diesem Fall legt sich die Navigation über den linken Teil der Website, ohne dabei den Rest der Website zur Seite zu schieben. 



Scrollaktivierte Animationen

Diese Animationen werden beim Scrollen aktiviert und führen den Besucher so in einem selbstgewählten Tempo durch die Seite. Durch den linearen Ablauf bieten sich diese Animationen an, um damit eine Geschichte zu erzählen.



Scrollaktivierte Animationen bei Freshmail

Die Website von Freshmail erklärt mithilfe der Animation im Flat Design Stück für Stück den eigenen Dienst.


Scrollaktivierte Animationen bei Lixpen

Die Animationen auf der Website von Lixpen zeigen den Aufbau und die Funktionen des Stiftes und machen ihn sogar “in Aktion” erlebbar.


Scrollaktivierte Animationen bei markt

Die südafrikanische Shopapp verwendet Animationen um die einzelnen Funktionen ihres Dienstes vorzustellen. Ein comic-hafter Stil wie hier findet sich oft bei diesen Animationen.


Scrollaktivierte Animationen bei Relio

Die Animationen von Relio sind sehr unscheinbar. Sie verbinden die einzelnen Abschnitte der Website und kreieren so einen fließenden Übergang. 



Hover-Animationen

Der Hover-Effekt in Navigationen ist keine neue Erfindung. Die folgenden Seiten setzen den Effekt stattdessen aber großflächiger innerhalb der Seite ein, oft in einem Grid-(Raster-)Design.


Hover-Animationen bei Sleeping Duck

Die Website von Sleeping Duck setzt Akzente durch Effekte beim Mouse-Over der verschiedenen Bereiche.


Hover-Animationen bei Edinburgh Zoo

Edinburgh Zoo verwendet verschiedene kleine Animationen bei den Grafiken und Fotos innerhalb der Website. So werden einige Links mehr betont als andere.


Hover-Effekte bei Swansea University

Durch die Hover-Effekte auf der Website der Swansea Universität erfährt der Besucher mehr zu einzelnen Links und kann Interviews direkt von Artikeln unterscheiden.


Hover-Animationen bei Names for Change

Die Animationen auf Names for Change lockern das strenge Grid-Design auf und geben den einzelnen Elemente mehr Dynamik.



Diese Websites zeigen, dass Animationen nicht immer großflächig sein müssen um Eindruck zu hinterlassen. Auch auf unserer eigenen Website verwenden wir einige kleine Animationen um die Besucherführung aufzulockern. Findest du sie alle?


Dieser animierte Pfeil auf der Startseite signalisiert, dass unter dem Headerbild noch mehr Informationen sind und leitet so den Besucher weiter.

Dieser animierte Pfeil auf der Startseite signalisiert, dass unter dem Headerbild noch mehr Informationen sind und leitet so den Besucher weiter.


Außerdem findest du auch auf der Startseite unter dem Punkt “Designe völlig frei” einen animierten Einblick in das CMS.

Außerdem findest du auch auf der Startseite unter dem Punkt “Designe völlig frei” einen animierten Einblick in das CMS.


Wenn du die Subnavigation verwendest um zu einem der Unterpunkte in der Seite Designer zu springen gibt es eine kleine Animation für die “Ankunft” bei dem gewünschten Punkt.

Wenn du die Subnavigation verwendest um zu einem der Unterpunkte in der Seite Designer zu springen gibt es eine kleine Animation für die “Ankunft” bei dem gewünschten Punkt.


Welche kleinen Animationen hast du bei Projekten bereits verwendet? Erzähl mir von Websites mit Animationen, die dir besonders gut gefallen haben.


zurück
comments powered by Disqus