Micro-Animations – Designwelten: Webdesign persönlich machen
Lesezeit: 5 Minuten
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.
Besuche uns auf LinkedIn.
Du willst keine Neuigkeiten verpassen? Folge uns doch einfach auf LinkedIn!
LinkedIn ProfilAnmeldung zu dem medani-Newsletter
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.
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.
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.
Ä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.
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.
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.