Andreas Hecht 4. Februar 2015

Bessere Geschäfte: Sechs E-Commerce-Design-Trends für 2015

Kein Beitragsbild

Wie das „normale“ Webdesign unterliegt auch das E-Commerce-Design gewissen Trends. Wenn bei Ihnen in diesem Jahr turnusmäßig ohnehin ein neues Design für Ihren Online-Shop ansteht, dann kommt das genau zum richtigen Zeitpunkt. Denn die diesjährigen Trends können Ihnen eine wirklich wunderschöne E-Commerce-Webseite bescheren. Nutzen Sie unsere Beispiele gern für die Meetings mit Ihrem Designer, denn mit den Trends für 2015 werden Sie auch für die kommenden zwei bis drei  Jahre gut gerüstet sein. Die Trends befassen sich ganz eindeutig nicht nur mit „Schönheit“, sondern gehen vor allem auch Richtung Benutzerfreundlichkeit und mobile Nutzbarkeit.

Die 5 E-Commerce Design Trends für 2015

1. – Vollflächige Hintergrundbilder

Wenn Sie schon an wirklich guten Produktfotos gearbeitet haben, dann sind Sie auch bereit für vollflächige Hintergrundbilder. Gute Produktfotos können nicht nur als Bilder in einen Slider eingebunden werden, sondern wirken besonders gut auch als vollflächiger Hintergrund in sogenannten Hero-Bereichen. Suchen Sie Ihre besten Fotos aus und lassen sich überraschen, wie plastisch schön ein solches Design-Konzept wirken kann. Hier einige sehr gute Beispiele:

Suncoo

suncoo

Basus

Basus

Couteaux – TB Groupe

Couteaux - TB Groupe

The New World Order NYC

The New World Order - NYC

April 77

April 77

BIMBA Y LOLA

BIMBA Y LOLA

2. – Flat und Material Design in angenehmen Farben

Bereits 2014 war das Jahr des Flat-Designs und dieses Jahr wird es weiterhin im Trend liegen. Allerdings geht – inspiriert durch das neue Android-Design – der Trend mehr in Richtung Material Design. Flat-Design überzeugt durch seinen einfachen und klaren Stil ohne unnötige Spielereien. Material Design geht noch einen Schritt weiter und sorgt für die richtigen – nicht überladenen – farblichen Akzente. Mutiges Material-Design überzeugt durch seine klaren Strukturen und helle Farben und erscheint besonders für junge Marken vorteilhaft. Ein wirklich gutes Beispiel für die gelungene Umsetzung von Material-Design ist PA Design.

Boutique M Moustache

Boutique M Moustache

Loobow

Loobow

Bioseptyl

Bioseptyl

PA Design

PA Design

Wichtige Links

3. – Card-Design – Design mit Karten

Das Card-Design dürfte einer der wichtigsten im Kommen begriffenen Trends sein, denn es bietet nicht nur in Sachen Design große Vorteile. Benutzerfreundlichkeit wird hier ganz groß geschrieben, weil der Besucher alle relevanten Informationen auf einen Blick zu sehen bekommt. Diese Karten enthalten im Wesentlichen kurze Texte, ein Bild und/oder einige Share-Buttons, sowie die wichtigsten Informationen zu einem Produkt. So kann der potenzielle Kunde bereits auf einen Blick entscheiden, ob das Produkt für ihn in Frage kommt. Ein hervorragendes Beispiel ist The Verge, dort ist das Card-Design besonders informativ und gut umgesetzt.

The Verge

The Verge

Adidas

Adidas

Zalando

Zalando

 

Housen Deco

Housen Deco

 

4. – Parallax-Scrolling und Hintergrund-Effekte

Wahrscheinlich werden Ihnen bereits Webseiten begegnet sein, die Parallax für gewisse „Aha“-Effekte einsetzen. Richtig eingesetzt, können diese Effekte sehr eindrucksvoll wirken. Allerdings lenken sie auch sehr schnell vom Wesentlichen ab, daher sollten sie stets mit Bedacht und Sorgfalt implementiert werden. Parallax-Effekte sind nur dann zu empfehlen, wenn sie den eigentlichen Inhalt – also Ihre Produkte – unterstreichen. Ditto setzt den Effekt noch zaghaft ein, während er bei IWC Schaffhausen schon deutlicher ist. Ergänzend habe ich noch 2 branchenfremde Webseiten hinzugefügt, die den Effekt professionell einsetzen. L’unità nutzt den Parallax Scroll-Effekt und The Royal British Legion animiert fast die gesamte Webseite.

DITTO

DITTO

IWC Schaffhausen

IWC Schaffhausen

Branchenfremde Beispiele

The Royal British Legion

The Royal British Legion

L’unità

L'unità

5. – Minimalistische Buttons (Ghost Buttons)

Minimalistische, sogenannte Ghost Buttons sind schon in 2014 im Trend gewesen und dieser Trend wird sich 2015 noch ausweiten. Der Grund dafür ist relativ einfach: Sie können perfekt als Call-to-Action (zur Handlung auffordernd) Buttons auf Slidern oder vollflächigen „Hero“-Hintergrundbildern eingesetzt werden, ohne dass sie zu sehr vom Hintergrund und seiner Aussage ablenken. Minimalistische Buttons fügen sich perfekt in moderne, frische Designs ein.

Zeina Alliances

Zeina Alliances

Oelwein

Oelwein

Daniella Draper

Daniella Draper

Gladz Footwear

Gladz Footwear

6. – Für mobile Geräte optimiert

Immer mehr Menschen gehen dazu über, das Internet fast ausschliesslich mobil per Smartphone oder Tablet zu nutzen. Wenn Sie auch in Zukunft gute Geschäfte mit Ihrer E-Commerce Webseite erzielen wollen, dann empfehle ich Ihnen dringend, über eine Optimierung Ihrer Webseite für die mobile Ansicht nachzudenken. Hier gibt es zwei Wege, die Sie einschlagen können: Den guten und den besseren Weg. Der gute Weg ist es, die Webseite responsiv zu gestalten. Das heisst, dass sich die Webseite jeder Bildschirmauflösung optimal anpasst. Noch zileführender dürfte das Anbieten einer App sein, denn immer mehr Menschen bevorzugen Smartphone- oder Tablet-Apps, um sich zu informieren oder eine Bestellung aufzugeben. Der beste Rat ist: Tun Sie das eine, ohne das andere zu lassen. Also ergänzen Sie Ihre responsive Website um eine professionelle App, wenn Sie es sich leisten können.

Responsive Beispiel-Shops

Kershaw Knives

Kershaw Knives

A Book Apart

A Book Apart

E-Commerce Shops mit Apps

Amazon

Amazon

Die Amazon-App für: iPhone • iPad und iPad mini • Android Phone • Android Tablets • Windows Phone

Tchibo

Tchibo

Die Tchibo-App für: Tablets • Smartphones

TLDR: Zusammenfassung für Eilige

Flat-Design wird auch in 2015 einer der großen Trends im E-Commerce Design bleiben. Material Design wird sich aller Voraussicht nach in 2015 durchsetzen und belohnt die Shop-Besitzer mit schlichten und doch außergewöhnlichen Designs, die in den Köpfen der Besucher bleiben werden. Vollflächige Hintergrundbilder machen richtig Lust auf mehr und minimalistische Buttons unterstützen sie dabei, weil sie nicht zu sehr von der Aussage der Bilder ablenken. Parallax-Effekte setzen sich mittlerweile auch in E-Commerce-Webseiten durch und wirken am besten, wenn sie fast nicht zu bemerken sind. Parallax-Effekte sollten mit Bedacht eingesetzt werden, da sie sehr leicht vom Wesentlichen ablenken. Responsives Design und das Anbieten von mobilen Apps sind nicht nur kurzlebige Trends, sondern – man darf es wohl so pathetisch sagen – die Zukunft.

Links zum Beitrag

(dpe)

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

3 Kommentare

  1. Hallo,
    ein wirklich gelungener Artikel, der einige Trends im e-Commerce bei Onlineshops abbildet. Ich finde es wichtig darauf hinzuweisen, dass diese Trends natürlich nicht für alle Onlineshops abbildbar ist. Das e-Commerce ist ein weites Feld mit unterschiedlichen Kategorien und da muss jeder Shopbetreiber bzw. Entwickler überlegen, welche der Trends sinnvoll sind. Im Modebereich sind es natürlich große Bilder, stylisches Design. Aber trotzdem darf nicht vergessen werden, dass hier die Konkurrenz u.a. sehr groß ist und viele Onlineshops existieren, die Mode anbieten. Da können große und viele Bilder die Performance der Seite verschlechtern (bewusst Konjunktiv gewählt) und dann werden andere Seiten eventuell bei Google besser geranked, obwohl sie nicht so modern erscheinen. So ist auch darauf zu achten, dass diese „unscheinbaren“ Button nicht für einen Rückgang der Conversion-Rate führen. Eventuell durch Absprünge, weil der Knopf im Onlineshop doch markanter hätte sein sollen. Da helfen dann aber A/B-Tests !

    Viele Grüße
    Christoph

  2. Hmmm, alles richtig gemacht mit meiner neuen Referenz: http://www.fiolini.de
    Vollflächige Hintergrundbilder, angenehme Farben, Design mit Karten, für mobile Geräte optimiert :-)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.