5 Webdesign Inspirationen für E-Commerce
Kommentare

E-Commerce Websites sind häufig immer nach dem gleichen Prinzipien aufgebaut: eine Menüleiste und hunderte von Unterseiten. Dabei gibt es unendlich viele Möglichkeiten, die E-Commerce Websites kreativ zu gestalten. Die Design-Trends gehen in Richtung großflächiger Fotos, Kachel-Designs und großzügigen Whitespaces und auch Parallax Scrolling und Video Backgrounds sind häufig eingesetzte Methoden, um sich von den Websites der Mitbewerber abzuheben.

Split-Screen – Blue Dolphin Charters

http://bluedolphinkauai.com/

Screenshot: http://bluedolphinkauai.com/

Blue Dolphin Charters kombiniert verschiedene Webdesign Trends: großflächige Bilder, Split Screen und Kacheldesign. Beim Einstieg in die Seite gelangt man zunächst auf einen Slider. Hier nimmt ein Foto den kompletten Screen ein. Durch Scrollen oder Pfeiltasten kann ich mich durch die einzelnen Slides bewegen, die scrollen oder mich durch Pfeiltasten hindurch bewegen kann.

Ein Spannendes Feature ist das Hauptmenü der Seite. Durch einen Button wird ein weißer Frame um die gesamte Seitenansicht eingeblendet, der sowohl die Links zu Social Media, wie auch zu den einzelnen Unterseiten enthält.

Vom Slider oder über den Menü-Frame gelangt man auf eine Unterseite im Splitscreen-Design, bei dem die linke Seite fix ist und ein Foto zeigt, während sich die rechte Seite scrollen lässt und Informationen sowie ein klassisches Reiter-Menü für den User bereitstellt.

Auf der Unterseite „Tours“ wartet dagegen ein Kachel-Design auf den User. Anders als bei den vielen Whitespace-lastigen Seiten ist diese Ansicht in dunklen Farben gehalten. Die abgedunkelten Kacheln interagieren sobald man mit der Maus darüber fährt.

Flat-Design – Boldking

http://www.boldking.com/

Screenshot: http://www.boldking.com/

Die Homepage von Boldking zeichnet sich durch riesige Whitespaces, Flat-Design und Animationen aus. Alles ist in einem Comic-artigen Stil gehalten, mit kräftigen Outlines und pastelligen und bunten Farben.

Das kleine Menü und der Slider sind eher nebensächlich, denn die Seite ist aufgebaut wie eine One-Page Website, durch die man sich am besten einfach durchscrollt. Je nach Bildabschnitt werden kleine Animationen aktiviert, die das Produkt und seine Funktionen vorstellen, unterstützt von kleinen Textabschnitten in minimalistischer Typographie.

In der unteren Hälfte der Website wird der User auf besondere Art und Weise durch die Seite navigiert. Hier übernimmt eine animierte Grafik die Aufgabe eine Prozess-Diagramms. Das besondere hier: Das Screen-übergreifende Diagramm ist eine Art Scrolling-Geschichte, die den User wie ein roter Faden durch die Homepage leitet. Die Animationen motivieren den User dazu nach unten zu scrollen und der Geschichte und dem Verlauf der Website weiter zu folgen.

Parallax-Scrolling – Mistrip

Parallax, Pastell und Retro-Filter – Die Website von Mistrip vereint alle Design-Features, die gerade populär sind. Lädt man die Website, wird man von einem großflächigen Foto begrüßt, das die vollständigen Screenmaße einnimmt. Scrollt man nach unten, fällt der Parallax-Effekt auf. Das hintere Layer besteht aus Fotografien im Retro-Style, das vordere Layer ist ein breiter Whitespace-Balken und semi-transparente violette Balken mit Text.

Der Whitespace ist Hintergrund für die eigentlichen Textinhalte der Seite. Illustriert wird das ganze von kleinen Icons, die teilweise animiert sind. Das Besondere an der Website ist die Farbgebung. Text, Illustrationen und Farbbalken sind ausschließlich in Violett und hellem Türkis gehalten, was der Homepage ein allgemein stimmiges und abgerundetes Design verleiht.

Kachel-Design – P&Co

http://pand.co/collections/all

Screenshot: http://pand.co/collections/all

P&Co ist ein gutes Beispiel für einen gelungenen Online-Shop. Hier wird eine klassischer Shop-Aufbau mit Menüleiste und Unterseiten mit Kachelansicht und großflächigem Foto kombiniert. Die ganze Seite ist in schlichten Farben gehalten und setzt starke Kontraste ein. Ein großflächiger Slider mit Editorials empfängt den User. Beim runterscrollen geht’s in einen Bereich mit Fotokacheln, die zu verschiedenen Unterseiten, Blog und Twitter führen. Diese sind hier in unregelmäßigen Größen und Formen.

Die Kachelansicht eignet sich sehr gut auch für die Produktliste. P&Co hat die Kleidungsstücke in quadratische Kacheln gepackt und komplett symmetrisch angeordnet. Die Kacheln interagieren mit der Maus und zeigen beim darüberfahren Produktinformationen auf halb-transparentem Hintergrund.

Auf einer anderen Unterseite wird eine weiteres Foto-Format verwendet, das zusätzlich noch mit einem leichten Parallax-Effekt kombiniert wird. Die Fotos nehmen die ganze Screen-Breite ein, zeigen aber als schmale Balken nur einen Bildausschnitt. Durch die verschiedenen Layer und Parallax wird beim Scrollen das vollständige Bild sichtbar.

Video-Background – J.Hornig

http://www.jhornig.at/

Screenshot: http://www.jhornig.at/

Diese Website hat einen eher klassischen Aufbau mit großen Fotos, Slider und Kachel-Design, das Besondere ist allerdings der große Video Background im oberen Teil. Die weiße Schrift kontrastiert mit den starken Rot- und Grüntönen dem Video, so dass die Lesbarkeit nicht beeinträchtigt ist. Das Video macht die Seite lebendiger und wird direkt dafür genutzt, das Produkt einzuführen.

Beim Runterscrollen trifft man auf einen Slider mit Fotos und Text, der die ganze Seitenbreite einnimmt. Auch hier wird durch die weiße Schrift und die leicht abgedunkelten Fotos ein Kontrast erzeugt, der die Schrift gut lesbar erscheinen macht. Weiter unten tauchen dann die gerade so populären Fotokacheln auf, in unterschiedlichen Größen und Formen und dieses Mal mit abgerundeten Ecken. Die Kacheln interagieren beim darüberfahren mit der Maus.

Die Farben aus dem Video werden von den weiteren Fotos aufgegriffen und auch für den Text auf der Website verwendet. J.Hornig verwendet minimalistische Typographie direkt zusammen mit einer Handschrift-ähnlichen Schriftart. Die Seite wird von großflächigen Whitespaces dominiert, der auch wieder mit den starken Farben von Fotos und Schrift kontrastiert.

 

Aufmacherbild: Conceptual image of human brain in colorful splashes via Shutterstock / Urheberrecht: Sergey Nivens

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -