Das vollständige Webanimationshandbuch

Ob Sie es glauben oder nicht, Sie haben nicht viel Zeit, um die Besucher Ihrer Website davon zu überzeugen, in der Nähe zu bleiben. Ihr Fenster ist tatsächlich viel kürzer als Sie vermuten.

Im Wesentlichen braucht es nur 0.05 Sekunden Nach dem Laden Ihrer Seite können sich Besucher eine Meinung bilden. Genauer gesagt, das heißt 50 Millisekunden. Überraschend kurz, oder?

Ok, einige von ihnen werden gehen. Aber andere könnten sich entscheiden, zu bleiben.

Dann kommt die Eindrucksstufe, die im Grunde genommen dauert nur 10 Sekunden. Wenn Ihre Site keinen soliden verwalten kann, verlieren Sie den Großteil Ihres Datenverkehrs, bevor sie überhaupt mit dem Konvertierungsprozess beginnen. Sie müssen nur fortfahren, um die Tasten "Zurück" oder "Schließen" zu drücken.

Und wenn Sie Hoffnung hatten, sie wiederzugewinnen, ist hier die harte Wahrheit. 88% von ihnen Es ist unwahrscheinlich, dass Sie nach einer schlechten Erfahrung auf eine Website zurückkehren.

Aber warte eine Minute. Wessen Aufgabe ist es, den Internetverkehr zu erhalten, sobald er auf der Website gelandet ist?

Natürlich ist es nur natürlich, den Content Manager der Site dafür verantwortlich zu machen. Und vielleicht hast du recht. Aber nur zum teil

Es stellt sich heraus, dass alles mit dem Webdesigner beginnt. Tatsächlich hat eine Studie, die ein breites Spektrum an Feedback von Verbrauchern umfassend untersucht hat, dies bestätigt 94% der negativen waren Design bezogen.

Was bedeutet das?

Für den Anfang gibt es kein Entkommen. Die Hauptverantwortung liegt bei Ihnen. Neben der Implementierung aller bewährten Vorgehensweisen, die wir in unseren vergangenen Stücken beschrieben haben, müssen Sie einen PR-Hut tragen und Elemente berücksichtigen, die effektiv mit dem Datenverkehr in Verbindung stehen.

Ich spreche über Dinge wie Webanimationen.

Und warum schlagen wir das konkret vor?

Nun, das werde ich gleich verraten. In diesem Handbuch werden Sie durch alle wichtigen Aspekte von Webanimationen geführt. Aber zuerst wollen wir die Grundlagen erkunden ...

Grundlagen von Webanimationen

Stellen Sie sich Ihren Lieblings-Cartoon-Charakter vor, der über den Bildschirm schlendert. Oder das Logo Ihres Handys tanzt auf dem Bildschirm, wenn Sie das Gerät neu starten. Was haben Sie gemeinsam?

Nun, beide sind grundlegende Beispiele für Animationen.

Animation findet im Wesentlichen statt, wenn ein Standbild "zum Leben erweckt" wird. Es zeigt dann eine gewisse Bewegungsform.

Wir wissen nicht genau, wann diese Praxis begann. Aber wir haben eine Idee, dass die erster Animationsfilm in der Geschichte wurde vor über einem Jahrhundert gemacht. Der Trend hat sich seitdem dank fortschreitender technologischer Fortschritte sehr stark entwickelt.

Eines ist jedoch konstant geblieben - die Prinzipien der Animation. In der Tat haben Disneys Ollie Johnston und Frank Thomas später in ihrem Buch darüber geschrieben:Die Illusion des Lebens: Disney-Animation". Hier ist die komplette Liste:

  • Berufung
  • Massive Zeichnung
  • Übertreibung
  • Zeitliche Koordinierung
  • Sekundäre Aktion
  • Arc
  • Langsam rein und langsam raus
  • Follow-up und überlappende Aktion
  • Gerade Aktion und posieren
  • Staging
  • Erwartung
  • Quetsche und dehne

Die zwölf stellen noch heute den Rahmen für das Design von Animationen bereit, einschließlich der im Web als Videos, WebGL, SVG, CSS und GIF veröffentlichten Animationen.

Web-Animationen können jetzt so einfach sein wie ein Highlight, das sich zeigt, wenn Sie mit der Maus über einen Buchstaben fahren, bis hin zu einer komplexen, mehrschichtigen Serie von Vollbildvideos. Mit anderen Worten, Sie können einen subtilen Ansatz wählen oder mit dominanten Animationen vorgehen, die nach Aufmerksamkeit schreien. Es hängt alles von der Situation ab.

Und das wirft die Frage auf - wann soll man überhaupt Animationen verwenden?

Wann sollten Sie Webanimationen verwenden?

Natürlich sind sie süß. Und es wäre sicherlich eine interessante Ergänzung zum Layout Ihrer Site.

Aber weißt du was? Ihre anschließende Wirksamkeit ist etwas ganz anderes. Es versteht sich von selbst, dass Animationen nicht für alle Website-Projekte geeignet sind. Und vor allem wäre es eine schlechte Idee, sie willkürlich zu übernehmen.

Es passiert einfach so 46% der Online-Verbraucher Beurteilen Sie die Glaubwürdigkeit einer Website anhand ihrer visuellen und ästhetischen Gesamtwirkung. Sie können es sich einfach nicht leisten, dies mit einem schlecht entworfenen Animationsrahmen zu umfassen. Zur gleichen Zeit wäre es unglücklich, die Möglichkeiten für goldene Konversion dauerhaft zu verpassen, indem Animationen nicht genutzt werden.

Wann sollten Sie sie einsetzen?

Nun, hier ist das Ding. Webanimationen sind vor allem dann ideal, wenn Sie die Benutzerfreundlichkeit erhöhen möchten, indem Sie die Aufmerksamkeit auf sich ziehen oder Benutzer beim Navigationsprozess unterstützen.

Wie?

Im Allgemeinen dauert es 2.6 Sekunden damit die Augen eines Besuchers im Website-Bereich landen, der in erster Linie den ersten Eindruck beeinflusst. Eine gekonnte Verwendung einer Animation kann jedoch die Dinge beschleunigen, indem sie sofort auf die kritischsten Bereiche der Website aufmerksam gemacht wird.

Animationen sind auch nützlich, wenn Sie Benutzer durch den Konvertierungstrichter leiten möchten. Ein animiertes Popup-Formular wäre beispielsweise eine durchdachte Strategie für das Erstellen von Mailinglisten. Wenn es um den Kaufprozess geht, können Sie Videos einbetten. Sie haben bewiesen, dass sie überzeugen 73% der Käufer um fortzufahren und ein Produkt oder eine Dienstleistung zu erwerben.

Schließlich können Sie Webanimationen nur zu ästhetischen Zwecken verwenden. Eine dekorative Animation, die glatt und nahtlos ist, kann die Gesamtanmutung erheblich verbessern und dann eine emotionale Verbindung zwischen Benutzer und Benutzeroberfläche herstellen. Auf diese Weise können Sie das Engagement der Benutzer schrittweise steigern.

Webanimationstools

Bereit zum Erstellen von Webanimationen? Perfekt! Aber wo solltest du anfangen?

Nun, wie wäre es mit einem robusten Werkzeug, um Ihre Ideen in tatsächliche Animationen umzuwandeln? Glücklicherweise gibt es im Web eine Vielzahl an attraktiven Optionen, die für verschiedene Benutzer und verschiedene Arten von Animationen optimiert sind. Was Sie für Ihre Projekte auswählen, hängt von Ihren Fähigkeiten, primären Zielen, Ihrem Budget und der Art der Site ab, an der Sie arbeiten.

Hier sind einige prominente Beispiele, die jeweils einen eigenen Anwendungsfall haben:

  • js
  • 3D zeichnet Animation mit Three.js
  • js
  • Flubber
  • Farbanimation
  • jqClouds
  • Scrollissimo
  • Cel-Animation
  • js
  • js
  • CSS3 Animation
  • Verwandeln, wenn
  • js
  • Rellax
  • TO
  • js
  • ScrollTrigger
  • Scrollanim
  • js
  • js
  • js
  • js
  • Foxholder
  • Animatelo
  • css
  • Animista
  • js
  • CAAT
  • AnimateMate
  • js
  • Stylie
  • GFX
  • js
  • js
  • js
  • jQuery DrawSVG
  • Ramjet
  • Schlag
  • MixItUp
  • css
  • css
  • js
  • Ceaser
  • CSSynth
  • Safran
  • CSShake
  • css
  • js
  • Rakete
  • Transit
  • css
  • js
  • Popbewegung
  • GSAP von GreenSock
  • js
  • js
  • CSS animieren
  • Es ist Dienstag
  • Zwielichtig
  • js
  • js
  • js
  • js
  • js
  • Warten! Animieren
  • Bewegungs-UI
  • js
  • Faule Linienmaler
  • js
  • js
  • js
  • AnijS
  • js
  • Magische Animationen
  • css

Web-Animationen gestalten

Hover-Effekte

Hover-Animationen sind zweifellos die einfachsten im Web. Sie werden zum Leben erweckt und markieren ausgewählte Elemente, wenn der Zeiger darüber bewegt wird. Die Animation selbst kann in verschiedenen Formen auftreten, z. B. Größenverschiebung oder Farbänderung.

Der Trick hier ist, die Effekte sparsam zu übernehmen. Andernfalls riskieren Sie, zu viele Elemente hervorzuheben, was die Benutzer in der Folge verwirren kann.

Es ist auch ratsam, eine konsistente Form der Methodik auf der gesamten Site beizubehalten. Wenn Ihre Homepage-Schaltflächen beispielsweise von grün zu rot wechseln, verwenden Sie denselben Rahmen für weitere Hervorhebungen auf anderen Webseiten.

Hintergrundanimationen

Das Einbetten einer Hintergrundanimation ist eine effektive Strategie, um Ihrer Webseite Spannung und Vitalität zu verleihen, ohne dabei den Schwerpunkt zu beeinträchtigen. Sie können alles von Videos bis hin zu subtilen Bildern verwenden, die sich nacheinander verschieben.

Der beste Ansatz ist, die Dinge strukturiert und einfach zu halten. Wenn Sie ein Video integrieren möchten, kürzen Sie es entsprechend und pflegen Sie einen für Ihre Website relevanten Loop. Stellen Sie dann sicher, dass die Bewegungen subtil genug sind, um die Aufmerksamkeit auf sich zu ziehen, ohne die Benutzer zu überfordern.

Animationen im GIF-Stil

Ein GIF ist eine Überlegung wert, wenn Sie besonders an einer Animation interessiert sind, die außergewöhnlich einfach einzurichten ist. Ein typisches Beispiel kann ein Textwechsel oder ein lächelnder Clown sein, der in Ihr Inhaltslayout eingebettet ist.

Alles, was Sie tun müssen, ist, eine solide Idee zu entwickeln, ein relevantes Video oder Bild zu erhalten und es dann mit einer geeigneten Bearbeitungssoftware in ein perfektes GIF zu konvertieren. Durch das Hochladen der resultierenden Erstellung im GIF-Format wird eine videoähnliche Animation erstellt, die so schnell wie ein kleines Bild geladen wird.

Übergangsanimationen

Übergangsanimationen werden verwendet, um mehr Kraft zu erzeugen, wenn Benutzer von einem Abschnitt der Website zu einem anderen wechseln. Sie ähneln Diashow-Animationen, die angezeigt werden, wenn Sie von einer Folie zur nächsten wechseln.

Bildnachweis: Shutterstock

Stellen Sie für ein perfektes Ergebnis sicher, dass die Animationen auf der gesamten Website reibungslos und konsistent sind. Sie sollten auch kurz genug sein, um den eigentlichen Übergangsprozess nicht zu verzögern.

Animationen werden geladen

Fakt ist- 47% der Online-Verbraucher Erwarten Sie, dass Ihre Webseiten in mindestens 2 Sekunden geladen werden. Wenn Sie dies nicht erreichen, wird jede weitere Sekunde in 7% weniger Konvertierungen umgewandelt.

Vorbei an der aktuelle durchschnittliche Ladezeit von 22 SekundenEs ist ziemlich offensichtlich, dass die Erfüllung der 2-Sekunden-Erwartung ziemlich schwierig ist. Sie können jedoch einen erheblichen Teil des Datenverkehrs retten, indem sie mit Animationen beschäftigt bleiben, während andere Elemente der Website weiterhin geladen werden.

Konzentrieren Sie sich darauf, einfache zu erstellen, die leicht genug sind, um den Datenverkehr fast sofort auf Ihre Website umzuleiten. Sie sollten so konzipiert sein, dass Besucher systematisch mit dem Thema Marke und Website insgesamt vertraut gemacht werden.

Scroll-ausgelöste Animationen

Eye-Tracking-Studien haben gezeigt, dass die Website-Benutzer etwa dafür ausgeben 57% ihrer Zeit über der Falte. Es stellt sich jedoch heraus, dass viele von ihnen bereit sind, nach unten zu scrollen, sofern Sie eine günstige Entwurfsstruktur und einen günstigen Mechanismus bieten.

Und genau hier setzen die durch das Scrollen ausgelösten Animationen an. Sie werden sofort aktiv, sobald die Benutzer mit dem Scrollen beginnen, um die Illusion einer glatten, endlosen Seite zu erzeugen. Dies ist eine durchdachte Methode, um Übergänge zu vermeiden, die das Scrollen sonst abschrecken würden.

Navigation und Menüanimationen

Lass uns ehrlich sein. Die Menüoptionen benötigen viel Platz auf dem Bildschirm, insbesondere bei ganzheitlich dynamischen Sites mit mehreren Auswahlebenen. Glücklicherweise können Sie Animationen nutzen, um die Optionen auszublenden, und sie nur dann anzeigen, wenn ein Benutzer auf die entsprechenden Schaltflächen klickt oder die Maus darüber bewegt.

Diese Art der Animation rationalisiert und vereinfacht den Navigationsprozess, indem die gesamte Struktur in visuell verbundene Menüoptionen komprimiert wird. Das Framework sollte mit Untermenüsegmenten erstellt werden, die systematisch angezeigt werden, wenn ein Benutzer auf die überlagerten Menüoptionen klickt oder zeigt.

Galerie und Diashows

Vielleicht nicht überraschend die durchschnittliche Aufmerksamkeitsspanne der Menschen 8 ist nach einer kürzlich von Microsoft durchgeführten Studie der zweite Platz in XNUMX. Selbst ein Goldfisch kann länger aufmerksam bleiben als ein typischer Mensch. Daher können Sie darauf wetten, dass die meisten Besucher Ihrer Website nicht dauerhaft genug sind, um durch alle Ihre Galerieelemente zu klicken.

Aber rate mal was? Sie können Galerie- und Diashow-Animationen gezielt einsetzen, um zahlreiche Bilder automatisch zur Schau zu stellen, ohne dass Benutzer zwangsläufig durch diese navigieren müssen.

Das Wichtigste ist hier die Bildanzeigezeit. Kurze Bildschirme mit schnellen Übergängen würden sich hektisch anfühlen, während lange Bildschirme mit langsamen Übergängen langweilig und träge werden würden. Gestalten Sie das gesamte Layout so, dass jedes Bild etwa 5 bis 8 Sekunden angezeigt wird, bevor Sie schnell zum nächsten übergehen.

Fazit

Alles in allem sollten Sie die Animationen dahingehend analysieren, wie sehr sie die Benutzererfahrung verbessern. Eine großartige Person sollte entweder eine emotionale Verbindung von Benutzern auslösen oder den Navigationsprozess erleichtern. Ein perfekter dagegen sollte beide gleichzeitig bequem erreichen können.

Um dies zu erreichen, nehmen Sie sich Zeit, um alle relevanten Parameter kritisch zu bewerten, während Sie Animationen entwerfen und in Ihre Website einbetten. Und denken Sie daran: Halten Sie es einfach, leicht und gut auf Ihre Marke abgestimmt.

Headerbild mit freundlicher Genehmigung von Alfrey Davilla | Vaneltia

Bogdan Rancea

Bogdan ist Gründungsmitglied von Inspired Mag und hat in diesem Zeitraum fast 6-Jahre Erfahrung gesammelt. In seiner Freizeit studiert er gern klassische Musik und erforscht die bildende Kunst. Er ist auch ziemlich besessen von Fixies. Er besitzt bereits 5.