Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Webdesign, das (sich) bewegt: Diese Webseiten zeigen, wie man bezaubert

    Webdesign, das (sich) bewegt: Diese Webseiten zeigen, wie man bezaubert

(Screenshot: bevisionar.com)

Es gibt sie noch, die handgestrickten Webseiten. Viele arbeiten in der Navigation und Darstellung der Inhalte mit animierten Illustrationen. Animiertes Webdesign grenzt dabei manchmal an Kunst. Wir haben zehn eindrucksvolle Beispiele für euch herausgesucht. Lasst euch inspirieren!

Im Netz stößt man immer wieder auf dieselben Templates und Stylegrundlagen. Webdesigns mit einer ganz eigenen Note sind schon wahre Fundstücke. Umso mehr freut man sich, wenn man mal eines davon zu Gesicht bekommt. Wir haben zehn ansehnliche, animierte Webdesigns für euch zusammengetragen, die eine wahre Augenweide sind.

1.) Animiertes Newsletter-Design

Animiert Website Webdesign
(Screenshot: epic.net)

Dieses spannende Webdesign ist zwar keine Webseite, aber es passt trotzdem in die Liste. Die Kreativ-Agentur Epic hat ein Newsletter-Design zum Verlieben. Viele kleine Animationen illustrieren den Newsletter mit dem Jahresrückblick auf 2014.

Zum Newsletter

2.) Spielerisches Webdesign

webdesign animiert webseiten
(Screenshot: Giant Steps Media)

Die Webseite der Media Agentur Giant Step Media punktet mit einem reduzierten Design und einer kleinen Spielerei. Mit dem Mauszeiger lassen sich kleine Lichtpunkte verwirbeln. Mit den Punkten sind zum Beispiel auf der Startseite das Firmenlogo und auf der „Clients“-Seite die Kundenlogos animiert.

Zur Webseite

3.) Interaktiver Globus

Bildschirmfoto 2015-06-09 um 12.14.59
(Screenshot: Airbnb)
Bildschirmfoto 2015-06-09 um 12.16.35
(Screenshot: Airbnb)

In einem hübschen Intro stellt Airbnb sich vor, bevor man zur interaktiven Weltkugel gelangt, die viele kleine Geschichten und raffinierte und liebevoll designte Details enthält.

Zur Webseite

4.) Eigene Handschrift

Bildschirmfoto 2015-06-09 um 12.27.53
(Screenshot: bevisionar.com)

Das Team von Visionare hat das Rad zwar nicht neu erfunden, dafür überzeugt ihre Website mit einer ganz eigenen Handschrift. Die animierten Illustrationen haben einfach Charme.

Zur Webseite

5.) Scrollytelling

Bildschirmfoto 2015-06-09 um 13.33.43

Auf forbetter.coffee wird erklärt, wie man den perfekten Kaffee zubereitet. Durch Scrollen bewegt man eine Kaffeebohne durch den Prozess der Kaffeezubereitung. Die Seite schafft es dadurch trotz spärlichen Inhalts ein tolles Nutzererlebnis zu schaffen.

Zur Webseite

6.) Dynamische Tool-Vorstellung

Bildschirmfoto 2015-06-09 um 13.43.01
(Screenshot: getbeagle.co)

Die Website von Beagle stellt ein Tool vor, mit dem man seine „Proposal“-Unterlagen strukturieren und einheitlich designen kann. Sehr flüssige Animationen führen einen durch die Funktionen des Tools.

Zur Webseite

7.) Unser Schreibtisch, das sind wir

Bildschirmfoto 2015-06-09 um 13.49.38
(Screenshot: labelideas.co)

Die Agenturseite von Label Ideas & Co. zeigt einen Schreibtisch hinter dessen Objekten die verschiedenen Informationshäppchen versteckt sind. Besonders gut hat uns die Teamvorstellung gefallen. Einfach mal ganz nach unten scrollen!

Zur Webseite

8.) Produkt-Inszenierung

Bildschirmfoto 2015-06-09 um 14.27.53
(Screenshot: newjumoconcept.com)

Die Produktseite von New Jumo Concept startet mit einer Animation des zu bewerbenden Produkts: Eine Schreibtischlampe, die vollständig zusammengeklappt werden kann. Scrollt man runter, klappt sie sich langsam auf. Eine schöne Methode das Produkt in Szene zu setzen und ein schönes Nutzererlebnis zu schaffen.

Zur Webseite

9.) Animierte Startseite

Bildschirmfoto 2015-06-09 um 14.57.05
(Screenshot: followbubble.com)

Statt eines Sliders auf der Startseite, arbeitet Bubble mit einem Umklappeffekt. Simple, aber dennoch wirkungsstark, da gefühlt jede zweite Seite mittlerweile den klassischen Slider auf der Startseite hat.

Zur Webseite

10.) Interaktive, multimediale Themenwelt

Bildschirmfoto 2015-06-09 um 15.02.39

Die Food-Themenwelt von National Geographic macht vor, wie sich eine Informationsseite in eine spannende Erlebniswelt verwandeln kann. Überall gibt es was zu entdecken und zu erfahren. Dabei bringt das stöbern richtig Spaß. Detailreiche Animationen unterstützen das.

Zur Webseite

Du brauchst mehr Inspiration für deine Webseite? Dann schau dir auch unsere Reihe „So schön ist Webdesign: Schmackhafte UI-Schmankerl zum Nachmachen" an. Hier findest du Teil 1, Teil 2 und Teil 3.

Finde einen Job, den du liebst

2 Reaktionen
sventb
sventb

"...trotz sperrlichen Inhalts"???
-> spärlich! :)

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen