Webdesign Trends 2010

Die Webdesign Trends 2010 waren ein weiteres Thema auf der Webinale 2010

Vitaly Friedman vom Smashing Magazine war als Redner eingeladen, um über das Thema zu referieren.

Anhand von zahlreichen Beispielen, die er in 9 Kategorien gliederte, zeigte er, welche neuen Trends in diesem Jahr zu erwarten sind.
Jedes Beispiel hat er anschliessend zur Diskussion gestellt.

1. Emotional Design
   Es wird versucht, den Besucher mit  etwas Unerwartetem oder Lustigem zu Beeindrucken. Oft sind es nur kleine oder versteckte Dinge, die erst beim Erkunden der Webseite bemerkt werden und die Neugier des Besuchers wecken sollen.
   

   Beispiele
   - Brizk design studio
   - Bounty Bev

2. "Keypress"-Navigation
   Hier wird die Möglichkeit gezeigt, Webseiten über Tastaturkürzel zu bedienen. Bei Flash ist es verbreiteter als bei reinen HTML/CSS Seiten. Dort wird es eher bei Fotogalerien mit Lightboxen und ähnlichen Interaktiven Elementen verwendet. Gerade Webapplikationen wie der Google Reader setzten Tastenkürzeln ein.
   

   Beispiele
   - Mad-ar.ch
   - Picnic Extraterrestre

3. Editorial Design - Art-directed Blogs
   Blogs setzen vermehrt traditionelle Print Layouts ein.
   Eine neue Form ist das Art-directed Blog, dabei ist jeder Artikel anders gestaltet.
   

   Beispiele
   - The Bold Italic: Dr. Feel Good
   - Kyle Fielder: Keeping Curious

4. Horizontalism
   Durch den Einfluss von Multi-Touch Geräten wie dem iPhone, gibt es eine Entwicklung zum horizontalen scrollen.
   Unterstützt durch neue Javascript-Plugins lässt sich das Mausrad auch zum horizontalen scrollen verwenden, was die Umsetztung solcher Layouts vereinfacht.
   Protfolio-, Gallery- und Museumsseiten eignen sich zum Einssatz von horizontalem scrollen gut.
   

   Beispiele
   - Thinking for a Living
   - C. L. Holloway

5. Typography - Rich, Strong
   Durch CSS3 gibt es auch in diesem Bereich neue Funktionen, wie „text-shadow“.
   Bei der Einbindung von Schriften in Webseiten, gibt es verschiedene Möglickeiten, wie Typekit, Cufon oder SiFR.
   Font-Stacks erfreuen sich wachsender Beliebtheit.
   Im gestalterischen Bereich geht es in Richtung Print, Schriften werden vermehrt wie Designelemente verwendet.
   

   Beispiele
   - extrapolish
   - Tick Talk

6. Reallife Metaphern
   Durch die Adaption von Elementen oder Situationen aus der realen Welt, fällt es vielen Anwender leichter, die Funktionsweise von Webseiten zu verstehen.
   Beispiele hierfür sind erkährende Illustartionen und Fotos, Schieberegler zum Einstellen von Budgets oder Zeitspannen, sowie Ein-Ausschalter anstelle von Checkboxen.
   

   Beispiel
   - Gowalla
   - Fred Perry

7. Hidden Complexity - Reduktion durch verbergen
   Intelligente System unterstützen den Benutzer bei seinen Tätigkeiten. Ein Beispiel hierfür ist Gmail.
   Schreibt man eine e-mail und gibt im Text an, einen Anhang versenden zu wollen, vergisst diesen jedoch beim Versenden anzuhängen, gibt die Anwendungen einen Hinwweis auf den fehlen den Anhang.
   Bei KKB, einer Seite zum Autoverkauf, wird ein Formular verwendet das einen Anzeigentext vorgibt, bei dem man nur noch die fehlenden Informationen eintragen werden müssen. Am Ende ist eine fertige Anzeige zu lesen.
   Aber auch sensitive Anzeigen werden Verwendet, um Inhalte beim Darüberfahren erst sichtbar werden zu lassen.
   

   Beispiele
   - LifeGear Mockup
   - Carsonified: 100 Things benutzt einen Tooltip um Informationen über die Sprecher der Konferenz anzuzeigen

8. Kontext-Sensitive Möglichkeiten
   Kontext-Sensitive Navigationen sind schon seit einigen Jahren im Einsatz z.B. blenden sich die Steuerelemente von Videoplayern erst beim Darüberfahren ein.
   In Dropdown-Navigationen werden nicht mehr nur Navigationslinks sondern auch thematische Informationen wie im Beispiel Reuters Aktienkurse oder Angebote, angezeigt.
   Bei aktuellen Touchscreen Geräten gibt es neue Anforderungen, da die Hover-Funktion durch eine sinnvolle Gesten-Steuerung ersetzt werden muss.
   

   Beispiele
   - The Black Harbor
   - AllTop

9. CSS3 - Experimente
   CSS3 ist der kommende CSS Standard und wird von aktuellen Browsern weitesgehend unterstützt.
   Die beliebtesten neuen Funktionen sind abgerundete Ecken, CSS-Animationen, multiple Hintergründe, Box- und Textschatten.
   

   Beispiele
   - Tapbots
   - SxSW Beercamp verwendet den "text-shadow"-Style in der Headline ca. 35 mal hintereinader

Vitaly Friedman kommt in seinem Votrag zu dem Schluss, das neue Möglichkeiten immer kreativ umgesetzt werden, aber so trendy sie auch sind, werden sie auch missbraucht.

Während gute Design Praktiken schnell in Web-Designs eingearbeitet werden (wie real-life Metaphern, reaktionsschnelle Schnittstellen und kontext-sensitive Menüs), werden viele neue Trends in Webseiten nur um ihrer selbst Willen eingesetzt.
Design Trends sollten nicht zu sehr Beachtung finden. Sie existieren, um gebrochen zu werden. Statt Trends zu folgen, sollte man die entsprechenden Techniken im Kontext mit dem Zweck nutzen.

Alle Beispiele können auf Smashing Magazine nachgelesen werden
- http://www.smashingmagazine.com/2010/05/04/web-design-trends-2010/
- http://www.smashingmagazine.com/2010/05/20/web-design-trends-2010-real-life-metaphors-and-css3-adaptation/

Über den Autor

Roland Heubereger, Web Producer bei PIXELTEX Berlin

Telefon +49 (0) 30 60 98 23 21 21
E-Mail: roland.heuberger@pixeltex.com