«

»

Okt
19

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

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

Der dritte und letzte Teil der Webdesign-Trends 2011/2012 Reihe mit weiteren 6 Beispielen aus verschiedenen Bereichen und Branchen. Wir freuen uns über Ihre Anregungen und Kommentare – sofern Ihnen die Beispiele gefallen haben, empfehlen Sie die OEV-Artikel gerne weiter. Vielen Dank!


13 Footer sind mehr als Dekoration

Footer wurden viele Jahre vernachlässigt und galten als Sammelstelle für Datenschutz-, Kontakt-, Unternehmens und Startseiten-Links. Erst Ende 2010 begannen auch Webdesigner sich mehr mit dem Thema Footer zu beschäftigen und ihnen dieselbe Aufmerksamkeit zu schenken wie dem Kopf der Seite.

Heute werden im Footer Social-Media Boxen, Kontaktformulare, Weiterempfehlungs-Angebote, Blog-Kommentare und viele weitere Elemente untergebracht. Besonders beliebt ist zurzeit die Doppelung der Navigation im Footer, was größtenteils auch positive Auswirkungen auf die Suchmaschinenfreundlichkeit einer Seite hat.

Screenshot von http://www.iprimidieci.com/ – OEV Blog – Die Webdesign-Trends 2011/2012http://www.iprimidieci.com – ein übersichtlich gestalteter Footer mit Texturen, Vektorgrafiken und einem schönen Design

 Screenshot von http://www.puma.com/ – OEV Blog – Die Webdesign-Trends 2011/2012http://www.puma.com – der Sportartikelhersteller PUMA platziert im Footer die wichtigsten Rubriken, so dass der Nutzer sowohl über die Haupt-, als auch über die Footernavigation zum Ziel gelangt

 14 Boxen sorgen für Ordnung auf der Seite

Bei der schematischen Darstellung einer Webseite werden anstatt großer Spalten und unübersichtlichen Strukturen vermehrt kleine Boxen eingesetzt, in denen die Informationen dargestellt werden. Der übliche Kopf-, Content-, Footeraufbau weicht 2012 häufig zugunsten neuer Strukturen und Boxenplatzierungen.

Screenshot von http://www.arqandgraph.com/ – OEV Blog – Die Webdesign-Trends 2011/2012 http://www.arqandgraph.com – Eine simple, platzsparende Boxenplatzierung ersetzt auf dieser Seite unübersichtliche Strukturen

 Screenshot von http://orangeapple.com/ – OEV Blog – Die Webdesign-Trends 2011/2012http://orangeapple.com – Neben dem Einsatz der vorher angesprochenen Vektorgrafiken gefallen auch die drei Boxen als platzsparende Darstellungsform im Contentbereich der Seite

15 Schrittweises Laden und feststehende Elemente

Nicht wirklich ein Webdesign-Trend, sondern eher eine funktionelle Neuerung sind beständig nachladende Inhalte. Scrollt der Nutzer nach unten, so werden die Folgeinhalte kontinuierlich nachgeladen, ohne dass die komplette Seite aktualisiert wird.

Damit der Nutzer auch bei langen Seiten immer auf bestimmte Elemente zugreifen kann, werden diese an einer Stelle (z.B. im Kopf der Seite) fest verankert und scrollen nicht mit dem restlichen Inhalt. Das wird z.B. auch vermehrt bei Kontaktoptionen am Seitenrand eingesetzt.

Screenshot von http://creattica.com/ – OEV Blog – Die Webdesign-Trends 2011/2012http://creattica.com – Das schwarz hinterlegte Menü im Kopf der Seite ist feststehend und ermöglicht während des gesamten Prozesses den Zugriff auf diverse Funktionen

Screenshot von http://www.iconshock.com/icon_sets – OEV Blog – Die Webdesign-Trends 2011/2012http://www.iconshock.com/icon_sets – die Seite iconshock bietet sowohl schrittweise nachladende Inhalte, als auch die feste Platzierung der Social Media Funktionen am rechten Bildschirmrand, so dass dem Nutzer die Bewertungs- und Empfehlungsmöglichkeiten während des gesamten Navigationsprozesses erhalten bleiben

16 Häufig reicht auch eine einzelne Webseite

Ein weiterer eher funktioneller Trend ist die Erstellung einer einzelnen Webseite, die alle relevanten Informationen untereinander darstellt. So spart man dem Programmierer das Anlegen von vielen Verzeichnissen und kann sich in punkto Design auf diese eine Seite konzentrieren.

Die Navigation kann dann z.B. über mit dem Inhalt verknüpfte Ankerlinks im Kopf der Seite erfolgen, wobei hier auch die „zum Anfang der Seite“ Verweise im Content nicht vergessen werden sollten.

Ein weiterer Vorteil: es werden die Ladezeiten verkürzt, da der Inhalt schrittweise geladen werden kann und nicht mehr seitenweise – ein Grund weniger für den Nutzer die Seite zu frühzeitig zu verlassen.

Screenshot von http://tahoetechtalkconf.com/ – OEV Blog – Die Webdesign-Trends 2011/2012http://tahoetechtalkconf.com – eine einzelne Webseite lässt sich realisieren, wenn man nicht zu viele Informationen darstellen muss, aber der Content für ein paar Seiten reichen würde. Die Seite Tahoe Tech Talk ist ein gutes Beispiel für die Realisierung einer „SinglePage Website“.


Screenshot von http://www.pojeta.cz/ – OEV Blog – Die Webdesign-Trends 2011/2012http://www.pojeta.cz – eine sehr schön gestaltete Einzel-Webseite, bei der es im Illustrationsstil vom Weltraum in die Tiefsee geht. Dabei bleibt der Nutzer auf der obersten Ebene und muss nicht tiefer in die Navigation einsteigen, was häufig zu einem Interessenverlust führt

17 Genähte Elemente, Abzeichen und Fahnen

Im Web 2.0 Zeitalter waren glänzende Objekte, Verläufe und knallige Farben der Trend – seit 2011 gibt es im Webdesign eine Tendenz hin zu genäht wirkenden Objekten, Abzeichen, Bannern und Fahnen.

Screenshot von http://www.transformology.com/ – OEV Blog – Die Webdesign-Trends 2011/2012http://www.transformology.com – in diesem Beispiel werden Aufnäher und fahnenähnliche Banner kombiniert dargestellt

Screenshot von http://www.iconeden.com/blog – OEV Blog – Die Webdesign-Trends 2011/2012http://www.iconeden.com/blog – hier wird sowohl eine stoffähnliche Textur verwendet, als auch ein fahnenähnliches Banner, welches den Kugelschreiber umschließt

 18 Design für mobile Endgeräte

Mit der Verbreitung von iPad, iPhone, Android-Geräten usw. müssen sich die Designer an neue Technologien und Auflösungen anpassen. Es gilt die geringe zur Verfügung stehende Displayfläche auf einem Smartphone optimal zu nutzen.

Zudem müssen die Datenmengen (und somit auch die Dateigrößen von Grafiken) klein gehalten werden, da gerade in ländlichen Gebieten die mobilen Bandbreiten und Netzanbindungen noch ausbaufähig sind und der Nutzer schnell mit Informationen versorgt werden soll.

Elemente, die im Standard-Webdesign nicht mehr so häufig verwendet werden, sind im Smartphonebereich mit kleineren Auflösungen noch oft anzutreffen. Dazu zählen im Wesentlichen Verläufe, glänzende Buttons, leuchtende Farben und weitere typische Elemente der Web 2.0 Ära. Doch es ist nur eine Frage der Zeit, bis auch hier neue Trends Einzug halten und sich im Mobile-Design verankern.

Screenshot von http://m.vgh.de/ – OEV Blog – Die Webdesign-Trends 2011/2012 Screenshot von http://m.otto.de/ – OEV Blog – Die Webdesign-Trends 2011/2012

Mobile Auftritte der VGH Versicherungen (http://m.vgh.de) und des OTTO Versandes (http://m.otto.de) – OTTO wurde im internationalen eCommerce Vergleich als sehr schnelle mobile Seite gelobt. Die mobile Seite der VGH Versicherungen erzielt durch Verläufe, Buttonabstufungen und ansprechenden Bildern ein gelungenes optisches Gesamtbild.

Noch kein Kommentar

1 Ping

  1. Die Webdesign-Trends 2011/2012 (Teil 2/3) » OEV BLOGGT sagt:

    [...] Die Webdesign-Trends 2011/2012 (Teil 3/3) » [...]

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>