7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Motion Graphics

Wie Sie Ihre Website mit bewegten Grafiken aufwerten können

Read Time: 4 mins

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

Bewegung ist seit langem eines der wirkungsvollsten Mittel, um eine Website hervorzuheben. Sie hat sich so weit entwickelt, dass den Designern heute eine Vielzahl von Möglichkeiten zur Verfügung steht, die von einfachen Mikrointeraktionen bis hin zu bildschirmfüllenden Videohintergründen reichen.

In diesem Sinne ist Web Animation ein beliebtes Mittel, um ein hochprofessionelles Kinogefühl ins Web zu bringen. Diese animierte Grafiken sind oft kurz und können als Teil einer größeren Videopräsentation verwendet werden. Sie dienen auch verschiedenen Zwecken, z. B. als animierter Hintergrund, Szenenübergang oder sogar als eigenständiges Designelement.

Heute werfen wir einen Blick auf einige der Möglichkeiten, wie Sie Ihre Website mit bewegten Grafiken auf die nächste Stufe heben können. Wir zeigen Ihnen auch einige atemberaubende Beispiele, die Sie mit Ihrem Abonnement von Envato Elements erhalten, das mehr als 12.000 herunterladbare Motion Graphics und vieles mehr enthält. Sie können diese Vorlagen entweder direkt verwenden, oder für Lernzwecke herunterladen, um herauszufinden, wie Sie animierte Grafiken erstellen können.

Stock Videos auf Envato ElementsStock Videos auf Envato ElementsStock Videos auf Envato Elements
Stock Videos auf Envato Elements

1. Wichtige Informationen visualisieren

Die Verwendung von Infografiken bietet eine effektive Möglichkeit, Informationen in einem leicht verdaulichen Format zu vermitteln. Die Integration von Informationen in ein Video kann eine noch größere Wirkung erzielen. Dank dieser Web Animation können Sie den Schwerpunkt auf die wichtigsten Punkte legen.

Business Infographic ElementsBusiness Infographic ElementsBusiness Infographic Elements
Business Infographic Elements

Die Business Infographic Elements-Kollektion bietet eine Vielzahl von Möglichkeiten, um das Beste aus Ihrer Präsentation zu machen. Die Videomedien-Elemente sind in drei Farben erhältlich (weiß, dunkelblau und vollfarbig) und enthalten jeweils einen Alphakanal, der die Verwendung mit Ihren eigenen Grafiken ermöglicht.

2. Nutzer an einen anderen Ort versetzen

Das richtige Bildmaterial kann Ihnen wirklich helfen, eine Geschichte zu erzählen. Das ist ein Teil dessen, was bewegte Grafiken für Elemente wie Videohintergründe leisten können. Mit ihnen können Sie ein bestimmtes Gefühl vermitteln und Ihre Geschichte erzählen, ohne ein Wort zu sagen.

Sunset Beams Through Palm TreesSunset Beams Through Palm TreesSunset Beams Through Palm Trees
Sunset Beams Through Palm Trees

Sunset Beams Through Palm Trees ist ein großartiges Beispiel dafür, wie Bilder das Geschichtenerzählen verbessern können. Dieser 30-Sekunden-Clip eines tropischen Paradieses könnte z. B. dazu verwendet werden, Reisende zum Buchen eines Fluges zu verleiten oder die Kulisse für einen Roman zu schaffen, der auf einer einsamen Insel spielt. Hier gibt es eine große Flexibilität, die es Ihnen ermöglicht, Ihre Geschichte auf Ihre eigene Weise zu erzählen.

3. Eine große Ankündigung machen

Sollten Sie aufregende Neuigkeiten bekannt geben? Der Einsatz von Bewegung wird dazu beitragen, dass die Nutzer Ihre große Enthüllung nicht verpassen wollen. Während statischer Text und Bilder eine wichtige Rolle spielen können, ist es der intelligente Einsatz von Videos, der die Aufmerksamkeit der Besucher auf Ihre Inhalte lenkt.

LED Array CountdownLED Array CountdownLED Array Countdown
LED Array Countdown

Um noch mehr Aufmerksamkeit zu erregen, verwenden Sie eine bewegte Grafik wie LED Array Countdown. Mit mehreren Reihen heller weißer Zahlen, die von 10 abwärts zählen, bietet dieser kurze Clip die perfekte Überleitung zu Ihrer Ankündigung.

4. Veranschaulichen, um zu informieren

Es gibt Konzepte, die mit Worten schwer zu erklären sind, aber mit einem Video leicht vermittelt werden können. Das gilt besonders für komplexe Themen wie Wissenschaft oder Technik. Hier können Sie Videos einsetzen, um den Nutzern ein besseres Verständnis für ein Thema zu vermitteln, ohne dass sie zu viel Zeit dafür aufwenden müssen.

Backache in Back BonesBackache in Back BonesBackache in Back Bones
Backache in Back Bones

Ein Beispiel dafür, wo bewegte Grafiken eine entscheidende Rolle spielen können, ist der medizinische Bereich. So veranschaulicht Backache in Back Bones in nur fünfzehn Sekunden perfekt ein Konzept. Sobald die Nutzer dieses erste Verständnis erlangt haben, können sie tiefer nach weiteren Informationen suchen.

5. Fügen Sie ein Element des Spaßes hinzu

Vergessen wir nicht, dass es nicht verkehrt ist, ein bisschen Spaß in das Web zu bringen. Das Tolle daran ist, dass man nichts Großes machen muss, denn es sind oft die kleinen Details, die ein Lächeln hervorrufen. Es gibt eine Reihe von Grafikanimationen, die Dinge wie Produktdemos, Videoblogs und Präsentationen auflockern können.

Logo RevealsLogo RevealsLogo Reveals
Logo Reveals

Logo Reveals sind eine schnelle und einfache Möglichkeit, Ihren Inhalten etwas Spaß zu verleihen. Diese Kollektion bietet vier verschiedene Designs - jedes mit mehreren Farboptionen. Fügen Sie mit einer Videobearbeitungssoftware Ihr Logo oder Foto in das Reveal Ihrer Wahl ein und voilà, schon haben Sie eine freundliche Note hinzugefügt.

Setzen Sie Ihre Website in Bewegung!

Auch wenn bewegte Grafiken nicht unbedingt der Star der Show sind, können sie dennoch eine wichtige Rolle spielen. Verwenden Sie sie, um eine Geschichte zu erzählen, Informationen zu übermitteln und den Rahmen für das zu setzen, was als nächstes kommt. Sie sind ein wirksames Instrument, mit dem Sie das Beste aus Ihren Inhalten herausholen können. Wir hoffen, dass unsere kurze Einführung in Web Animation und die obigen Beispiele Ihnen weiterhelfen konnten, mit das Erstellen von Animierten Grafiken anzufangen.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.