Nicht nur die Technik hinter einem Online-Shop, auch die Gestaltung ist entscheidend für die Zufriedenheit der Käufer und die Conversionrate. Die Agentur netz98 hat in dem Report "Zukunftsthemen im E-Commerce 2014" verschiedene Designtrends zusammengestellt, die von der Verwendung emotionaler Video-Hintergründe und Fotos über einen Gestaltungswandel der Icons bis hin zu neuen inhaltlichen Strukturen reichen

Flat Design

Der Begriff Flat-Design bezeichnet den aktuellen Trend, die Interface-Gestaltung auf das Wesentliche zu reduzieren. Dabei wird weitestgehend auf Schmuckelemente verzichtet und die funktionalen Elemente durch klare Formen hervorgehoben. Diese Tendenz ist zum Teil entstanden, weil moderne Bedienoberflächen sowohl auf großen als auch auf kleinen Displays dargestellt werden müssen. Gerade bei kleinen Bildschirmen ist es wichtig, die Kernfunktionen deutlich und klar darzustellen. Die Touch-Bedienung solcher Interfaces benötigt entsprechend mehr Raum für klickbare Elemente und wird durch ein Flat-Design unterstützt

Masonry-Layouts

"Masonry" zu deutsch "Mauerwerk" ist eine Form der Informationsbereitstellung, die sich immer häufiger auf Content-Curation-Plattformen wie Pinterest entdecken lässt. Der Inhalt wird hierbei in Form von Kacheln mehrspaltig angeordnet, um so viel Platz wie möglich auszunutzen. Das Ziel dieser Darstellungsform ist es, visuelle und inspirierende Seiteneinstiege zu bieten. Der eigene Onlineshop kann mit Hilfe dieses Gestaltungsrasters emotionaler und Themenwelten sowie Marken spannend in Szene gesetzt werden

One-Pager

Beim sogenannten One-Page-Design oder auch Single-Page-Design besteht die Webseite nur aus einer meist recht langen Seite. Dieses Layout eignet sich für eine überschaubare Menge an Inhalt, weniger für umfangreiche Information, die in verschiedene Kategorien gegliedert ist. Das One-Page-Design hat den Vorteil, dass der Benutzer wenig klicken muss, sondern sich scrollend durch die Seite bewegt. Diese Gestaltung richtet die Aufmerksamkeit auf den wichtigsten Inhalt, und der Benutzer wird mit Animationen,  ausgelöst durch vertikales oder auch horizontales Scrollen, durch die Webseite geführt

Full-Screen-Design

Warum nicht den gesamten Platz im Browser ausfüllen? Kein Problem für das Full-Screen-Design. Hierbei passen sich Bilder, Videos und Texte der Auflösung des Endgerätes an. Am effektivsten wird Full-Screen-Design beim Verwenden von großen und emotionalen Bildern, neben denen der Text eher Nebensache bleibt: "Ein Bild sagt mehr als 1.000 Worte" ist das Motto. Gerade auf großen Bildschirmen wirken Full-Screen-Webseiten stark. Allerdings ist hierbei zu beachten, keine Bilder mit zu großem Datenvolumen zu wählen, da diese die Ladezeiten ins Unerträgliche steigern

Video-Hintergründe

Für eine erweiterte User-Experience werden immer häufiger interaktive Webseiten mit Videohintergründen erstellt. Diese transportieren Emotionen auf einer anderen Ebene. Die bewegten Bilder sorgen für ein noch visuelleres Erlebnis und machen die Webseite attraktiver, interaktiver und spannender. Außerdem ist es möglich, eine Geschichte zu erzählen und beispielsweise das zu verkaufende Produkt so einzubinden, dass es dem Nutzer im Kopf bleibt

Asynchronous Scrolling

Beim asynchronous Scrolling sieht man auf den ersten Blick eine Webseite in einem festen Rahmen mit Bild und Text. Erst beim Scrollen fällt auf, dass sich die Seite in verschiedene Richtungen bewegt - sie verhält sich asynchron. Während sich einzelne Elemente nach oben oder unten verschieben, rutschen andere nach links oder rechts. Dadurch wirkt die Seite sehr dynamisch und interessant - man möchte einfach mehr davon sehen

Off-Canvas-Layouts

Bei Off-Canvas-Layouts werden Inhalte, die sich außerhalb des sichtbaren Bereichs befinden, auf dem aktiven Screen bereits teilweise angezeigt. Sekundäre Elemente werden ausgelagert, bleiben aber trotzdem leicht zugänglich. Da der Platz auf mobilen Endgeräten beschränkt ist, bietet sich dieses Verfahren an, um Seitenelemente wie die Navigation auf eine andere Art zur Verfügung zu stellen. Somit wird für eine bessere Übersichtlichkeit gesorgt. Dies spielt nicht nur bei mobilen Anwendungen eine Rolle, sondern kann auch bei Desktop-Webseiten sinnvoll sein. Die Firma kai USA verwendet einen Warenkorb für drei verschiedene Messershops und nutzt hierzu den Off-Canvas-Bereich für den Wechsel zwischen den Shops

Moderne Farbverläufe

Angelehnt an das neue IOS 7-Design von Apple findet man wieder häufiger Farbverläufe. In den letzten Jahren wurden Verläufe eher als altmodisch empfunden und vermieden. Apple greift dieses verloren gegangene Designmittel wieder auf und bringt es zurück in die flächig gewordene Designwelt. Die neuen Farbverläufe sind geprägt durch grelle Neonfarben und mutige Farbkombinationen. Gepaart mit Unschärfe, Transparenz und leichter Typografie gelingt es Apple, ein komplett neues Gefühl zu erzeugen und ein altmodisches Stilmittel wieder aufleben zu lassen

Outline-Icons

Das flächige Windows 8-Design spiegelt sich auch beim Einsatz von Icons wider. Der Trend geht weg von detailreichen, aufwendigen Icons hin zu flächigen, einfachen und einfarbigen Icons, die sich auf das Wesentliche konzentrieren. Zur Weiterentwicklung dieses Trends können noch Outline-Icons gezählt werden. Diese wirken leichter als flächige Icons und harmonieren mit dem minimalistischen Grundgedanken, der das Design vieler Webseiten bestimmt. Glyphish stellt diese Icons, welche auch für IOS 7 benutzt werden, zum Download bereit

Long-Shadow-Design

Nach dem schattenlosen Flat-Design kommt das Long-Shadow-Design; bei diesem Trend werden die Schlagschatten fast schon übertrieben. Dieser Stil wird hauptsächlich an kleineren Objekten wie beispielsweise Icons angewandt. Der Seite wird ein moderneres und abwechslungsreiches Aussehen verliehen, die Icons stechen mehr hervor. Icons können kostenlos auf dribbble.com oder onextrapixel.com heruntergeladen werden

Bilder als Produkteinstieg

Große, emotionale Bilder der Produkte selber werden als Produkteinstieg verwendet. Die Produkte werden auf einzigartige Weise in den Vordergrund gestellt. Der Onlinehändler Greats setzt dieses Thema  ambitioniert um, indem hohe Auflösungen und qualitativ hochwertige Produktbilder eingesetzt werden. Der Onlineshop bietet keinerlei Ablenkung von den Produkten. Nur bei Klick auf das Menu wird eine Navigation eingeblendet

Non-Standard-Navigation

Die Navigation ist das wichtigste Element einer Webseite, da wir uns ohne sie auf der Seite nicht zurechtfinden würden. Normalerweise ist sie oben, links oder rechts angeordnet, doch es gibt auch andere sogenannte Non-Standard-Navigationen. Dabei kann die Navigation komplett anders funktionieren und auch die Tastatur als Navigationsmedium einbeziehen Diese Art der Navigation reizt die Möglichkeit in Design und Technik bei der Seitendarstellung voll aus

Fixed Elements

Durch so genannte Fixed Elements, fest auf der Seite platzierte Bedienelemente, kann der Nutzer bei langen Seiten ohne lästiges Zurückscrollen wieder zu einem anderen Menüpunkt oder einer anderen Funktion wechseln. Außerdem kann er einfacher feststellen, auf welcher Unterseite er sich gerade befindet. Im E-Commerce können weitere Teile wie der Warenkorb, der Produktvergleich oder Kontaktoptionen fest positioniert werden. Fixed Elements werden gerne in Kombination mit den One-Pages angewandt.