Animation ist nicht mehr nur für Cartoons. Von bewegten Bildern im Vollbildmodus bis hin zu kleinen Hover-Effekten treten überall Animationen auf. Die Animation ist trendy, spaßig und benutzerfreundlich.
Und die Hindernisse für die Verwendung von Animationen haben begonnen zu fallen. Da die meisten Benutzer über Hochgeschwindigkeitsverbindungen verfügen und problemlos von einfachen Bewegungen oder einem blöden Gif bis zu mehreren Minuten von Aktionen erstellen können, sind Animationen zu praktischen und nützlichen Webdesign-Tools geworden.
Grundlagen der Animation
Animationen finden statt, wenn etwas, das in stiller oder zweidimensionaler Form erstellt wurde, zum Leben erweckt wird. und scheint sich auf eine Weise zu bewegen, die den Gesetzen der Physik folgt. Es ist die Art und Weise, wie eine Zeichentrickfigur über den Bildschirm geht, oder wie ein App-Symbol wie ein Ball abprallt, während es auf dem Desktop Ihres Mac geladen wird.
Eines der Wörter, das fast gleichbedeutend mit Animation ist, ist Disney. In den frühen achtziger Jahren schrieben zwei der besten Animateure des Unternehmens ein Buch, in dem die 12 Prinzipien der Animation beschrieben wurden. Die Illusion des Lebens: Disney-Animation? von Frank Thomas und Ollie Johnston liefert noch heute den Rahmen für die Animation.
- Quetsche und dehne
- Erwartung
- Inszenierung
- Straight Ahead Action und Pose zum posieren
- Follow-Through- und Überlappungsaktion
- Slow In und Slow Out
- Bogen
- Sekundäre Aktion
- Zeitliche Koordinierung
- Übertreibung
- Feste Zeichnung
- Beschwerde
Webanimationen werden häufig als GIF, CSS, SVG, WebGL oder Video gespeichert. Sie können alles aus einer einfachen Unterstreichung sein, die erscheint, wenn Sie den Mauszeiger über ein Wort bewegen, bis hin 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.
Aufkommender Trend von 2017
Animationen im Webdesign sehen wir jeden Tag mehr. Der Schlüssel zur Animation als Designtrend ist Mäßigung. Kleine, einfache Animationen sind ansprechend und interessant. Der Benutzer kann nicht einmal daran denken, dass er überhaupt eine Animation ist. Große Animationen können ein interessantes visuelles Element sein, das Sie in das Design einbezieht. Wenn Sie jedoch zu viele verschiedene Bewegungseffekte mischen, kann dies zu Chaos führen.
Was die Animation im Trend macht, ist der Realismus. In der heutigen Designlandschaft mit so vielen flachen und minimalistischen Designvorlagen benötigen die Benutzer mehr Anhaltspunkte, um ihnen zu sagen, was sie tun sollen. Einfache Animationen können den Benutzer führen, ohne die Ästhetik zu verändern. Es hilft, Anweisungen und Reihenfolge hinzuzufügen, um Schemata zu entwerfen, die visuell zu einfach sind, um den Benutzern ausreichend Richtung zu geben. In diesem Fall entsteht durch die Animation ein fröhliches Medium zwischen reduzierter Einfachheit und Benutzerfreundlichkeit.
Der andere Faktor, der zu diesem Trend beiträgt, ist der Zugriff auf Werkzeuge an den Hinter- und Benutzerenden des Designs. Sie benötigen kein Flash mehr für kompliziertere Animationen. (Und wenn Sie immer noch in Flash bauen, ist es Zeit zu stoppen.) Dies kann auf verschiedene Weise erreicht werden. Heutige Animationen blockieren keine Websites oder Webserver, so dass Effekte für Benutzer schnell geladen werden können. Mit Hochgeschwindigkeitszugang zum Internet können Animationen nicht überspringen.
Große vs. kleine Animationen
Wenn es um das Animieren für das Web geht, werden zwei leicht verständliche Kategorien unterschieden: groß und klein. (Sie können wahrscheinlich erraten, wie diese aussehen.)
Große Animationen haben eine Skala. 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 kurzen Film. 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 hinsehen, zoomt jedes der großen Bilder, während Sie die Kopie lesen.
Kleine Animationen sind die kleinen Elemente, die Sie entdecken, wenn Sie mit einer Website interagieren. Diese Unterteilungen können in Form von Schwebeflugzuständen, winzigen Ornamenten, Gebrauchsanleitungen oder Werkzeugen vorliegen. Kleine Animationen sind ein Akzent, der zur Gesamtästhetik beiträgt, werden jedoch wahrscheinlich nicht im Mittelpunkt des Designs stehen. In der Website für Henry Brown lautet die einfache Animation, dass, wenn Sie genau hinsehen, die Augen in der Abbildung tatsächlich blinzeln.
Wann ist eine Animation zu verwenden?
Das Problem bei jedem Trend, auch bei diesem Trend, ist zu wissen, wann er verwendet werden soll. Animationen können für Ihr Design-Tool-Kit ein großer Trick sein, sind aber nicht für jedes Projekt geeignet. Die Animation sollte glatt und nahtlos sein, nicht sprunghaft oder mechanisch. Es muss für den Benutzer einen Zweck erfüllen und den Inhalt nicht behindern.
Der Hauptgrund für die Verwendung von Animationen ist die Erhöhung der Benutzerfreundlichkeit. Einfache Animationen können ein hervorragendes Hilfsmittel sein, um zu verstehen, welche Schaltflächen auf der Karte einer Website als nächstes zu klicken sind. Viele Designer, die komplexe Bildlaufeffekte verwenden, kombinieren eine einfache Animation mit einem Benutzerwerkzeug zum Blättern oder Klicken. (Dies umfasst alles, von einem einfachen Symbol für Sprünge oder von Wörtern, die in einem Spruch auftauchen und nach unten scrollen.)
Usability gibt es in einigen Formen:
- Kommunikationsfunktion oder wie man eine Website benutzt
- 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 einem Handlungsaufruf
Der zweite Grund für die Animation ist ein ästhetischer Grund. Animation kann eine tolle 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 in Verbindung zu halten.
Berücksichtigen Sie bei der Erstellung einer rein visuellen Animation, was sie tun soll. Denken Sie über die Verbindung nach, die ein Benutzer haben soll.Soll es lustig oder überraschend sein? Ist es ein Stück einzigartiger Inhalte, die zum Teilen bestimmt sind? Selbst 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 Video Illusion of Life zeigt jedes der 12 Prinzipien auf eine leicht verständliche Weise.
- Webanimation bei der Arbeit? von A List Apart ist eine großartige Quelle für die Funktionsweise von Animationen.
- Einführung in die CSS-Animation für Anfänger zeigt Ihnen, wie Sie ein Quadrat mit CSS-Eigenschaften in einen Kreis verwandeln.
- Elastische animierte SVG-Elemente ist ein Lernprogramm zum Integrieren und Animieren einer SVG-Komponente.
- Die Art of UI Animations-Präsentation von Mark Geyer erläutert die Konzepte anhand von Animationen.
- ? 15 Top HTML5-Tools zum Erstellen erweiterter Animationen mit? ist ein großartiger Next-Level-Schritt und eine Liste von Tools, wenn Sie die Grundlagen bereits verstehen.
- Das Überlebenskit des Animators vermittelt grundlegende Prinzipien, die für alle Formen der Animation gelten.
Fazit
Wenn es um Animation geht, gilt als Faustregel: Gute Animationen verbessern die Benutzererfahrung. Dies kann in Form einer emotionalen Verbindung sein - beispielsweise als Spaß, positives Erlebnis - oder indem die Verwendung einer Website vereinfacht wird.
Animation ist eine unterhaltsame Technik, die für verschiedene Anwendungen immer mehr zum Standard geworden ist. Wenn Sie nach Inspiration suchen, lesen Sie diesen Artikel durch und klicken Sie auf die Links zu den visuellen Beispielen. Besuchen Sie die Websites und spielen Sie mit den animierten Funktionen. Habe Spaß!