Planung der Animation

Eine sorgfältige Planung ist auch bei Web-Animationen der Schlüssel zum Erfolg. Wir klären, ob die Animation einen Mehrwert für den Besucher darstellt und welcher visuelle Stil erzielt werden soll. Darüber hinaus wird festgelegt, welche Technologien zum Einsatz kommen und wie die Animation aufgebaut ist.


Technologien zum Erstellen von Web-Animationen

Web-Animationen lassen sich mit verschiedenen Techniken herstellen. Zur Verfügung stehen das Grafikformat GIF, die Styling-Sprache CSS, das Vektorformat SVG, die Skriptsprache JavaScript, zahlreiche Frameworks und Kombinationen all dieser Technologien. Welche Technik zum Einsatz kommt hängt  u.a. vom Browsersupport und dem gewünschten Effekt ab. Wir beraten Sie welche Technologie sich für Ihr Projekt am besten eignet.


Interaktionseffekte

Bewusst eingesetzte Interaktionseffekte stellen ein wichtiges visuelles Feedback für den Besucher Ihrer Website dar. Es muss eindeutig erkennbar sein, ob ein Element benutzt werden kann oder nicht. Neben klassischen Mouseover-Effekten, gehören auch Slider, auf- und zuklappbare Elemente, Gestensteuerung, »Drag and Drop« sowie interaktive Grafiken in den Bereich der Interaktionseffekte. Mit ihrer Hilfe können wir die Inhalte Ihrer Website erlebbar machen und attraktiv verpacken.


Scrolling-Effekte

Scrolling-Effekte sind in den letzten Jahren sehr populär geworden. Der sogenannte »fixed« oder »sticky«-Effekt sorgt dafür, dass wichtige Informationen immer verfügbar sind, da beispielsweise die Navigationsleiste ab einem bestimmten Punkt an der oberen Browserfensterkante haften bleibt.

Der sogenannte »Parallax-Effekt« bewegt Objekte in mehreren Ebenen hintereinander und erzeugt so einen räumlichen Eindruck. Auch der Storytelling-Trend lässt sich dank Scrolling-Effekten perfekt umsetzen, denn es ist möglich Geschichten zu erzählen, während die Besucher sich durch Ihre Website scrollen.

Wir helfen Ihnen den passenden Effekt auszuwählen und technisch umzusetzen.


Case Study eines Projekts mit Animationen

Die »Grafikhelden« wünschten sich eine illustrative und unterhaltsame Website. Wir haben Konzeption, Interface-Design und WordPress-Umsetzung übernommen und über 120 Animationen erstellt.

Mehr Infos

Meaningful Transitions

Viele Animationen auf Websites werden nur einmal ausgeführt. Beispielsweise werden mehrere Elemente nacheinander animiert eingeblendet. So lässt sich beeinflussen in welcher Reihenfolge der Anwender die Informationen wahrnimmt. Mit Hilfe solcher sogenannter. »Meaningful Transitions« können Zusammenhänge verdeutlicht und die User Experience spürbar verbessert werden.


Animationsschleifen (Loops)

Animationsschleifen sind in sich abgeschlossene Animationen, die in Endlosschleife abgespielt werden. Dabei kann die Animation selbstständig ablaufen oder vom Anwender gestartet und pausiert werden.

Animationsschleifen sind sehr effektiv wenn Sie Zusammenhänge visuell vermitteln möchten oder kleine Geschichten erzählt werden sollen.


Animierte Infografiken

Infografiken sind hervorragend dazu geeignet, animiert zu werden: Zahlen können hoch- oder runtergezählt werden und Torten- oder Balkendiagramme animiert mit Werten gefüllt werden. Auch die Interaktion des Anwenders steht oft im Vordergrund, denn er möchte Werte vergleichen oder Zeiträume und andere Kenngrößen verändern.

Mit diesen Kunden haben wir bereits erfolgreich zusammengearbeitet.