Webdesign Trends – From Past To Future

Design

Im Laufe der Jahre hat sich das Erscheinungsbild vieler Webseiten geändert. Das liegt daran, dass jedes Jahr aufs Neue Trends entwickelt werden, die nicht nur nett aussehen, sonder auch die Usability und den Nutzerspaß erhöhen. Genauso schnell wie Trends die große Bühne des Word Wide Web erobern, verlassen sie sie auch wieder. Ich habe euch einige Trends von 2011 bis 2015 rausgesucht, die ich euch anhand von Beispiel-Webseiten vorstellen möchte.

 

2011/12

 

Keypress Navigation

Mit den Pfeiltasten der Tastatur navigiert man sich durch die Webseite. Ähnlich wie bei einer Folienpräsentation, kann man hier horizontal und vertikal navigieren.

Beispiel

 

Pixel-Perfect-Design

Hier geht es darum mit Liebe zum Detail pixelgenau gearbeitet. Elemente einer Webseite können mit Effekten versehen werden, sodass sie qualitativ hochwertiger aussehen.

Beispiel

 

Print-Design Layout

Zitate, Marginalien, Initial, Spaltensatz oder Einzüge. Begriffe, die man sonst nur aus dem Print-Bereich kennt, kommen häufig auf Webseiten, die Schriften verkaufen, zum Einsatz.

Beispiel

 

Illustrationen

Professionelle Screendesigner müssen auch illustrieren können. Denn handgezeichnete Elemente sind noch immer angesagt. Sie sorgen oft in einem Bastellook für gute Stimmung.

Beispiel

 

Background Pictures

Wie sagt man so schön: „Bilder sagen mehr als 1000 Worte“. Ein Bild, dass im Hintergrund einer Webseite liegt und das gesamte Browserfenster ausfüllt. Ein Trend der ebenfalls bis heute anhält.

Beispiel

 

 

2013/14

 

Flat-Design

Mit einfachen Formen, Farben und Kontrasten wird der Inhalt sauber und deutlich dargestellt. Man wird weniger vom Design abgelenkt und die Funktionalität der Elemente tritt in den Vordergrund.

Beispiel

 

Responsive-Design

Flexible Website Layouts die sich dynamisch an die verfügbare Bildschirmauflösung anpassen. Der Inhalt (Texte, Bilder, Grafiken, Navigation) einer Webseite wird dementsprechend skaliert. So kann man einen Internetauftritt, sowohl auf einem grossen Bildschirm als auch auf einem Smartphone betrachten.

Beispiel

 

Off-Canvas

Auf mobilen Endgeräten ein Muss und manchmal bei Desktop-Versionen zu sehen ist die versteckte Navigation, die über das sogenannte „Burger Menü“ zu finden ist. In dem Fall ist die Navigationsleiste ausserhalb des sichtbaren Bereichs platziert und erscheint nur, wenn man es will.

Beispiel

 

One-Page-Design

Eine Webseite ohne Unterseiten. Die Menüpunkte in der Navigation dienen hier nur als Sprungmarken und navigieren den User zum gewünschten Bereich.

Beispiel

 

Parallax Scrolling

Ein Effekt, bei dem sich unterschiedliche Ebenen verschieden schnell bewegen, wenn der User scrollt. Durch die unterschiedlichen Ebenen entsteht beim Betrachter eine gewisse Dreidimensionalität.

Beispiel

 

Splitscreen-Design

Eine Seite, die in der Vertikalen in zwei Bereiche unterteilt ist. Der Nutzer hat die Wahl und kann sich für einen Bereich entscheiden.

Beispiel

 

Fixe Navigation

Wenn ein Benutzer auf einer Webseite nach unten scrollt, bleibt die Navigationsleiste an ihrem Platz, während sich der Inhalt der Seite bewegt. Somit ist jeder Bereich direkt im Blick und erreichbar.

Beispiel

 

 

2015

 

Kachel-Design

Das beste Beispiel für Kachel-Design ist das Betriebssystem von Windows. Über mehrere quadratische oder rechteckige Felder werden verschiedene Informationen dargestellt. Diese Layout eignet sich sehr gut für responsive Webdesigns, da sich die Flächen einfach untereinander anordnen lassen.

Beispiel

 

Background Videos

Ein Video das automatisch im Hintergrund der Webseite abgespielt wird. Videos sind der beste Weg User auf der Webseite zu halten. Mittels Videos kann man sehr gut Geschichten erzählen und Emotionen hervorrufen.

Beispiel

 

Mikrointeraktionen

Mikrointeraktionen können kleine Sets von Handlungen sein, die nötig sind, um ein bestimmtes Ziel zu erreichen. Es kann ein Pop-Up sein, dass zur Anmeldung eines Newsletters auffordert, oder ein Facebook Like-Button, der zur Erweiterung der Reichweite eingesetzt wird.

Beispiel

 

Hover Effekte

Den Effekt gibt es schon sehr lange. Es kann ein Hinweis sein, der erscheint, wenn man mit dem Mousecursor über einen Link fährt, oder ein Bild, das, wenn es mit dem Cursor angesteuert wird, sich in ein vollflächiges Feld mit Text und Call-To-Action verändert.

Beispiel

 

 

 

Bildnachweis Vorschaubild:
Webdesign Trend - From Past To Future

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.



Weitere Artikel zu Design

Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen... Mehr lesen »

CSS – das Design der Website Im ersten Teil der HTML Blogserie habe ich... Mehr lesen »


Weitere Artikel von Alexander
Design Landingpages Online Marketing
Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »

Design Landingpages
Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen... Mehr lesen »

Landingpages Online Marketing
Mit Hilfe von Eye-Tracking Studien können Sie Webseiten analysieren und... Mehr lesen »

Top-Beiträge

Facebook

Bilder posten auf Facebook

Nicht jedes Bild passt in das neue Konzept der Facebook Chronik. Aber wie müssen Bilder jetzt... Mehr lesen »
Design

13 coole Header-Effekte für Webseiten

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen animiert werden. Manche... Mehr lesen »
Facebook

Bilder einfügen in Facebook-Kommentaren – Gut oder schlecht?

Bereits im Juni war es bei Facebook-Profilen schon möglich Kommentare mit Bildern zu versehen. Für... Mehr lesen »
^