Bewegend!

Animationen im Webdesign

Bei Animationen im Web liegt ein schmaler Grat zwischen atemberaubender Präsentation und schwindelerregedem Eindruck. In diesem Beitrag zeigen wir euch Beispiele und Tipps, wie Web-Animationen gut eingesetzt werden können und welche Funktionen sie dabei erfüllen.

Betrachten wir moderne Webseiten, fürchten manch ältere User:innen Schwindelerscheinungen, während andere die Bewegung und Dynamik der Geschichte genießen. Ob animierte Bilder und Hintergründe, Parallax-Effekt, Slider oder sonstige interaktive Animationseffekte, es gibt unzählige Arten, eine Website durch Bewegung und Interaktivität zum Leben zu erwecken. Vielleicht ähnlich dem Schritt vom Buch zum Film erleben wir derzeit eine Entwicklung, in der wir uns sichtlich weg bewegen von der statischen Website, hin zum dynamischen, interaktiven Weberlebnis.

Fasziniert von den Möglichkeiten und auf dem Weg, noch bessere Webdesigns zu entwickeln, zeigen wir einen Überblick zum Thema. Let’s dive in!

Was sind Webanimationen und welchen Nutzen haben Sie? #

Eine Animation ist die Visualisierung einer Veränderung, die über einen bestimmten Zeitraum hinweg auftritt. Sie eignen sich besonders, um Dinge oder Elemente hervorzuheben, Änderungen zu veranschaulichen und Fakten zu skizzieren. Gegebenenfalls unterscheiden sie sich in ihrer Umsetzungstechnik (CSS, JS, WebGL) bzw. ihrem Format (GIF, Lottie, SVG). Neben all den Vorteilen, die Animationen bieten können, kann ein zu viel oder ein Überladen der Seite mit Effekten auch negative Auswirkungen haben.

Wiederholung, Dauer und Geschwindigkeit einer Animation sind dabei wichtige Faktoren, die bei der Erstellung zu berücksichtigen sind. Zudem kann Bewegung den Elementen einen Charakter geben. Ein guter Einstieg, um sich detaillierter damit zu befassen, bieten die “12 Prinzipien der Animation”.

Insbesondere Mikrointeraktionen bedienen sich fast immer kurzen Animationen als Feedback und um eine Message klarer kommunizieren zu können. Die Interaktion wird durch die User:innen ausgelöst (z.B. durch klicken, scrollen oder hovern) oder durch das System selbst.

Grundsätzlich erfüllen Webanimationen von guter Qualität immer einen Zweck und sind ein großartiges Werkzeug, um die Benutzerfreundlichkeit einer Seite zu verbessern. Sie dienen dazu, Lösungen auf die Schwierigkeiten von User:innen zu veranschaulichen. Nutzer:innen möchten spielerisch und in aller Kürze an die wichtigsten Informationen kommen. Warten ist dabei ein “No-Go”. Außerdem sollten Animationen kognitiv leicht aufnehmbar sein und keine großen Lese- oder Denkleistungen erfordern. Richtig eingesetzt sind animierte Elemente im Web ein gutes Mittel zur Kommunikation mit den User:innen oder Besucher:innen einer Website.

Wie können Webanimationen eingesetzt werden? #

Beim diesem Thema dürfen Beispiele natürlich nicht fehlen. Wie Animationen im Web ihre Funktion spielerisch erfüllen und wie Animationseffekte zugleich ein angenehmes Nutzererlebnis schaffen, zeigen wir in diesem Abschnitt.

1. Kommunikation der Funktionalität #

Animationen können die Funktionalität einer Website kommunizieren. Sie dienen dazu, auf vermeintlich wichtige Dinge aufmerksam zu machen, wodurch sie das Verständnis einer Website unterstützen. Dabei rufen sie zum Handeln auf, lenken die Aufmerksamkeit auf bestimmte Objekte, deuten nächste Schritte an oder geben Feedback auf Interaktionen von User:innen. Ein Beispiel dafür haben wir im Fall des Webseiten-Relaunch unseres Kunden RedOps eingesetzt:

Quelle: www.redops.at/kontakt

2. Aufzeigen von Veränderungen und Zusammenhängen #

Animationen verdeutlichen Veränderungen und Zustände einer Seite. Durch Übergangsanimationen oder Fortschrittsanzeigen verhelfen sie einer räumlichen sowie zeitlichen Orientierung. Beispielsweise beim Aufklappen einer mobilen Navigation oder dem Wechsel von einer Seite zur nächsten.

Das folgende Beispiel zeigt, wie eine relativ einfache Animation beim Aufklappen eines Menüs eingesetzt werden kann, um der Seite dynamik zu verleihen.

Quelle: www.moremedia.at

3. Geschichten erzählen #

Animationen können das Storytelling einer Seite unterstützen, indem sie Schritte eines komplexen Prozesses, Ideen oder ein Konzept visualisieren und dadurch effektiver kommunizieren. Animierte Designs können ganz neue Möglichkeiten bieten, diese Geschichten und Inhalte zu erzählen.

Quelle: www.postevand.com

4. Dekoration, Unterhaltung und zur Förderung des Engagements #

Animation können die emotionale Beziehung der Besucher:innen zur Website erhöhen. Sie haben die Eigenschaft, die Stimmung positiv beeinflussen und die Benutzer:innen länger auf der Seite halten zu können. Der Einsatz animierter Objekte und Effekte verleiht dem Design einen persönlichen Touch und macht den Moment unterhaltsamer.

Quelle: en.manayerbamate.com

5. Den Markenauftritt unterstreichen #

Animationen können eine Möglichkeit sein, das Markenerlebnis zu stärken. So lassen sich Informationen zum Unternehmen verständlich und lebendig erzählen. Der Charakter der Marke kann sich im Webdesign widerspiegeln und interaktiv erlebbar werden. Wie und welche Dinge sich dabei bewegen, kann Teil einer Corporate Identity sein.

Quelle: kmbch.webflow.io

Prototyping, Übergabe und Umsetzung #

Hat man die konzeptionelle Phase abgeschlossen, gilt es jene auch zu veranschaulichen und später umzusetzen. Da man mit AdobeXD im Bereich der Animation auf Grenzen stößt, müssen weitere Tools aushelfen, wie zum Beispiel Framer, InVision oder Adobe After Effects. Das statische Design wird nun in Bewegung gebracht. Es dient am Ende jedoch einzig der Vorschau für die Developerin bzw. den Developer. Unter Rücksichtnahme von Skalierbarkeit, Browser Support, Ladegeschwindigkeit bzw. Ladezeit der Website und Accessibility bestimmen die Developer:innen nun die beste Umsetzungstechnik. Neben CSS und JavaScript gibt es zahlreiche Libraries (GreenSock, Three.js;), um Animationen im Web zu integrieren.

Damit sich die Arbeit aller Beteiligten nicht verdoppelt, ist es im laufenden Prozess wichtig, Nutzen und Aufwand der Animationseffekte gut abzusprechen. Es geht darum, die richtige Balance zwischen Animation, dynamischer Interaktion und statischen Elementen zu finden.

Aussicht #

Wie dieser Artikel zeigt, sind Animationen im Webdesign ein sehr umfangreiches Thema, obwohl hier noch kaum die Rede von Umsetzungstechniken war.

Webanimationen entwickeln sich auch in Zukunft stark weiter und werden mehr denn je die Aufmerksamkeit auf sich ziehen. Wohin die Reise geht, können wir bereits jetzt in Ansätzen sehen: Während wir heute noch in zweidimensionalen Räumen denken, werden wir in ein paar Jahre mit VR Brillen das Web in 3D betreten und Bewegung, Animation und Interaktion werden wieder eine neue Bedeutung bekommen. Wir werden mehr und mehr versuchen, das reale Leben (und darüber hinaus) in unserer digitalen Welt widerzuspiegeln.

Ich mag diesen Gedanken und schaue gespannt in die Zukunft, denn durch diesen Trend haben wir im Webdesign die Chance, uns ständig weiterzuentwickeln und noch lebendigere Nutzererlebnisse zu gestalten.