Design Trends 2011

Wir haben uns im Internet umgeschaut, welche neuen Designtrends sich 2011 durchsetzen. Die Artikel von Jacqueline Thomas auf Webdesign Ledger und von Brandon Jones auf Webdesign Tuts+ decken dabei viele interessante Punkte auf. Hier haben wir die wichtigsten Trends für 2011 zusammengefasst.

 

01 Design verbindet sich mit neuester Technologie

Heute erweitern technische Möglichkeiten ein gutes Design. Es geht nicht mehr darum statisch gut auszusehen, sondern auch schnell zu reagieren und dem Nutzer ein intuitives und interaktives Designerlebnis zu bieten:

Eine aussergewöhnliche Erlebnisreise
Mouseerlebnis mit Javascript

02 Der Durchbruch von HTML 5 und CSS 3

HTML 5 bietet viele beeindruckende Möglichkeiten, die zuvor nur in Flash möglich waren:

Zeicheneffekte mit HTML 5 …
… und im Vergleich mit Flash

03 Mobile Ready

Statistiken zeigen, dass schon 2011 mehr Smartphones verkauft werden sollen als PCs. Der Tablet-Markt boomt, wobei Netbooks schon wieder fast veraltet sind. Man kann also davon ausgehen, dass zunehmend Webseiten auf verschiedenen mobilen Geräten wie Smartphones und Tablets betrachtet werden. D.h. auch Flashelemente sollten immer eine alternative statische Lösung bieten.

04 Flexible Auflösung

Eine optimale Auflösung gibt es in Zukunft nicht mehr. Designs müssen auf Smartphones, Tablets und Desktop-PCs funktionieren. Proportionen ändern sich und selbst eine festgelegte Scrollmarke ist unmöglich durch einfaches Drehen des Mediums.  Der Benutzer entscheidet in Zukunft selbst in welchem Format er Inhalte liest und das Design muss sich flexibel anpassen.

 

05 Touchscreen besitzt kein Mouse Over

So intuitiv und einfach: Das Touchscreen wird bald allgegenwärtig bei zahlreichen Smartphones, Tablets und nun auch bei einigen Desktop-PCs. Doch sie kennen keine Mouseover Effekte. Links müssen daher deutlich erkennbar sein und liebevolle Mouseover Effekte entfallen gänzlich.

06 Tiefenwirkung

3D Effekte erhalten Einzug in das Web, indem wir Elemente in verschiedenen Ebenen darstellen, räumliche Schatten, Überlagerungen oder kreisende Effekte, wie wir es bereits aus den Coverflows kennen. Ein einfaches und dennoch beeindruckendes Beispiel zeigt Nike:

3D Effekte bei Nike

Auch parallaxes Scrollen erzeugt die Wirkung von mehr Tiefe. Hier ein einfaches Beispiel für Parallaxes Scrollen im Hintergrund mittels CSS:

Parallaxes Scrollen mit CSS
… und ein Beispiel mit Flash

07 Großflächige Bild-Hintergründe

Nicht neu, jedoch immer wieder ein guter Eyecatcher:

Hochauflösende Hintergrundbilder als emotionaler Einstieg auf der Startseite
Flexibles Hintergrundbild mit statischem Menü

08 Hintergrund Textur

Neben großflächigen Bildern treten auch immer mehr greifbare Texturen in den Hintergrund eines Designs und verleihen diesem eine hochwertige und persönliche Note.

Dezente Hintergrundtextur
oder ausdrucksstarke Textur

09 Thumbnail Design

Google hat es eingeführt: die Thumbnail-Links. Äußerst hilfreich für externe Links:

Googles Thumbnail-Links

10 Live Feeds

Twitter und Facebook werden nun nicht mehr nur verlinkt, sondern Livefeeds werden direkt auf der Webseite eingefügt. Somit sind Informationen gesammelt auf der Webseite zu finden und die Webseite wirkt aktueller und persönlicher.

Live Feeds direkt auf der Webseite integriert

11 Individuellere & vielseitigere Domain-Endungen

Die Weave 01.2011 berichtet, dass 2011 in Deutschland neue Top Level Domains hinzukommen nach dem Muster .stadt oder .firma. Ab dem 30. Mai 2011 können diese dann bei der ICAN beantragt werden. Branchen-Domains wie .film und .hotel sind auch geplant.

12 Typographisches Design

Durch neue Technologie gibt es zunehmend die Möglichkeit verschiedene Schriften zu verwenden

Einsatz von großer Typo

13 Großflächiges Raster

Ein gut definiertes Raster ist im Design nichts Neues. Doch neuerdings sieht man auch Raster, die sich auf die komplette Breite anpassen, vollflächige Informationen einfach strukturiert:

Vollflächiges Raster

Was denkt ihr dazu?

Dies ist nur ein kleiner Ausblick in das was uns 2011 erwarten könnte.
Was denkt ihr über die neuen Trends? Gibt es Trends, die ihr schon lange nicht mehr sehen könnt, oder neue Funktionen, die ihr vermehrt im Internet sehen möchtet? Wir freuen uns auf euer Feedback.

2 Gedanken zu „Design Trends 2011“

  1. Sehr schöne Zusammenstellung – vielen Dank, gefällt mir! Das Thema Flash polarisiert ja in der Branche ungemein; Fakt ist, dass es mit modernem, dynamischem HTML immer weniger gute Gründe für den Einsatz gibt (Stichwort: Kompatibilität auf mobilen Endgeräten, Dateigrössen und Speicherhunger zur Laufzeit).

    Beispiel einer netten Anwendungl – ein Gedächnisspiel (nicht nur für Coder… ;-), umgesetzt in HTML 5:
    http://10k.aneventapart.com/Uploads/43/

  2. Danke für das Lob.

    Flash ist wirklich ein großes Thema und spaltet wieder einmal die Massen. Weshalb Apple sich so strikt dagegen wehrt, kann ich selbst nicht nachvollziehen. Ich glaube nicht, dass es vollständig ersetzt werden kann durch html5. Jedoch bietet es sich in Zukunft an für einfache Animationen direkt im html zu bleiben, um so volle Kompatibilität auf allen Medien zu gewährleisten.

    Das Memory ist wirklich tricky. Hat einen Moment gedauert, bis ich bemerkt hab, dass auch die Reihenfolge der Tags zählt. Aber immer wieder schön zu sehen, was mit html5 alles möglich ist ;-)

Schreibe einen Kommentar

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