Webdesign Trends für 2012

1. Mobile First / Tablet First
Da immer mehr Nutzer mit mobilen Geräten auf bestehende und neue Webinhalte zugreifen, sollen diese primär auch darauf ausgerichtet sein. Die allerwichtigsten Use Cases müssen auch auf der mobilen Website benutzerorientiert erledigt werden können – deshalb lohnt es sich, gerade bei Redesigns und Relaunches die Informationsarchitektur und die Benutzerführung auf Benutzer mit mobilen und touchbasierten Endgeräten auszurichten.

Einen hervorragenden Überblick und Einstieg in das Thema ist bspw. bei Luke Wroblewskis ‚Mobile First‚ zu finden.

 

2. Responsive Web Design
Wer diesen Artikel auf einem kleinen Screen liest, der sieht den Inhalt optimiert auf die verfügbare Breite:

Sämtliche Namics Blogs wurden mit responsive Layouts versehen, d.h. der Inhalt passt sich immer der verfügbaren Bildschirmbreite an.

Damit künftig nicht für alle gängigen Bildschirmgrössen zugeschnittene Layouts festgelegt und programmiert werden müssen, können diese mit responsive Layouts im Web zur Verfügung gestellt werden. Dabei werden gewisse Schranken festgelegt. Beim unter-/überschreiten dieser Schranken passt sich dann der Inhalt automatisch an den Screen an.

Zig Showcases und Beispiele für Responsive Design finden sich bspw. bei mediaqueri.es:

 

3. Flash wird komplett durch HTML 5 and CSS3 ersetzt
Nachdem Adobe bekanntgegeben hat, dass Flash für Mobile Geräte nicht mehr weiterverfolgt werden wird, scheinen langsam aber sicher auch die Stunden der Desktop-Version des Flash-Players zu verrinnen. Immer mehr Webauftritte und Apps kommen ohne Flash aus und setzten stattdessen auf HTML5 und CSS3. Im Web existieren zig Websites, welche die Möglichkeiten von HTML5 und CSS3 aufzeigen: z.B. hier, hier und hier.

Ist Ihr Browser für HTML5 bereit? Jetzt den Test machen!

4. Onepagers
Die Benutzer auf Websites wissen, wie man scrollt und können ohne Probleme auch Inhalte erreichen, welche – z.B. auf einer Startseite – nicht im sichtbaren Bereich sind (siehe dazu u.a. UX Myth N0 #3: People don’t scroll). Mit diesem Wissen können auf einer Start- oder Unterseite diverse Inhalte angeboten werden. Keine Sorge – sie werden gefunden und erreicht. Einen Schritt weiter gehen die Onepager- oder Single Page Websites. Hier wird der gesamte Inhalt auf einer (1) Webseite zur Verfügung gestellt. Der Benutzer erreicht Inhalte entweder durch Scrollen und/oder durch eine Navigation, welche die Inhalte anpeilt.

Inspiration gibt’s z.B. hier oder hier.

Ein prominentes Beispiel ist die Nike Better World Website, welche zusätzlich den sog. Parallax-Effekt einsetzt (Inhalt und Hintergrund bewegen sich unterschiedlich schnell und schaffen so einen dreidimensionalen Effekt):

5. Webfonts
Kein neuer Trend – eher ein anhaltender. Dank Webfonts können Websites mit den passenden Schriften versehen werden – sofern der jeweilige Einsatz Sinn macht. Da man so nicht mehr auf das Rendern von Titeln als Bilder oder Flash-Files angewiesen ist, kann die eigene Corporate Identity ohne weiteres auch im Web eingehalten und gelebt werden. Das bedeutet aber nicht, dass im Web automatisch das ganze Schriftbild ans CI/CD angepasst werden muss. Die Lesbarkeit auf Computerscreens muss nachwievor im Fokus der Designer sein. So sieht Fliesstext in Frutiger vielleicht in einer gedruckten Broschüre tiptop aus – der Einsatz im Web muss aber vorher genau geprüft werden.

Showcases für Typographie mit Webfonts z.B. hier und hier.

 

6. IE6 wird eingemottet
„It’s time to say goodbye“, erklärt Microsoft selbst auf der eigens dafür eingerichteten Website. Ab Januar 2012 sollen die User mit dem überalterten Browser (v.a. in China und Indien) mittels der üblichen automatischen Updates in Windows auf eine neue Version gebracht werden.

Ein Gedanke zu “Webdesign Trends für 2012

  1. Pingback: Webtrends 2012 | DOTMADE Blog – Webdesign & CMS

Hinterlasse eine Antwort

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

*

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>