Anzeige
Anzeige
UX & Design

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

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!

Von Melanie Petersen
2 Min.
Artikel merken
Anzeige
Anzeige

(Screenshot: bevisionar.com)

Im Netz stößt man immer wieder auf 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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

Zur Webseite

Anzeige
Anzeige

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

Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

Zur Webseite

Du brauchst mehr Inspiration für deine Webseite? Dann schau dir auch unsere Reihe Teil 3.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
2 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Sven Burkert

„…trotz sperrlichen Inhalts“???
-> spärlich! :)

Antworten
Melanie Petersen

Verbessert. Dank dir.

Antworten
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige