Webdesign Trends 2012

Auch dieses Jahr wage ich wieder einen Blick in die Kristallkugel. Ich möchte mich diesmal etwas von den Webdesign Trends 2011 lösen. Überdimensionierte Header, die Verwendung grosser Schriftarten oder die Vintage und Handdrafted Designtrends waren letztes Jahr voll im Trend und werden es auch in 2012 sein. Meines Erachtens gibt es aber eine Menge neuer Technologien die zuwenig Beachtung erhalten und von den Webdesignern nur durch konkrete Verwendung Anerkennung auf dem Markt erhalten können. Nachfolgend also die Webdesign Trends für das Jahr 2012 aus technologischer Perspektive, denn der Anspruch an technologischem Wissen wird immer stärker. Mode hin, Mode her.

Social Media

Social Media Trends 2012 Social Media ist aus unserem Alltagsleben nicht mehr wegzudenken. Gott und die Welt tummelt sich bei Facebook,Google Plus ist erfreut sich einer wachsenden Usergemeinschaft. Immer mehr Unternehmen setzen inzwischen auf Facebook Pages, auch Google Plus hat vor kurzem Unternehmen die Erstellung eigener Plus-Profilseiten ermöglicht. Ob Google Plus jeh auf Augenhöhe mit Facebook heranwachsen wird sei dahingestellt, zumindest werden bis dahin noch ein paar Jahre vergehen. Dafür verspricht Google Plus die bessere Funktionalität und bessere Api Schnittstellen. Wer auf virales Marketing setzt kommt an den sozialen Plattformen nicht mehr vorbei. In den USA hat Facebook für die Facebook-Fanpage-Shops und Facebook-Games bereits eine eigene Währung entwickelt. Es ist eine Frage der Zeit bis diese auch in Europa zum Einsatz kommt. Für Unternehmen gehört es inzwischen zum guten Ton eigene Facebook Pages zu betreiben, Gewinnspiele oder andere soziale Marketingaktionen durchzuführen und den Kontakt zum Verbraucher somit aufrecht zu erhalten.

Mozilla Popcorn - Video fürs Web

Die Mozilla Popcorn html5 Javascript Library wird Video fürs Web auf den Kopf stellen. Statische Online-Videos werden so durch dynamische Elemente ergänzt. Zum Beispiel ist es möglich auf der Website eine GoogleMap anzuzeigen, wenn im Video über einen bestimmten Ort berichtet wird. Eine weitere Anwendungsmöglichkeit wären Übersetzungen der Videos in beliebige Sprachen. Untertitel für Videos lassen sich über html generieren und on the fly in beliebige Sprachen übersetzen. Aber auch ein Color-Tracking poc wurde veröffentlicht. Hier halten die Protagonisten einen pinken Notizzettel in der Hand, Javascript trackt die Farbe des Zettels und blendet an dieser Stelle Div-Container mit den Namen der Darsteller ein. Alles in Echtzeit, alles per Javascript, auf Seiten des Clienten. Ich bin davon überzeugt, dass Popcorn das Video im Web revolutionieren wird.

Auch ein Editor mit dem Titel Popcorn Maker steht bereits zur Verfügung. Der browserbasierende Editor zum Bearbeiten von Filmmaterial auf Basis von Popcorn wurde komplett in html5 erstellt. Eine umfassende Kompatibilität und die Darstellung auf mobilen Geräten wie dem iPad ist somit sichergestellt. Das ganze Projekt befindet sich momentan noch im Alpha Status und sollte daher nicht als produktivsystem eingesetzt werden. In meinen Augen wird Popcorn eine der atemberaubenden Anwendungen für 2012.

CSS3

CSS3 wird mit HTML5 in einen Atemzug genannt. Die mobilen Geräte und aktuelle Browser unterstützen bereits eine breite Palette der Möglichkeiten die CSS3 bietet. Auch wenn der Einsatz dieser Möglichkeiten nur unter Vorbehalt von Webdesignern genutzt wird, werden sich die Website-Layouts in 2012 die neuen Möglichkeiten zunutze machen.

Adobe CSS3 Layout Regions

Ein möglicher CSS3 Standart der Zukunft wurde nun als Prototyp vorgestellt. Adobe CSS Regions soll als Vorschlag an W3C übergeben werden. Durch Regions sollen die Layout-Möglichkeiten erweitert werden. In der Welt der Printmedien ist diese Layouttechnik bereits Gang und Gebe, Texte fließen hierbei über Spalten hinaus und um Bilder herum mit variabler Zeilenlänge. CSS Layout Regions kann als Prototyp von der Adobe Website heruntergeladen werden. Adobe stellt hierzu einen eigenen Mini-Webbrowser zur Verfügung, der die neue CSS3 Syntax interpretiert und darstellt. Das Paket besteht aus mehreren Demos und dem speziellen Browser. Ich sehe gute Chancen, das diese Funktion in die Standarts aufgenommen wird.

CSS3 Animations & Transitions

Nur die wenigsten haben es bereits mitbekommen, CSS3 kann jetzt auch animieren. 2D und 3D Transformationen, Slider und Accordeons sind so direkt über CSS3 realisierbar. Einen guten Einstieg in dieses Thema gibt es hier.

Typografie

TypeMedia 2011 Typografie ist ein relativ junger Bereich. Nichts desto trotz wird sie ein stetiger Begleiter im Webdesign bleiben und somit auch für 2012 top aktuell sein. Das Geschrei nach Usability wird immer größer und Webdesigner verlieren die Angst verschiedene Schriftarten und Grössen miteinander zu vermischen. Mit der richtigen Platzierung erhalten Websites, deren Layoutcharakteristik bei der Typografie liegt, mehr Aufmerksamkeit und Interesse. Korrekt platzierte Schriften sind daher effektiver als eine Websites die mit Bildern überladen wurde. Die Relevanz und der Kontext der Inhalte kann mit Hilfe von Typografie erhöht werden.

Die alljährliche Ausstellung Type]Media in Den Haag zeigte wie Schriften ästhetisch ins Design einfliessen.

WebGL und Web 3D

Web3D und WebGL sind neue Möglichkeiten Realtime GPU-Beschleunigte 3D Animationen für das Web zu erstellen. Mit Hilfe der HTML5 canvas können so aufwendige 3D Animationen erstellt werden. Somit verschmelzen WebGL-Inhalte nahtlos in den DOM der Website und ermöglichen eine Interaktion durch den Benutzer. Der direkte Zusammenhang zu OpenGL bringt alte Konzepte durch die ES 2.0 Spezifikation nach WebGL und erleichtert so erfahrenen OpenGL Programmierern den Einstieg. Ein sehr schönes Google Chrome Experiment ist die 3 Dreams of Black Demo. Eine Grafikkarte mit 3D Beschleunigung ist Voraussetzung zur Darstellung von WebGL Inhalten.

Responsive Webdesign

Layoutkonzepte für verschiedene Bildschirmgrössen sind das Thema für 2012. Durch fluid Grids und flexible Layouts passt sich die Darstellung der Bildschirmgrösse an. Das Webdesign reagiert also direkt auf die Geräte, auf welche es dargestellt wird. Durch die Einführung der CSS Media Querys ist dieses Thema aktueller denn je. Das Layout wird hierbei in 4 Darstellungsgrössen angelegt. Berücksichtigt werden Bildschirmgrössen unter 480px, unter 800px, über 800px und über 1080px Bildschirmbreite. Der Mehraufwand bei der Erstellung der Website zieht sich durch alle Stadien bei der Erstellung und Konzeption. Mit Tiny Fluid Grids lassen sich solche CSS Frameworks schnell und komfortabel erstellen.

Responsive Webdesign

Google Maps ist tot

Letztes Jahr habe ich ketzerisch Flash totgesagt. Dieser Trend hat sich nicht unbedingt bestätigt, die Statistiken sprechen gegen mich. Dieses Jahr spreche ich Google Maps ins Grab. Auch das dürft ihr jetzt belächeln.

Google Maps Preise Bisher war der Service vollkommen gratis, ab Anfang 2012 wird die GoogleMaps API kostenpflichtig. Google hat dazu beängstigende Preise veröffentlicht und man darf nun davon ausgehen, dass die Nutzung von Maps stark zurückgehen wird. Wer also grosse Anwendungen mit Maps anbietet wird auf kurz oder lang zur Kasse gebeten werden.

Leaflet sei dank

Die neue und großartige JavaScript-Bibliothek Leaflet ist eine neue Ausweichmöglichkeit. Diese nutzt OpenStreetMap und wird daher kostenlos bleiben. Auch BingMaps wird höchstwahrscheinlich öfter zu sehen sein.

Und jetzt?

Wir sind alle gespannt was das Jahr 2012 für uns bringt. Neben den ästhetischen Anspruch an das Design tritt das Wissen um technologische Möglichkeiten immer mehr in den Vordergrund. Ich freue mich auf Kommentare und Reaktionen und freue mich auf interessante Diskussionen mit euch.