«

»

Sep
26

Die Webdesign-Trends 2011/2012 (Teil 1/3)

Die Webdesign-Trends 2011/2012 (Teil 1/3)

Was erwartet den surfenden Webseitenliebhaber im restlichen und kommenden Jahr beim Blick auf das hochauflösende Monitor-, TV- oder Smartphonedisplay? Wir fassen die Webdesign-Trends von 2011 und 2012 zusammen. Dabei gibt es viele „Trends“, die eigentlich schon zum Netzstandard gehören – allerdings zeigt die Erfahrung, dass einige Branchen erst relativ spät Einflüsse im Web aufgreifen und umsetzen. Von daher sind auch noch vermeintlich „alte Trends“ aus 2010/2011 aufgeführt, die aber immer noch interessant sind und weiterentwickelt werden.

Webdesign in der Versicherungsbranche

Stichwort „Weiterentwicklung“: Viele Webseiten der deutschen Versicherungsbranche haben 2011 ebenfalls große Fortschritte im Bereich Social Media Nutzung, Design und Usability gemacht. Auch wurden schon funktionelle Trends wie z.B. das Megadropdown oder der erweiterte Footer (http://www.allianz.de) umgesetzt. Es bleibt abzuwarten, ob die Branche auch in punkto Webdesign 2012 auf der Höhe bleibt – unsere in drei Blog-Folgen dargestellten 18 Trends liefern dafür sicherlich einige Anregungen.

Bezugsquellen und weiterführende Beispiele

Die hier genannten Beispiele und Texte basieren größtenteils auf den Artikeln „The Latest Trends in Webdesign“ (http://www.instantshift.com/2011/03/22/the-latest-trends-in-web-design/) von Anders Ross und „The real design trends for 2011“ (http://www.webdesignshock.com/design-trends-for-2011/) von WebDesignShock. Gerade der zuletzt genannte Artikel ist eine hervorragende Sammlung von Webdesigntrends mit unzähligen weiteren Screens und Beispielen – absolut empfehlenswert!

Ausblick

Inwiefern sich die neuen Möglichkeiten von CSS3 und HTML5 durchsetzen werden, bleibt abzuwarten, da viele Webdesigner noch auf die Unterstützung älterer Browservarianten Rücksicht nehmen müssen und daher runde Ecken, Schattenwürfe, 3D-Buttons und Glanzeffekte wie bisher über Grafiken eingebunden werden.

Fakt ist aber, dass die neuen Programmier-Techniken weitere Möglichkeiten für innovative Trends im Webdesign bereit halten – wir sind gespannt und wünschen viel Spaß beim Lesen des ersten Teils der Webdesign-Reihe mit den ersten sechs Trends.


01 Weg mit der Unordnung – weniger ist mehr

Im Jahr 2010 dominierten dunkle Farben, schwere Textblöcke und möglichst viele Bilder die Webseiten. Der Trend aus 2011 hin zu minimalistischen Darstellungen mit viel Frei- und Ruheraum für die Augen wird sich auch 2012 fortsetzen. Minimalistisch bedeutet nicht mittelmäßig, sondern das Gegenteil – die durchdachte schematische Platzierung relevanter Informationen und das Ausblenden von überflüssigen Inhalten.

Screenshot von http://curtziegler.com/sitedemo/minimal - OEV Blog - Die Webdesign-Trends 2011/2012http://curtziegler.com/sitedemo/minimal – eine eingeschränkte Farbenpalette, die stringente Verwendung der Sans-Serif Schriftart und feine Texturen im Hintergrund sorgen in Verbindung mit der funktionellen Navigation und der klaren Platzierung der Informationen für Übersichtlichkeit auf dieser Seite.

Screenshot von http://imagemechanics.com.au/ - OEV Blog - Die Webdesign-Trends 2011/2012http://imagemechanics.com.au – die Seite des Unternehmens image mechanics besticht durch Klarheit, viel Freiraum, große Schriftarten und ein funktionelles Interface.

02 Nicht so schüchtern – große Schriften für mehr Aufmerksamkeit

Bisher wurden sich häufig nicht viele Gedanken um die Schriftbilder auf Webseiten gemacht. Ihr wesentlicher Zweck war die Darstellung von Informationen – nicht mehr und nicht weniger.

Seit 2011 hat sich das Ganze jedoch geändert. Fette Überschriften und Schriftgrößen jenseits der 40pt haben einzig und allein die Absicht die Aufmerksamkeit des Nutzers auf sich zu ziehen – sofern es in das restliche Design der Seite passt, sind keine Grenzen gesetzt. Dabei können die großformatigen Buchstabenansammlungen eine ebenso große Anziehungswirkung auf den Betrachter haben, wie ein geschickt platziertes Bildmotiv.

Inspiriert von den traditionellen Print-Medien greifen Webdesigner auch 2012 zu größeren Schriftabmessungen. Zudem stehen größere Schriftbilder für Vertrauen, während das sprichwörtliche „Kleingedruckte“ häufig Misstrauen beim Betrachter hervorruft.

Screenshot von http://www.christhurman.com/ - OEV Blog - Die Webdesign-Trends 2011/2012http://www.christhurman.com – der Webdesigner Chris Thurman kombiniert auf seiner Webseite verschiedene Schriftgrößen mit Serifenfonts und serifenlosen Schriften in einer optisch ansprechenden und lebhaften Weise.

Screenshot von http://www.stephencaver.com/ - OEV Blog - Die Webdesign-Trends 2011/2012http://www.stephencaver.com – Mit kleinen Navigationselementen, einer überwältigenden Headline und großen Textboxen mit Grunge-Texturen zaubert Stephen Caver mit nur einem Porträt-Bildeinsatz eine nett anzusehende Seite auf den Bildschirm.

03 Weniger Platz für die Informationsdarstellung

Mit der immer größeren Verbreitung von mobilen Endgeräten, wie z.B. dem iPhone und dem Android, ist es notwendig geworden entsprechende Online-Anwendungen von Beginn an auf die Eigenschaften der häufig kleineren Displays auszurichten.

Designer können keine riesigen Auflösungen mehr als Spielweise nutzen – der Trend geht wieder hin zum „960 Grid System“, welches eine Breite von 960px als maximale Anzeigefläche vorgibt.

Doch wie kann man am besten Platz bei Webseiten einsparen? Eine Möglichkeit ist das Reduzieren der Abstände zwischen Wörtern und Buchstaben – aber Vorsicht: Damit der Text gut lesbar bleibt, müssen sowohl Kontrast, als auch Schriftgröße entsprechend gewählt werden.

Screenshot von http://epic.net/ - OEV Blog - Die Webdesign-Trends 2011/2012http://epic.net – Die Kreativagentur epic verwendet für ihre Hauptnavigation eine serifenlose Schriftart mit herabgesetzter Laufweite. So kann das komplette Menü in einem schmalen Bereich dargestellt werden. Die Schriftgröße und der starke schwarz/weiß Kontrast sorgen trotzdem für eine gute Lesbarkeit.

Screenshot von http://www.pineapplethief.com/ - OEV Blog - Die Webdesign-Trends 2011/2012http://www.pineapplethief.com – Ein weiteres Beispiel für Reduzierung im Schriftenbereich ist „The Pineapple Thief“. Wirft man einen Blick auf die Menüstruktur, kann man den Effekt der Reduzierung sehr gut verstehen – der kostbare Raum wird nur minimal genutzt und die Wörter sind trotzdem noch gut lesbar.

04 Die Rückkehr der Struktur-Hintergründe

In den letzten Jahren wurden hauptsächlich einfarbige Hintergründe ohne Details und Strukturen auf Webseiten eingesetzt, welche im Zusammenhang mit glänzenden Buttons und verspielten Verläufen das Design des Web 2.0 prägten.

Gegenwärtig sieht es so aus, dass die Rückkehr der mit Strukturen versehenen Hintergründe in vollem Gange ist. Dabei wurde der Grunge-Look aus den 90ern neu interpretiert und mit modernen Elementen wie großen Überschriften und klaren Menüstrukturen vermischt.

Das visuelle Erlebnis des Betrachters steigt mit einer ästhetischen Hintergrundumsetzung, welcher auch einer einfach gestalteten Seite Tiefe verleiht. Die angesagtesten Hintergründe sind zurzeit Grunge- und Holztexturen, wobei eigentlich alles eingesetzt wird, was aus kreativer Experimentierfreude heraus entstanden ist.

Screenshot von http://www.wearableprint.co.uk/ - OEV Blog - Die Webdesign-Trends 2011/2012http://www.wearableprint.co.uk – die Seite nutzt einen stoffähnlichen Hintergrund mit leichten Strukturen, der nicht zu stark Aufmerksamkeit erregt und perfekt zu dem Inhalt der Seite passt. Man stelle sich vor, wie langweilig die Seite mit einem einfachen Beige-Farbton wirken würde…

Screenshot von http://goglamping.net/ - OEV Blog - Die Webdesign-Trends 2011/2012http://goglamping.net/ – Holzartige Strukturen sorgen in Verbindung mit dem Grün der Seite für ein ausgeglichenes Erscheinungsbild ohne billig oder unpassend zu wirken.

05 Auf den Pixel genau gestaltete Webicons und -grafiken sind der neue Standard

Wie bereits am Anfang des Artikels erwähnt, sind die Display-Auflösungen in der letzten Zeit rasant in die Höhe geschossen. Designer stehen vor der Herausforderung optisch perfekte Icons, Symbole und Menüstrukturen sowohl für mobile Endgeräte, als auch für hochauflösende Monitore und Displays zu gestalten.

Der Trend geht hin zur pixelgenauen Erstellung von Grafiken, die bei allen Auflösungen perfekt aussehen. Dies funktioniert nur mit viel Sorgfalt und den entsprechenden Bildbearbeitungswerkzeugen.

Screenshot von http://wijmo.com/ - OEV Blog - Die Webdesign-Trends 2011/2012http://wijmo.com – Dieser Button ist ein gutes Beispiel für exakte Gestaltung – sorgfältig erstellt und perfekt auf die Auflösung optimiert. So sollte das Ganze aussehen!

Screenshot von http://www.electerious.com/ - OEV Blog - Die Webdesign-Trends 2011/2012http://www.electerious.com – Die auf den ersten Blick einfach wirkenden Boxen wurden mit viel Liebe zum Detail realisiert.

Screenshot von http://alexswanson.net/hire - OEV Blog - Die Webdesign-Trends 2011/2012http://alexswanson.net/hire – Ebenfalls ein Hingucker in Sachen Box- und Buttondesign.

06 Große Icons statt Understatement

Vor einigen Jahren war das Verwenden von möglichst kleinen Elementen noch Gang und Gäbe – heute ersetzen immer mehr Webseiten ihre 24 x 24px Icons durch wesentlich größere Varianten. Dies hat nicht nur Auswirkungen auf die eigentliche Icongröße, sondern auch auf den sichtbaren Detailgrad der Grafiken.

Screenshot von http://andrewmcclintock.com/ - OEV Blog - Die Webdesign-Trends 2011/2012http://andrewmcclintock.com – Andrew McClintocks Webseite benutzt große Icons, bei denen man die Arbeit, die in jedem Pixel steckt deutlich erkennen kann. Schatten und Lichteffekte lassen die Icons sehr realistisch wirken.

Screenshot von http://www.postbox-inc.com/ - OEV Blog - Die Webdesign-Trends 2011/2012http://www.postbox-inc.com – Hier kann man gut erkennen, was große Icons bedeuten – dasselbe Icon wurde im Kopf der Seite groß und weiter unten noch einmal kleiner verwendet. Icons können in Pixel- und Vektorformaten erstellt werden oder man vermischt beide Varianten.

Screenshot von http://tapbots.com/ - OEV Blog - Die Webdesign-Trends 2011/2012http://tapbots.com – Bei der Verwendung von großen Icons können komplexere Themen einfacher erklärt bzw. dargestellt werden, da die Detailvielfalt höher ist. Dies hat aber auch zur Folge, dass extrem genau gearbeitet werden muss.


Hier geht es zum  zweiten Teil der Reihe “Die Webdesign-Trends 2011/2012″

2 Kommentare

Derzeit kein Ping

  1. Oli sagt:

    Das like Button Plugin waere nuetzlich. Oder habe ich es nicht gefunden?

  2. Alexander Kurth (OEV Online Dienste) sagt:

    Hallo Oli,
    die Facebook-Like-Möglichkeit findest Du unter dem Artikel.

    Viele Grüße,
    Alexander

Hinterlasse eine Antwort

Ihre E-Mail-Adresse wird nicht veröffentlicht.

Sie können diese HTML-Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>