Sebastian Denzin

Februar 7, 2015

#E-Commerce

Design Trends für Onlineshops

Design Trends 2015 für Onlineshops

Das Jahr 2015 ist jetzt schon gut eineinhalb Monate alt und die Spekulationen um neue Design Trends für den E-Commerce Bereich reißen nicht ab. Im Folgenden werde ich versuchen einige Spekulationen mal zusammen zufassen, und die wichtigsten Design Trends für das Jahr 2015 heraus zu filtern.

Design liegt immer im Auge des Betrachters, ich kann deshalb keine Anleitung für ein perfektes Design geben, jeder Onlineshop-Betreiber muss individuell entscheiden, wie er seine Produkte in den Vordergrund stellt und welches Design er wählt um die Aufmerksamkeit des potenziellen Kunden zu bekommen.

[separator top=“40″ bottom=“40″ style=“shadow“]

Content ist King und bleibt King

Zunächst muss ich eines klar stellen, Content ist King und bleibt King. Mit den Design Trends aus 2015 wird der Inhalt der Seite klar in den Vordergrund gestellt. Der Inhalt einer Seite ist letztendlich aber der auschlaggebende Punkt der das Produkt verkauft, das Design unterstützt dabei nur die eigentliche Aussagekraft des Produktes.

Das erstmal als oberste Prämisse, die aus meiner Sicht auch in den folgenden Jahren an oberster Stelle einer jeden E-Commerce-Strategie stehen muss.

Kommen wir nun zu den Design Trends, dem eigentlichen Thema des Beitrages.

Für Smartphones und Tablets optimiert

Zu der Überschrift fällt einem direkt ein großes Stichwort ein, genau, responsives Webdesign. Responisves Webdesign beschreibt eine Art, Webseiten auf jedem beliebigen mobilen Gerät anwenderfreundlich darzustellen. Sie kennen es ja selber, sie wollen sich ein neues Produkt zulegen, was machen sie, die wenigsten fahren noch in die Stadt und vergleichen in verschiedenen Geschäften die Preise.

Warum die wenigsten? Wir sind bequem geworden, es ist viel einfacher kurz auf dem Tablet den neuen Monitor zu bestellen als im Fachhandel den unfreundlichen Gesichtsausdruck des Verkäufers wahrzunehmen. Heutzutage gibt es die mobile Shopping-Welt, die es den Interessenten erleichtern ein Produkt zu kaufen, zu vergleichen oder auch erstmal zu finden.

Und genau da heißt es für Shopbetreiber dran zu bleiben. Vielleicht können sie auch aus eigener Erfahrung sprechen. Wenn ich beispielsweise ein neues Produkt kaufen möchte und ich daraufhin einen Onlineshop gefunden habe, in dem die Anzeige ziemlich klein dargestellt ist und ich selber das Bild vergrößern muss um überhaupt das Bild des Produktes sehen zu können, dann bin ich da schneller wieder raus als das Bild überhaupt geladen werden konnte.

Hierbei hat der erste Eindruck für mich versagt, der aber ein sehr wichtiger Eindruck ist. Komme ich auf einen Online-Shop indem mit responsivem Design gearbeitet wird, und in dem ich mich anhand eines mobilen Menüs schnell zurecht finde, dann habe ich selber Spaß daran nach meinem Produkt zu suchen, weil ich weiß das der Shop-Betreiber auf den Kunden eingeht, indem er ihm eine benutzerfreundliche Oberfläche zu Verfügung stellt.

Jetzt stellt sich die spannende Frage, ob man den Online-Shop responsiv darstellt, oder direkt eine App entwickelt und die im Store zur Verfügung stellt.

Es ist ja so, dass sich vieles in Apps abspielt, viele Leute besuchen App-Stores, um sich immer wieder mit neuen Apps zu aktualisieren. Eine eigene App zu besitzen hat was, das kann nicht jeder von sich behaupten. Deswegen geht mein Vorschlag ganz klar in Richtung App-Entwicklung, weil man dann einfach im Trend der Zeit steht.

Was braucht man dazu? Man braucht HTML5 und CSS3 Kenntnisse, einen Webservice, der die Datenbank des Online-Shops ausliest und ein Programm welches aus den HTML- und CSS-Dateien eine App generiert. Mein Tipp: Geben Sie die App-Entwicklung zu Spezialisten die ihr Handwerk verstehen und sie bekommen eine App, die sie ihren Kunden in verschiedenen App-Stores zu Verfügung stellen können.

Hintergrundbilder mit voller Breite und anspruchsvollen Effekten

Ein Hintergrund in voller Breite unterstreicht die Aussagekraft des Produktfotos. Sie wollen etwas präsentieren und gehen dabei in voller Breite auf das eigene Produkt ein. Die ganze Arbeit zum erstellen von schönen Produktfotos soll nicht umsonst sein, zeigen sie was sie haben und präsentieren sie in voller Breite ihr Produkt, ihre Erscheinung oder ihre Beziehung zum Produkt.

Anspruchsvolle Effekte wie Parallax-Scrolling werden auch im Jahr 2015 bei vielen Online-Shops zu finden sein, weil diese Funktion beim Besucher des Shops einen positiven Eindruck hinterlässt und zudem auch noch gut aussieht. Jedoch sollte man bei der Funktion auch vorsichtig sein.

Im Zentrum des Shops stehen die Produkte und keine Funktionen die nichts mit der Produktpalette zu tun haben. Das gefährliche beim Parallax-Scrolling ist, dass der Shopbesucher durch diesen „Wow“-Effekt von dem eigentlichen Sinn der Seite, dem eigentlichen Produkt abgelenkt wird.

Deshalb mein Tipp: Weniger ist besser. Parallax-Scrolling ist eine echt schöne Sache, mit der man aber vorsichtig umgehen muss. Man sollte deshalb den Einsatz von Parallax-Scrolling bei einer Produktvorstellung vermeiden um den Besucher nicht vom Produkt abzulenken. Für die Landing-Page oder der Vorstellung des Unternehmens kommt der Effekt des Parallax-Scrolling sehr schön zur Geltung.

Also nochmal zusammenfassend: Hintergrundbilder mit voller Breite unterstreichen die Aussagekraft des Produktes in welcher Form auch immer. Ein Effekt wie Parallax-Scrolling ist mit Sorgfalt zu verwenden, da dieser Effekt manchmal vom eigentlichen Sinn der Seite ablenken kann.

Flat oder Material Design? Wieso nicht beides?

Schon im Jahr 2014 war das Flatdesign eine beliebte Darstellungsart bei Onlineshops. 2012 wurde das Flatdesign mit dem Erscheinen von Windows 8 erst so richtig wahrgenommen. Nach und nach zogen dann auch namenhafte Unternehmen wie Apple und Google nach und entwickelten in deren Betriebssystemen ebenfalls Designs im Flatformat.

Eine Weiterentwicklung zu Flatdesign ist Material Design, wobei die einfachen und klaren Strukturen aus dem Flatdesign, zudem noch mit farblich attraktiven Akzenten unterstützt werden. Eine Mischung aus Flat- und Material-Design wäre also das ideale Gleichgewicht.

Durch eine klare Struktur und einer leichtverständlichen Aufmachung der Seite, inklusive farblich gewählten Akzenten, die das ganze nochmal schöner wirken lassen, wird das Gesamtdesign ein Hingucker.

Dunkle Farben waren im Jahr 2012 „In“, dass was jeder haben wollte. Heute setzen sich freundliche Farben, die den Besucher einladen mehr zu erfahren durch. Gehen sie also mit hellen zuversichtlichen Farben in die Zukunft um Besucher an ihren Online-Shop zu binden.

Card-Design für benutzerfreundliche Produktdarstellung

Wenn es darum geht Mobil- oder Desktoporientierte Produkte darzustellen, führt im Jahr 2015 kein weg am Card-Design vorbei. Card-Design beschreibt eine Darstellungsform, in der man die wichtigsten Informationen eines Produktes auf einen Blick zusammenfasst.

Meistens wird dabei eine kurze Zusammenfassung neben dem Preis und einem Produktbild dargestellt, damit der Interessent alles auf einem Blick hat. Klingt ein wenig so, wie bei den Anfängen von Facebook, in dem Frauen nach ihrem Bild von Besuchern der Seite bewertet wurden.

Der Unterschied, der potenzielle Kunde erhält noch weitere Produktinformationen, die wichtig für seine Entscheidung sein kann.

Mein Tipp: Halten sie die Informationen so gering wie möglich. Ein Besucher der Seite will nur wichtige Informationen zu dem Produkt haben und keine ellenlangen Texte lesen, woraus dann zum Teil nur zwei oder drei Zeilen interessant sind.

Also: Weniger ist mehr.

Ghost Buttons – werden sie auch 2015 eine Option sein?

Definitiv ja, denn der Trend wird sich im Jahr 2015 nochmals ausweiten. Was sich anfangs eher als langweilige Option herausstellte, ist heute für jeden Online-Shop ein Pünktchen auf dem „i“. Ghost Buttons haben eine minimalistische Darstellungsform, meist sind nur Inhalt und der Rand des Buttons vorhanden. Sie haben keine Hintergrundfarbe und sind so fast unsichtbar.

Aber warum das Ganze?

Sie haben ein schönes großes Hintergrundbild, wollen aber mit Buttons, Verlinkungen einbauen. Die Option mit dem CSS-Code „opacity“ lässt die Buttons fast verschwinden, nicht nur den Hintergrund sondern auch den Inhalt.

Genau für diese Nische sind Ghost-Buttons, sie machen zwar den Hintergrund unsichtbar, aber der Inhalt und die Umrandung sind klar erkenntlich. So wird das schöne große Hintergrundbild von den Buttons nicht kaputt gemacht und erreicht dennoch das Ziel, Verlinkungen einzubauen.

Eine sehr schöne Sache. Ein Geheimtipp für die Zukunft.

Fazit:

Wie ich schon am Anfang sagte, ich kann nur meine Eindrücke schildern, die ich in meinen Augen als sinnvoll betrachte. Was aber letztendlich bei Ihrem Onlineshop wiederzufinden ist, das ist ganz alleine Ihre Sachen. Ich gebe lediglich Anreize für ein Design, welches positive Auswirkungen auf den potenziellen Kunden haben können.

Wenn sie es nicht probieren, können sie auch nie urteilen wie es am Ende aussehen kann und wie ihre Kunden darauf reagieren.

Nochmals: Weniger ist mehr. Lieber vier Zeilen aussagekräftiger Inhalt als 100 Zeilen langweiliger Inhalt, der den Kunden gerade zu einlädt, die Seite zu wechseln.

Hast du Fragen?

Als Full-Service Online-Marketing-Agentur unterstützen wir Dich gerne.

02208 916 98 99 info@saphirsolution.de

Design Trends für Onlineshops

Design Trends 2015 für Onlineshops

Hast du Fragen?

Als Full-Service Online-Marketing-Agentur unterstützen wir Dich gerne.

Das könnte Dich auch interessieren:

Amazon Maßnahmenplan

Das Ende des JTL-Connectors für Shopware 5: Was nun?

Server-Side Tracking: Entwirrung des Geheimnisses

Facebook Pixel Verstehen: Einfache Implementierung mit Google Tag Manager