9 Websites mit Animationen, die uns als Web Creators inspirieren

Webdesigner sind auf der ständigen Suche, ihre Websites mit den modernsten, trendigsten Designeffekten zu aktualisieren, die den wahren Wert ihres Produkts oder ihrer Dienstleistung darstellen. Aber zwischen Farbpaletten, Typografie, Reaktionsfähigkeit, Inhaltsstrategie und vielem mehr kann der Gedanke an fortschrittliche Designtechniken etwas einschüchternd wirken. Eine der besten Möglichkeiten, eine Website zu erstellen, deren Design sich lohnt, besteht darin, sich von Ihren Kollegen inspirieren zu lassen. Sich selbst zu fragen, was Sie an ihren Designs lieben, wie es für Ihr Design relevant sein kann und wie Sie es an Ihre Bedürfnisse anpassen möchten, kann wirklich einfach sein.

Schauen wir uns diese neun Beispiele für kreative Website-Animationen an und lernen Sie von den Profis.

Die Animationstechniken, die Handwrytten im Heldenbereich ihrer Homepage verwendet, sind eine ergreifende Darstellung ihres Produkts selbst: die Kombination von Feder und Tinte. Ein wesentlicher Wert dieses Designs (unter anderem) besteht darin, dass der Website-Besucher sofort versteht, welche Vorteile das Produkt bietet und was er durch die Verwendung davon gewinnt.

Das Foto einer handgeschriebenen Karte neben der Cartoon-Illustration sagt wirklich alles. Was die anderen Designelemente auf der Seite betrifft, so schafft das klare Weiß-Schwarz-Farbschema mit einem Hauch von Sunset Orange eine Balance zwischen Raffinesse und künstlerischem Flair. Nach dem Durchstöbern dieser Website sind wir sicherlich motiviert, uns weiter umzusehen und mehr über das Produkt von Handwrytten zu erfahren.

Crisp fügt seinen Vektorillustrationen kleine Animationseffekte hinzu, die trotz der geringen Größe der Illustrationen eine klingende Markenbotschaft vermitteln. Die dezente Animation jeder Vektorillustration verleiht der Markenpersönlichkeit von crisp tatsächlich eine menschliche Note. Wir lieben besonders das animierte Lagerfeuer in dem Abschnitt, in dem es um den Kundensupport geht. Es verleiht dem minimalistischen, flachen Design, das elegant auf der gesamten Homepage verwendet wird, Leben. Dies ist der perfekte Weg, um diese trendigen Flat-Design-Techniken zu nutzen und gleichzeitig die für ein aufregende Benutzererfahrung erforderliche Lebensfreude zu vermitteln.

Corebook begrüßt den Besucher seiner Website im vollständig dunklen Modus mit subtilen und eleganten Animationen, während Sie auf der Website nach unten scrollen. Auf seine ganz eigene Weise findet Corebook eine Möglichkeit, Heldenanimationen leicht und deutlich sichtbar zu gestalten, trotz des fehlenden Kontrasts zwischen dem dunklen Grau auf dem schwarzen Hintergrund.

Die Auswahl an Animationsinhalten ist minimalistisch und dennoch informativ. Dies wird mit nur wenigen quadratischen Formen und Farben ermöglicht, die Animationen veranschaulichen die Art des fertigen Produkts (ein Markenbuch), das die Kunden nach dem Beitritt zu Corebook in der Hand haben: ein eigenes Markenbuch, das Industriestandards erfüllt und modern aussieht, trendig und raffiniert.

Best Day Ever verwendet eine geloopte Animationstechnik, damit ihre Tierillustrationen nicht auf Auslöser angewiesen sind, um in Bewegung zu bleiben. Welche Abbildung für den Website-Besucher sichtbar ist, bewegt sich ständig, solange sie auf dem Bildschirm zu sehen ist.

Es gibt auf der gesamten Seite einen Content-First-Ansatz, da die Wörter und Sätze kurz sind und nicht länger als nötig sind. Genau diese Art der Herangehensweise passt so gut zu freundlichen Animationen, mit der Kombination von minimalem Text mit einem peppigen, farbenfrohen Design. Die Bewegungen der Tiere erwecken nicht nur den Text, mit dem sie gepaart sind, zum Leben, sondern schaffen auch ein Gesprächserlebnis für jeden Benutzer.

Die Website von Best Day Ever ist ein Paradebeispiel dafür, wie Sie eine Idee und ein Gestaltungsprinzip (in diesem Fall das Thema der Kombination energetischer Frische mit Subtilität) aufgreifen und durch Ihre Farbgebung, Ihre Inhaltsstrategie und Ihre fortschrittlichen Designeffekte konsistent darstellen können.

Wer liebt nicht das klassische Bällebad? Mit seinen klassischen Markenfarben auf weißem Grund sticht Google einmal mehr ins Gold.

Mit einem einzigen Maus-Tracking-Effekt schafft es Google, eine Benutzererfahrung zu schaffen, die dem Website-Besucher das Gefühl gibt, sich tatsächlich in einem Bällebad zu befinden! Und wenn Sie auf der Seite nach unten scrollen, werden die Bälle nur größer. Es gibt keinen Inhalt unter den Kugeln, was genau so ist, wie es in der Realität ist.

Google schafft es, uns ein sofortiges, sensationelles Verständnis davon zu vermitteln, wofür dieses Produkt gedacht ist, und zwar mit einer einfachen Titelbeschreibung im Heldentext und einer CTA-Schaltfläche.

Wir wissen, dass Google uns dabei hilft, unser nächstes Abenteuer zu planen, das uns nicht enttäuschen wird. Und haben Sie die Farbwechseleffekte gesehen, wenn Sie mit der Maus über die Schaltfläche fahren? Dies ist das erste Mal, dass wir eine Schaltfläche sehen, deren Hover-Effekt in vier separate Farben wechselt, anstatt von einer Farbe in eine andere zu wechseln.

Es ist wie nichts, was wir je zuvor gesehen haben. Vor unseren Augen sehen wir animierte abstrakte Formen, die sich bewegen und eine Illustration eines Tieres bilden. Es weckt unsere Neugier, die schönen Tiere zu bewundern und sich zu fragen, welche anderen Tiere sie verwendet haben?

Dies ist genau der Denkprozess, den Ihr Website-Besucher haben soll. Sie erzählen ihm eine visuelle Geschichte und möchten, dass er die nächste Seite dieser Geschichte aufblättert.

Wenn man darüber nachdenkt, haben Storytelling und die Ursache gefährdeter Arten viel gemeinsam: Beides geht es darum, die Aufmerksamkeit des Zuhörers zu erregen und ihn (wenn auch subtil) davon zu überzeugen, dass Ihr Thema von größter Bedeutung ist, aka hörenswert.

Die Cannabisindustrie ist immer noch ziemlich neu und frisch, daher ist es sinnvoll, dass eine Website, die sie als Produkt verkauft, ein Aussehen und eine Atmosphäre benötigt, die sich gleich anfühlt.

Lassen Sie uns aufhören, um zu verstehen, wie viele Designtechniken allein auf der Homepage stattfinden: ein Slideshow-Hintergrund hinter Sammlungen animierter Bilder, 3D-Effekte, rotierende Wörter ... und alles sieht wunderschön aus.

Wie kann jemand diese Homepage sehen und möchte die Website nicht weiter erkunden? Nur wenn Sie dies tun, können Sie sehen, wie die atemberaubenden Animationen beim Scrollen nach unten noch fabelhafter werden.

Wir lieben es, wie sich das Glas nach unten dreht und die Objekte auf dem farbigen Hintergrund an die Seitenränder gleiten, wenn der Hintergrund weiß wird. So kreativ. Je tiefer Sie gehen, desto schönere 3D-Objekte behalten einen vertikalen Scroll-Effekt nach oben bei.

All diese Techniken in Kombination erzeugen das Gefühl, dass Sie einfach weitermachen und mehr von der Website lesen möchten, auch nur um die faszinierenden Grafiken und die nächsten Ideen der Designer zu sehen.

Wenn Sie zu den anderen Seiten navigieren, werden Sie feststellen, dass die 3D-Objekte aus dem Hero-Content der Homepage zu einem festen Bestandteil des Hintergrunds geworden sind, während sie immer noch schweben und sich bewegen. Diese Wahl der Kontinuität ermöglicht ein ganzheitliches Storytelling, das den Punkt näher rückt: Wir sind ein großartiges Produkt.

Ist es die Farbgebung, das 3D-Design, die dezente Bildbewegung oder die Kreditkartenillustration, die beim Scrollen auf der Homepage akrobatisch nach unten sinkt?

Es ist ein bisschen von allem.

Das Farbschema geht hier weit. Die von viel Weiß eingerahmten Orangetöne und eine schlichte, abgerundete Sans-Serif-Schrift wirken so ganzheitlich zusammen. Aber was hier wirklich den Kuchen abnimmt, sind die Animationstechniken, die für die Kreditkartenillustration verwendet werden.

RappiPay erhält unsere Stimme für Originalität und bemerkenswertes Engagement. Der Inhalt der Website führt den Besucher die Seite hinunter, bis er den Tiefpunkt erreicht, denn wenn die Kreditkarte so sanft über die Seite gleitet, werden andere Bilder und Illustrationen angezeigt. Und zwischen der Interaktion der Kreditkarte mit anderen Elementen, wie dem Aufdecken von Geldscheinen oder dem Zeichnen von gepunkteten Linien um eine Kugel, zeigt die Karte akrobatische Flips bis zum Anschlag.

So wie die Kreditkarte die Geschichte gut erzählt, voller Action und Vitalität, endet sie auch auf einem Höhepunkt. Der kreisförmige Ausschnitt am Ende, der die Einkäufe des Kartenbesitzers zeigt, zeigt uns, wie viele Funktionen und Fähigkeiten diese eine Karte hat und wie der Kartenbesitzer sie wirklich überall und überall mitgenommen hat.

Die Worte minimalistisch und innovativ sind alles, was uns hier einfällt. Wenn ein Bild tausend Worte sagt, würden wir sagen, dass ein animiertes Bild 5.000 oder wahrscheinlich sogar mehr sagt.

Okay, jetzt bist du dran. Die hier aufgeführten Animationstechniken sind nur ein kleiner Bruchteil dessen, was Webentwickler erreichen können, wenn sie ihren Websites animierte Funktionen hinzufügen. Jeden Tag gibt es mehr und mehr Inspiration und es gibt so viel zu sehen und zu lernen. Unser Motto als Designer ist es, mit den Grundlagen zu beginnen, und da Sie einfache Animationspraktiken im Gepäck haben, kann Ihre Website der Welt zeigen, was es bedeutet, ein Beweger und Shaker zu sein.