Webdesign Trends 2016 für Shopbetreiber

Die Ausbreitung von typischen UI Mustern

Gerade die Vermehrung von auf gleichen Rastern und Mustern bestehenden CMS Systemen und somit Webseiten ist zum Teil auf Kritik gestoßen. Viele WordPress, Joomla, Jimdo, aber auch E-Commerce Suiten kommen im gleichen Look and Feel daher.

Dennoch ist es aber nicht notwendig das Rad immer wieder neu zu erfinden. Auf der anderen Seite muss das Design immer auch eine Funktion erfüllen und dies bedeutet auch, dass sich in erster Linie Nutzer damit zurechtfinden müssen. Hier eine kurze Übersicht an Seiten und Mustern, die sich mittlerweile etabliert haben:

Gestaltung der Login-Seiten

Login-Seiten können im Grunde immer gleich aussehen.

Es werden unterschiedliche Daten abgefragt, wie Name, E-Mail-Adresse, ggf. Geburtsdatum. Immer öfter trifft man auf die Möglichkeit des Social Login. Also Nutzerdaten aus sozialen Netzwerken, wie Facebook, Google Plus oder LinkedIn zu übernehmen. Der Nutzer erspart sich so die langwierige Eingabe in Formulare. Muss aber dem Abruf aus seinem Social Media Account zustimmen.

Checkout Seiten – klar un strukturiert

Ein Checkout ist immer noch ein Checkout, der letztlich die gleichen Daten abfragt. Viele Seiten bieten mittlerweile einen One-Page-Checkout an. Anbieter wie Klarna liefern diesen gleich als komplette Lösung mit.

Gerade beim Checkout sollte man auf größere Design Spielereien verzichten, schließlich zählt hier nur, dass der Käufer konvertiert.

Karten / Kachel-Layout

Ursprünglich von Pinterest pioniert, kennen wir dieses Layout auch durch die neuen Microsoft Betriebssysteme, die auch konsequent auf Kacheln setzen.

Fast jedes WordPress Template bietet mittlerweile eine sog. Grid Darstellung, die ebenfalls ein solches Raster als Layout anbietet.

Ansatzweise ist dies etwa auch bei About You zu sehen. Eine sehr stringente Umsetzung dieser Designform ist auch hier zu finden: http://thenextweb.com/#gref.

Der Vorteil davon ist auch, dass sich die rechteckigen oder quadratischen Formen leichter für die verschiedenen mobilen Formate umbrechen lassen.

Großflächige Banner

Dank schneller Internet Bandbreiten, verbesserter Bildkompression und Ausnutzung von Content Delivery Networks (CDN) ist die die Verwendung großer Banner, Full-Width Bilder oder Slider heutzutage kein Problem mehr. Zwar ist für Google die Ladegeschwindigkeit nach wie vor ein Rankingfaktor, aber für die meisten Nutzer lässt sich so eine hohe Aufmerksamkeit generieren.

Hier ein paar Beispiele unterschiedlicher Ausprägung:

• ein Norwegisches Restaurant, das beim Aufrufen nur ein vollflächiges Bild zeigt:
• Swatch und Nike setzen auf großflächige Slide, die 4, bzw. 6 Bilder mit aussagekräftigen Claims zeigen.

Die Schweizer Uhrenhersteller zeigen eine häufige Kombination: Unterhalb des Sliders finden sich weitere Themen im Kachelformat.

Hier ist sicherlich zu prüfen, ob ein derartiges Design zum eigenen Produktsortiment passt. Stichwort: Wenige Artikel und / oder Kategorien.

Qualitativ hochwertige Fotos

Stockfotos sind immer noch eine günstige Möglichkeit schnell zu passenden Imagefotos zu kommen. Es wird aber immer wichtiger authenttische und reale Fotos zu verwenden, die zudem einzigartig sind und nicht die Gefahr bergen noch an anderer Stelle verwendet zu werden.

Seiten wir AirBnB  setzen hier z.B. auf die Community Power, binden also Kunden und Nutzer ein und sorgen so auch noch gleich für soziale Interaktion.

Infinite Scrolling

Was wir aus den sozialen Netzwerken kennen, wird auf immer mehr Webseiten eingesetzt: Anstatt vielen Klicks wird endlos gescrollt. Die Seite wird dabei beim permanenten Scrollen immer wieder neu geladen.

Richard Gutjahr, einer der bekanntesten deutschen Blogger, hat dies schon sehr früh auf seinem persönlichen Blog umgesetzt.

Das Hamburger Menü

Mit einem Tap auf dieses in der Regel oben links angeordnete Menü-Element fährt ein Navigationsmenü von der Seite herein und ermöglicht es so, eine Vielzahl von Funktionen hinter einer aufgeräumten Oberfläche zu verstecken.

Eine Verwendung mehrerer der oben genannten Design Elemente zeigt die Webseite des Münchner Fashion Labels holy Ghost.

Beim Aufruf füllt ein Full Width Foto den gesamten Bildschirm aus. Darunter folgen mehrere großflächige Kacheln. Oben rechts ist ein Hamburger Menü, das beim Klick darauf die gesamte Navigation als Overlay anzeigt.

Storytelling

Im letzten Jahr wurde nicht zuletzt von Shopware mit der neuen Version 5 das Thema Storytelling auch im E-Commerce stärker in den Fokus gerückt.

Gerade in Branchen, mit vielen Webshops, die das gleiche Sortiment führen, ist es zunehmend schwierig sich bei Google oder dem Webseitenbesucher ins Gedächtnis einzuprägen. Der Content muss dabei nicht nur in Textform, sondern auch grafisch und visuell ansprechen und in Erinnerung bleiben.

Dass dies nicht nur als Insellösung, sondern sehr stringent auf der gesamten Webseite durchgezogen werden kann, zeigt die SEO Agentur Sumago.

Deren Ausrichtung, Guerilla Marketing, spiegelt sich konsequent in allen Bereichen der Seite wieder.

Typographie

Gerade in Zeiten immer mehr verschiedener Bildschirmgrößen spielt die Schrift und Schriftart eine entscheidende Rolle. Dabei ist Experimentierfreude und bunte Vermischung angesagt. Einen ausführlichen Artikel dazu findet man bei Onlinemarketing.de.

Die Webseite von iA – Information Architects – setzt quasi nur auf Schrift. Es gibt gar keine Bilder. Sehr ungewöhnlich für eine Design Agentur, die schon Arbeiten für Red Bull, ProSiebenSat.1 oder die Süddeutsche Zeitung erstellt hat.

Zum Ende des Artikels noch einige unserer Favoriten, die wir bei der Recherche gefunden haben:

• Sony be moved
  Auf der Kampagnenseite von Sony ist zuerst eine Seite ganz ohne Bilder zu sehen. Die ultimative Reduktion sozusagen. Beim Scrollen nach unten werden dann in 3D Effekten verschiedene Produkte zusammengesetzt. Das ist sicherlich die ganz hohe Kunst des Webdesigns.
• Bugaboo Kinderwagen
  Neben großen Bildern zeigen die Detailseiten 360 Grad Animationen der hochpreisigen Kinderwagen.
• Jimmy Chin x Harry´s
• Reebok
  Neben der Hauptseite baut Reebok auf sehr aufwendige interaktive Webseiten. Wie etwa den “be more human” Bereich.

Im Zeta Producer Blog finden Sie eine Sammlung weiterer Blogposts, die sich mit der Thematik befassen.

Bildnachweis: web design in metal type blocks ©Marek (fotolia)