Die Top 10 der Webdesigns-Trends 2012

Trend 1: Mobile first

Zahlreiche Designer sind der Meinung, 2012 werde das Jahr des "Mobile first"- Prinzips. Dieser Methode folgend, entwickeln Webdesigner und Programmierer zunächst die mobile Version einer Website - und erst im Anschluss daran die Desktop-Version. Geprägt wurde der Ausdruck "Mobile first" von Luke Wroblewski , dem Autor des nach dem Prinzip benannten Fachbuchs.Zu den Vorteilen von Mobile first zählt Wroblewski allem voran die Zukunftssicherheit der danach entwickelten Websites. Zwar lag die mobile Nutzung des Webs in Deutschland laut Statcounter Ende November 2011 bei gerade einmal 2,3 Prozent, doch erscheint diese Zahl schon heute unglaublich niedrig, wie jeder spätestens nach einer kurzen Fahrt mit einem beliebigen öffentlichen Verkehrsmittel bestätigen kann.Was noch wichtiger ist: Die mobile Nutzung wird in Zukunft rasant ansteigen. Deshalb ist es wichtig, Websites, die zwei oder drei Jahre online bleiben sollen, schon 2012 auf ein geeignetes technisches und konzeptionelles Fundament zu stellen.Beschränkt sich der Designer bei der Konzeption einer neuen Website zunächst auf die Darstellung auf kleinen Smartphone-Displays, führt dies Wroblewski zufolge hinsichtlich Inhalt und Design zwangsläufig zu einer Reduktion auf das Wesentliche. Von diesem erzwungenen Abspecken soll auch die später auszuarbeitende Desktop-Version der Website profitieren.

Trend 2:  Responsive Webdesign

Eng verbunden mit dem Prinzip des Mobile first ist das Responsive Webdesign, ein Begriff und wiederum auch Titel eines gleichnamigen Fachbuchs, diesmal von Ethan Marcotte .Responsive Webdesign bedeutet zunächst einmal die Rückbesinnung auf flexible Layouts, bei denen die Darstellung einer Website eng verknüpft ist mit dem für die Anzeige verfügbaren Platz (Browserfenster beziehungsweise Display-Größe). Mit Hilfe von Media Queries kann der Designer dabei CSS formulieren, das bei bestimmten Auflösungen greift. Auf diese Weise lassen sich zum Beispiel die Spalten eines Grid-Systems für die Anzeige auf einem Smartphone (X-Auflösung typischerweise < 480 Pixel) untereinander anordnen.Responsive Webdesign, von vielen Designern auch Elastic Webdesign genannt, ist deshalb spannend, weil es die Entwicklung einer eigenständigen mobilen Website in vielen Fällen überflüssig macht.Der Betreiber der Website muss nicht zwei verschiedene Websites aktualisieren oder ein komplexes Content-Management-System einsetzen, das beide Versionen automatisch generiert. Vielmehr pflegt er nur eine Website, die sich dank Media Queries je nach Anzeigeraum unterschiedlich präsentiert. Gerade bei kleinen und mittleren Projekten, bei denen das Budget ohnehin enge Grenzen steckt, ist das ein gewichtiger Vorteil.

Trend 3:  Luftige Designs

Einig sind sich Designer darüber, dass die Zeiten von aus vielen kleinen Flächen zusammengesetzten Webdesigns 2012 vorbei sind. "Weg mit der Unordnung - weniger ist mehr" heißt es im OEV-Blog .Der Trend geht weg von dreispaltigen Designs hin zu maximal zwei Spalten und leeren Flächen, die Großzügigkeit vermitteln. In derart vereinfachten Layouts behält der Nutzer immer den Überblick. Nebenbei erleichtern größere Flächen und klar separierte Bedienelemente das Antippen mit dem Finger.

Trend 4:  Gemusterter Hintergrund

Damit die luftigen Designs nicht eintönig wirken, werden sie nach Meinung vieler Designer 2012 wieder verstärkt mit gemusterten Hintergrundgrafiken aufgelockert.Gestiegene Bandbreiten und bessere Displays, die auch feine Muster vergleichsweise präzise wiedergeben, sind die notwendige Voraussetzung für diesen Trend.

Trend 5:  Großer Kopfbereich

Hand in Hand mit dem Trend zu luftigen Designs geht auch der extrem große Kopfbereich, der durch hier eingefügte, flächige Bilder emotional aufgeladen wird. Ein aussagekräftiges Logo unterstützt den Wiedererkennungswert.Dass das allerdings so weit gehen sollte, dass der Content nur noch durch Scrollen erreichbar ist, wie Jürgen Liechtenecker meint, wagen wir zu bezweifeln.

Trend 6:  Abwechslungsreiche Typografie

sIFR, Cufon und andere Techniken, mit denen man dem Browser als Designer eigene Fonts unterschieben kann, sind klar auf dem Rückzug. Was für 2011 schon galt, gilt 2012 erst recht: Der Trend geht hin zur Einbindung von Schriften mit @font-face. Auf diese Weise lassen sich mehr als die beim Benutzer installierten Schriften verwenden.Problematisch hierbei kann sich die nach unserer Erfahrung häufig recht lockere Einstellung vieler Designer gegenüber dem Thema "Korrekte Lizenzierung der zum Download angebotenen Fonts" auswirken. Nicht wenige Website-Inhaber dürften künftig Strafpreise für die nachträgliche Lizenzierung einer Schriftart zahlen müssen, weil ihr Webdesigner sich nicht rechtzeitig um entsprechende Vervielfältigungsrechte gekümmert hat.Von den per @font-face eingebundenen Schriften wird - auch das nach Meinung vieler Designer ein Trend 2012 - intensiver Gebrauch gemacht. Schriftgrößen über 100 Pixel und auf Wortebene wechselnde (geschmackvolle) Farbgebung werden das Webdesign prägen.

Trend 7: Hochwertige Icons

Die Tage winziger Icons im Stile der bekannten Famfams sind 2012 vorbei. In sind große Icons. Für Webdesigner heißt das: Bislang mussten sie sich überlegen, wie sie den Bildinhalt in wenige Pixel quetschen. Künftig sind sie gefordert wenn es darum geht, die größere Icon-Fläche so zu nutzen, dass sich Liebe zum Detail darin widerspiegelt. Wir glauben, dass das vor allem ein Trend für große Websites ist.

Trend 8: Flexible Grid-Systeme

Grid-Systeme erleichtern durch vorgefertigtes CSS und definierte HTML-Strukturen die Anordnung von Inhalten in Spalten. 2012 wird das Jahr der flexiblen Grid-Systeme, ohne die elastische Webdesigns nicht möglich sind.2011 war vor allem das Jahr des Wildwuchses. Ob 320 and Up, Columnal, Fluid Baseline Grid, Foundation, Golden Grid System, Less Framework, MQFramework, InuitCSS, The 1140px CSS Grid System oder The Semantic Grid System, kaum ein Monat verging, in dem kein neues, elastisches Grid-System das Licht der Welt erblickte.Für 2012 erwarten wir eine Konsolidierung. Viele mit Elan begonnene Projekte werden wieder einschlafen. Achten Sie deshalb bei der Auswahl eines solchen Frameworks nicht nur auf technische Feinheiten, sondern auch auf die Popularität des Projektes, also zum Beispiel Zahl der Github-Beobachter, Google-Treffer und so weiter.

Trend 9: Mehr Social Networking

Der Gefällt-mir-Knopf scheint allgegenwärtig, doch bei genauerem Hinsehen stellt man fest, dass viele kleine und mittlere Unternehmen diese Form des Empfehlungsmarketings noch nicht für sich entdeckt haben. Vielfach führt ein Link zur Facebook-Seite die Nutzer, die sich bereits auf der Unternehmens-Website befinden, sogar von dort weg.2012 werden viele Unternehmen verstehen, welche Chancen Social Media für sie bieten. Daraus folgt, dass wir den Gefällt-mir-Button und ähnliche Plugins deutlich öfter auf Websites sehen werden. Webdesigner, die noch keine datenschutzkonforme Lösung für die Einbindung von Social-Media-Plug-ins entwickelt haben, sollten sich sputen.

Trend  10: Touch-Steuerung

2012 werden Designer vermehrt Rücksicht auf die wachsende Zahl von berührungsempfindlichen Displays nehmen (müssen). Das bedeutet vor allem den Abschied von Effekten, die aktiv werden, wenn der Nutzer mit dem Mauszeiger über ein Seitenelement gleitet - Touch-Displays kennen dieses Ereignis nämlich nicht. Gerade bei Dropdown-Menüs, die onmouseover erscheinen, ist das ein Problem. Eine interessante Lösung ist in diesem Zusammenhang übrigens das jQuery-Plug-in sf-touchscreen, das im Rahmen des Drupal-Projektes entstanden ist.

Fazit

Auf Designer kommt auch 2012 viel Arbeit zu. Bei Mobile first sowie Responsive Webdesign handelt es sich um zwei komplexe Trends und obendrein auch um "Work in progress", also alles andere als fertig anwendbare Konzepte. Tendenziell steigen mit der Komplexität des Webdesigns aber auch Eintrittshürden und Verdienstmöglichkeiten. Hobbyisten, die ihre Website nebenbei entwickeln, werden online immer seltener erfolgreich sein, auch deshalb, weil Wysiwyg-Tools wie Dreamweaver immer deutlicher an ihre Grenzen stoßen.