medani-pixel
news
16
Feb 16

Micro-Animations - Design Welten: Webdesign persönlich machen

Gerade in den letzten Jahren hat sich immer wieder gezeigt, dass es im digitalen Design oft mehr Gestaltungsspielraum gibt als in den üblichen 2D Welten. Aus diesem Grund sehen wir uns in diesem Newsbeitrag einige Beispiele hierfür an und ziehen auch ein Fazit zu diesem Thema.

Micro-Animations – Design Welten die im fortlaufenden Flat-Design Trend das Webdesign persönlich machen

Gerade in den letzten Jahren hat sich immer wieder gezeigt, dass es im digitalen Design oft mehr Gestaltungsspielraum gibt als in den üblichen 2D Welten.
Die immer umfassender werdende Welt der Microanimations spielt dabei eine große Rolle. Zum einem indem sie den Gestaltungsspielraum des immer noch sehr verbreiteten Flat Designs stark bereichert, indem die Bewegungsebenen zum Design dazukommen. Außerdem spielen Microanimations inzwischen eine wichtige Rolle, um das Look and feel einer Designwelt zu unterstreichen und abzugrenzen.

Google Style Guide Material Design bezog 2015 Guides für bewegte Elemente mit ein. Inzwischen gehört die individuelle Gestaltung des Micro-Animationen Kosmos zum Corporate Design einer jeden wichtigen Website.

Denn wie ein Element bewegt wird, wirkt auf die Wahrnehmung, wie die Inhalte selbst und kann subtil oder auch stark die User Experience beeinflussen. Gerade wenn es sich um wiederkehrende Bewegungen im Webdesign handelt. Zusätzlich bieten Micro-Animations eine zusätzliche wichtige Ebene, um die individuelle Wirkung einer Marke einmaliger zu machen.

Viele WordPress Themes enthalten inzwischen Repertoires an verwendbaren und teilweise gut anpassbaren Animationen die als Ausgangspunkt gute Dienste erweisen können. Zusätzlich sind maßgeschneiderte Micro-Animations bei anspruchsvollen Webprojekten inzwischen ein Muss geworden.

Um diese zu erzeugen, gibt es verschiedene Möglichkeiten. Besonders interessant sind dabei Libraries, die einen Werkzeugkasten an Bewegungsarten zur Verfügung stellen. Eine davon ist Greensock die aktuell von vielen gängigen Websites verwendet wird. Dabei sind uns folgende Beispiele positiv aufgefallen:

 


BOSE

 

Auf der Website DreamAndReach von BOSE, konnte man Multimedial die Geschichte der Marke erkunden. Leider wurde das tolle Werk mittlerweile wieder offline genommen.

Mit einer Mixtur aus futuristischem Techno-Stil, Eleganz, und wellengleichen fließenden Bewegungen, sind Animationen hier an unterschiedlichsten Stellen zu sehen:

Individuell animierte Icons bauen sich bei den Kategorien auf, das Menü bewegt sich per Hover wie eine Landschaft, Kreise im Hintergrund bilden wellenartige, sphärische Gebilde.

Ein sehr individuell aussehender, eleganter Filter erlaubt es auf zwar ungewohnte aber dennoch intuitive Art Medientypen zu sortieren.

Auch die Produktdarstellungen sind sehr detailreich animiert und öffnen etwa per Hover ihr Inneres, um mit Tooltipps weitere Informationen anzubieten. Es gibt kleine Effekte auf beinah allen Navigationselementen.

 

Auf dem Bild ist die Vorschau der Webseite zu sehen. Diese ist sehr dunkel gehalten aber man erkennt personen und eine Art Leiste mit kleinen Bildern.

Q: BOSE

 


Das KAPITOL

Die Animationswelt der Website „Das Kapitol“ wird mit einer klassischen sehr dezenten Ladeanimation eröffnet. Auffällig ist hier aber, dass sich ein modular aus eckigen geometrischen und futuristisch wirkenden Formen aufbauender Stil durch die Gestaltung der Seite durchzieht.

Die Sliderinhalte auf der Startseite etwa zeigen einen pulsierenden, verpixelten animierten Background. Zusätzlich schmücken Wellen-Linien das Webdesign und erzeugen eine sphärische und lebendige Anmutung.

Viele weitere animierte Bereiche der Seite bilden dabei durch ihre sanfte Eleganz einen Kontrapunkt.

Das Seitenmenü ist liquid bewegt und fließend, die Elemente bauen sich nacheinander weich auf.

Die monumentalen Texte bauen sich wiederum aus verpixelten Element-Gruppierungen auf.

In Summe ist das Ergebnis elegant und futuristisch.

 

Auf dem Bild ist die verlinkte Webseite als kleine Vorschau zu sehen. In der Mitte des Bildes steht ONE PANEM dunkel auf hellgrauen Hintergrund geschrieben. Auf der linken Seite sieht man ein Menü und auf der rechten Seite ein weiteres Menü zum Ausklappen (Pfeil).

Q: THE CAPITOL

 


Mc Donalds 100Moments

Interessant ist hier auf dieser Mini-Storytelling-Seite, WIE die kleinen Stories aufgebaut sind.
Sie liegen wie ein dichter Teppich aus Waben auf dem Bildschirm. Bei Hover reagiert die berührte Wabe mit einem 3D Effekt, der sie vom Rest abzeichnet. Detailreich animiert sind auch die einzelnen Geschichten, die per angeleiteter Touch-Interaktion durch zeichentrickähnliche Animationen erzählt werden.

 

Das Vorschaubild zeigt die verlinkte Webseite an. Diese besteht aus vielen kleinen Kacheln in verschiedenen Farben und wirkt freundlich, verspielt.

Q: McDonald´s

 

 

Ästhetisch schön ist die Mischung der verwendeten Animationen und ihre Gesamtwirkung im Zusammenhang mit dem Design. Hier wirken monumentale Bilder und Typografie. Feine Elemente lockern diese auf, große Bilder bauen sich smooth im Hintergrund auf.

 

Es ist die kleine vorab Ansicht der verlinkten Webseite zu sehen. Die Vorschau zeigt, dass die Seite in Schwarz/Weis gehalten ist und der Schriftzug "UNITY THROUGH" ist am Bild zu sehen.

Q: risenchurch

 

Google Jigsaw (ehemals Ideas)

Den Einstieg bildet ein 3D Globus, wo auf verschiedenen Punkten der Erden Personen ihre Ideen vorstellen. Die Präsentation der Ideen ist gut gelöst: Animierte Texte werden per Play synchron zu Audiostimme lesbar. Man kann sehr leicht zwischen den Personen navigieren.

Sympathisch ist hier auch, dass der Wechsel zwischen verschiedenen Personen, durch Transition Animationen die wie in TV Screen Senderwechsel wirken, gelöst ist.

Auch der 3D Effekt bei der Auswahl der Personen auf dem Globus ist plastisch und ansprechend gelöst.

Produkte bauen sich auf anderen Seiten wie einarmige Banditen auf.

Zusätzlich gibt es eine Vielzahl von dezenten Animationen, die futuristisch anmuten und die sonst klassische Seite moderner machen, wie Bilder die sich im Hintergrund smooth aufbauen. Wichtige Buttons werden beim Laden der Seite durch den gezielt gesetzten zeitlichen Ablauf akzentuiert.

Alles in Allem eine gut gelöste User Experience.

 

Das Webseitenvorschaubild zeigt die Erde aus dem Weltraum an. Man sieht Afrika, Europa, Asien und vereinzelt kleine "User-Köpfe" (m/w)

Q: Google

 

 

Fazit: Gerade modernes Webdesign wird durch Mikroanimations bereichert und vermittelt den Usern auf dezenter aber auch manchmal weniger dezenter Weise einen deutlich lebendigeren Eindruck der Webseite. Durch den Einsatz von Mikroanimations werden Webseitenbesucher angeregt aktiv auf Buttons zu klicken oder eine gewünschte Aktion (z.B. Hover) auszulösen. In Summe werden damit die gezeigten Inhalte unterstützt und Webseitenbesucher zum „probieren“ animiert. Daher freuen wir uns auf die weiteren Entwicklungen in diesem Bereich und werden diese auch weiter Beobachten.