Eine Einführung in die Animation im Webdesign
Animation ist nicht mehr nur für Cartoons. Von bewegten Bildern im Vollbildmodus bis hin zu kleinen Hover-Effekten tauchen überall Animationsschübe auf. Animation ist trendy, lustig und benutzerfreundlich.
Und die Hindernisse für die Verwendung von Animationen sind gefallen. Mit den meisten Benutzern von Hochgeschwindigkeitsverbindungen und der einfachen Erstellung von einfachen Bewegungen oder albernen Gifs bis hin zu mehreren Minuten Action sind Animationen zu praktischen und nützlichen Webdesign-Tools geworden.
Entdecken Sie Envato-Elemente
Grundlagen der Animation
Animation entsteht, wenn etwas, das in stiller oder zweidimensionaler Form erstellt wurde, „zum Leben erweckt“ wird und sich auf eine Weise zu bewegen scheint, die den Gesetzen der Physik folgt. Auf diese Weise läuft eine Zeichentrickfigur über den Bildschirm oder ein App-Symbol springt wie ein Ball, während es auf den Desktop Ihres Mac geladen wird.
Eines der Wörter, die fast gleichbedeutend mit Animation sind, ist Disney. In den frühen 1980er Jahren schrieben zwei der besten Animatoren des Unternehmens ein Buch, in dem die 12 Prinzipien der Animation beschrieben wurden. Die „Illusion of Life: Disney Animation“ von Frank Thomas und Ollie Johnston bildet bis heute den Rahmen für die Animation.
- Quetsche und dehne
- Erwartung
- Inszenierung
- Straight Ahead Action und Pose to Pose
- Durchgehende und überlappende Aktion
- Langsam rein und langsam raus
- Bogen
- Sekundäre Aktion
- Zeitliche Koordinierung
- Übertreibung
- Solide Zeichnung
- Beschwerde
Webanimationen werden häufig als GIF, CSS, SVG, WebGL oder Video gespeichert. Dies kann alles sein, von einer einfachen Unterstreichung, die angezeigt wird, wenn Sie mit der Maus über ein Wort fahren, bis zu einem Vollbildvideo oder Hintergrundbild. Wie bei jeder anderen Designtechnik können Animationen subtil sein oder sich in Ihrem Gesicht befinden und schwer zu vermeiden sein.
Aufstrebender Trend von 2017
Animation im Webdesign ist etwas, mit dem wir jeden Tag beginnen. Der Schlüssel zur Animation als Designtrend ist die Moderation. Kleine, einfache Animationen sind ansprechend und interessant. Der Benutzer könnte nicht einmal daran denken, dass es sich überhaupt um eine Animation handelt. Großformatige Animationen können ein interessantes Bild sein, das Sie in das Design einbezieht. Wenn Sie jedoch zu viele verschiedene Bewegungseffekte verwechseln, kann dies zu völligem Chaos führen.
Was Animation trendy macht, ist Realismus. In der heutigen Designlandschaft mit so vielen flachen und minimalistischen Designs benötigen Benutzer mehr Hinweise, um zu sagen, was zu tun ist. Einfache Animationen können den Benutzer führen, ohne die Ästhetik zu verändern. Es hilft dabei, Anweisungen und Anweisungen hinzuzufügen, um Schemata zu entwerfen, die visuell möglicherweise zu einfach sind, um den Benutzern genügend Anweisungen zu geben. In diesem Fall schafft die Animation ein fröhliches Medium zwischen reduzierter Einfachheit und Benutzerfreundlichkeit.
Der andere Faktor, der zu diesem Trend beiträgt, ist der Zugriff auf Tools im Back- und User-End des Designs. Für kompliziertere Animationen benötigen Sie kein Flash mehr. (Und wenn Sie noch in Flash erstellen, ist es Zeit zu stoppen.) Dies kann auf verschiedene andere Arten erreicht werden. Die heutigen Animationen blockieren keine Websites oder Webserver, sodass die Effekte für Benutzer schnell geladen werden können. Mit Hochgeschwindigkeitsanimationen für den Internetzugang bleiben die Animationen nicht mitten im Ereigniszyklus hängen.
Große gegen kleine Animationen
Wenn es um die Animation für das Web geht, fallen zwei gleich leicht verständliche Kategorien an: große und kleine. (Sie können wahrscheinlich erraten, wie diese aussehen.)
Große Animationen haben eine Skalierung. Oft in Form eines Videos mit einer Laufzeit füllen großformatige Animationen einen erheblichen Teil des Bildschirms aus und sind charakteristisch für einen Kurzfilm. Diese Animationen dienen als Schwerpunkt im Gesamtdesign. Benutzer müssen häufig keine Aktion ausführen, um die Animation in Bewegung zu sehen. Wenn Sie auf der Studio Meta-Site genau hinschauen, wird jedes der großen Bilder beim Lesen der Kopie vergrößert.
Kleine Animationen sind die kleinen Dinge, die Sie entdecken, wenn Sie mit einer Website interagieren. Diese Divots können in Form von Schwebezuständen, winzigen Verzierungen oder Usability-Anleitungen oder Werkzeugen vorliegen. Kleine Animationen sind ein Akzent, der zur Gesamtästhetik beiträgt, aber wahrscheinlich nicht im Mittelpunkt des Designs steht. Auf der Website für Henry Brown ist die einfache Animation, dass bei genauem Hinsehen die Augen in der Abbildung tatsächlich blinken.
Wann wird die Animation verwendet?
Das Problem bei jedem Trend, einschließlich diesem, ist zu wissen, wann er verwendet werden muss. Animation kann ein großartiger kleiner Trick für Ihr Design-Toolkit sein, ist jedoch nicht für jedes Projekt geeignet. Die Animation sollte glatt und nahtlos sein, nicht nervös oder mechanisch. Es muss einen Zweck für den Benutzer erfüllen und darf den Inhalt nicht beeinträchtigen.
Der Hauptgrund für die Verwendung von Animationen ist die Verbesserung der Benutzerfreundlichkeit. Einfache Animationen können großartige Hilfsmittel sein, um zu verstehen, auf welche Schaltflächen Sie klicken müssen oder wohin Sie als Nächstes auf der Karte einer Website gehen müssen. Viele Designer, die komplexe Bildlaufeffekte verwenden, kombinieren eine einfache Animation mit einem Benutzerwerkzeug, um zu scrollen oder zu klicken. (Dies beinhaltet alles von einem einfachen springenden Symbol oder Wörtern, die ein Sprichwort "Bildlauf nach unten" anzeigen.)
Es gibt einige Formen der Benutzerfreundlichkeit:
- Kommunikationsfunktion oder Verwendung einer Website
- Zeigen Sie Änderungen an, z. B. das korrekte Ausfüllen eines Formulars oder das Hervorheben, dass ein Element anklickbar ist
- Erstellen Sie einen Flow oder leiten Sie Benutzer zu einer Handlungsaufforderung
Der zweite Grund für die Verwendung von Animation ist ein ästhetischer. Animation kann eine großartige „Dekoration“ sein. Manchmal ist das Ziel eines animierten Elements rein visuell und das ist eine akzeptable Verwendung. Diese dekorative Animation kann helfen, eine Geschichte zu erzählen oder eine emotionale Verbindung zwischen der Benutzeroberfläche und dem Benutzer herzustellen. Der Zweck einer Animation kann darin bestehen, visuelles Interesse zu wecken und einen Benutzer für einen längeren Zeitraum mit Ihrer Website zu beschäftigen.
Überlegen Sie beim Erstellen einer rein visuellen Animation, was sie tun soll. Denken Sie an die Verbindung, die ein Benutzer haben soll. Soll es Spaß machen oder überraschen? Ist es ein bisschen einzigartiger Inhalt, der zum Teilen gedacht ist? Auch ein reines Bild sollte ein Ziel haben.
Ressourcen
Bereit zum Animieren? Hier finden Sie einige Ressourcen zum Lesen und Tools, die Ihnen den Einstieg erleichtern.
- Das Illusion of Life-Video zeigt jedes der 12 Prinzipien auf leicht verständliche Weise.
- "Webanimation bei der Arbeit" von A List Apart ist eine großartige Ressource darüber, wie Animation funktioniert.
- Die „Einführung für Anfänger in die CSS-Animation“ zeigt Ihnen, wie Sie ein Quadrat mithilfe von CSS-Eigenschaften in einen Kreis verwandeln.
- Elastische animierte SVG-Elemente sind ein Tutorial zum Integrieren und Animieren einer SVG-Komponente.
- Die Präsentation Art of UI Animations von Mark Geyer verwendet Animationen, um die Konzepte zu erklären.
- "15 Top-HTML5-Tools zum Erstellen erweiterter Animationen" ist ein großartiger Schritt und eine Liste von Tools der nächsten Ebene, wenn Sie die Grundlagen bereits verstanden haben.
- Das Animator's Survival Kit vermittelt Grundprinzipien, die für alle Formen der Animation gelten.
Fazit
Wenn es um Animation geht, lautet die Faustregel: Gute Animation verbessert die Benutzererfahrung. Dies kann in Form einer emotionalen Verbindung geschehen - beispielsweise in Form einer lustigen, positiven Erfahrung - oder indem die Nutzung einer Website vereinfacht wird.
Animation ist eine unterhaltsame Technik, die für eine Vielzahl von Anwendungen zum Standard geworden ist. Wenn Sie nach Inspiration suchen, lesen Sie diesen Artikel noch einmal durch und klicken Sie auf die Links zu den visuellen Beispielen, besuchen Sie die Websites und spielen Sie mit den darin enthaltenen animierten Funktionen. Habe Spaß!
