Wenn du den Auftrag hast, ein E-commerce Design zu erstellen, geht es um mehr als nur das Aussehen der Website. Es geht um die Stimmung, die Geschichte dahinter und das Gefühl, das bei dem Seitenbesucher hervorgerufen wird, sobald er sich durch die Seite navigiert.
In diesem Beitrag nehme ich dich mit hinter die Kulissen eines Online Shop Projekts, welches ich für das Modelabel CYLVAN erstellt habe. Dabei beschäftige ich mich intensiver mit dem Aufbau, der Struktur und Strategie, sowie dem Design des Online Stores. Das Ganze habe ich in einer Videoreihe festgehalten.
Falls du genauer erfahren möchtest, wie das CYLVAN Projekt überhaupt zustande gekommen ist, habe ich hier für dich einen Beitrag zusammengefasst.
Wenn du den Auftrag hast, ein E-commerce Design zu erstellen, geht es um mehr als nur das Aussehen der Website. Es geht um die Stimmung, die Geschichte dahinter und das Gefühl, das bei dem Seitenbesucher hervorgerufen wird, sobald er sich durch die Seite navigiert.
In diesem Beitrag nehme ich dich mit hinter die Kulissen eines Online Shop Projekts, welches ich für das Modelabel CYLVAN erstellt habe. Dabei beschäftige ich mich intensiver mit dem Aufbau, der Struktur und Strategie, sowie dem Design des Online Stores. Das Ganze habe ich in einer Videoreihe festgehalten.
Falls du genauer erfahren möchtest, wie das CYLVAN Projekt überhaupt zustande gekommen ist, habe ich hier für dich einen Beitrag zusammengefasst.
Einen Online Shop mit Shopify aufbauen
Diese Vorbereitungen sind bei der Thema-Auswahl wichtig
Ich habe mich beim Erstellen des Online Shops für den Einsatz von Shopify entschieden. Shopify ist ein Content Management System (CMS) das speziell für Online Shops gemacht ist und mit dem man sehr einfach den gesamten Shop, sowie dessen Produkte pflegen und einstellen kann.
Um den Aufbau zu beschleunigen, habe ich ein vorgefertigtes Theme eingesetzt. Die darin enthaltenen Module und Sektionen habe ich anschließend mit dem Design Programm Sketch neu gestaltet und auf das Brand der Mode-Marke angepasst.
Gerade wenn du dir den Theme Store von Shopify anschaust, merkst du schnell, dass es unzählige Varianten für alle möglichen Arten von E-Commerce Stores gibt. Worauf musst du also bei der Auswahl achten? Genau das habe ich dir hier in dem folgenden Video zusammengefasst.
Ich zeige dir auf welche Kriterien ich bei der Theme Auswahl geachtet habe und welche Vorbereitungen vor dem Redesign des Templates wichtig sind.
Die Struktur und der Aufbau des Online Shops
Bevor ich überhaupt mit dem Design des Layouts starten kann, muss ich mir erstmal grundlegende Gedanken um den Aufbau und die Struktur der Seite machen. Während des Design-Prozesses kann ich später immer wieder darauf zurückgreifen und mich daran orientieren.
Die richtige Strategie und das Konzept für eine Website zu entwerfen, ist ein entscheidender Faktor, wenn es darum geht, als Webdesigner ein Layout anzulegen. Falls du noch tiefer in diesen konzeptionellen Part eintauchen willst, schau dir mal folgenden Beitrag hier auf meinem Blog an: Landingpage Planung: Konzept, Ziele und Zielgruppe definieren
Die Homepage des Online Stores gestalten
Die Startseite eines Online Shops muss den Seitenbesucher nicht nur sofort überzeugen, sie muss ihm auch direkt einen Eindruck davon geben, worum es bei dem Ganzen überhaupt geht und wo er was auf der Seite findet.
Sie eignet sich sehr gut dafür, die einzelnen Unterseiten kurz vorzustellen und darauf zu verlinken.
In diesem Video gehen wir zusammen das Design und den Aufbau der Homepage Schritt für Schritt durch. Ich erkläre dir aus der Perspektive eines Designers, welche Gedanken ich hatte und was mir besonders wichtig war.
Aufbau, Inhalte und Design des Online-Shop-Footers
In diesem Video habe ich mich mal intensiver mit dem Footer eines Online Shops beschäftigt. Viele schenken ihm nicht allzu viel Aufmerksamkeit obwohl ich finde, dass er gerade bei einer E-Commerce Website entscheidende Informationen beinhaltet.
Um den „perfekten” Footer herauszufinden, habe ich zunächst eine Benchmark-Analyse gestartet und mal bei anderen Marken geschaut, wie sie diesen Bereich umsetzen und was man besser machen kann. Das gab mir eine super Grundlage um das Design für unseren Footer zu erstellen.
In diesem Video zeige ich dir, wie der Abschluss bzw. die „Fußzeile” des Shops aufgebaut werden muss und welche Inhalte integriert werden sollten:
—
Live Vorschau des fertigen Online Shops: www.cylvan.de
—
Falls du mehr Einblicke in dieses Projekt haben möchtest, ich habe mittlerweile auch eine umfangreiche Case Study auf meiner Projektseite dazu veröffentlicht:
Dieser Beitrag enthält eine Podcastfolge!
Diese Kannst du direkt auf Patreon oder in einer Podcast App deiner Wahl anhören.
Dieser Beitrag enthält ein Video!
Das Video wird dir auf Patreon freigeschalten.
Erhalte Zugang zu diesem und weiteren exklusiven Beiträgen
Unterstütze diesen Podcast über Patreon und lerne wöchentlich mehr über Webdesign, das Arbeiten als Design Freelancer und die Zusammenarbeit mit Kunden.
Einen Online Shop mit Shopify aufbauen
Diese Vorbereitungen sind bei der Thema-Auswahl wichtig
Ich habe mich beim Erstellen des Online Shops für den Einsatz von Shopify entschieden. Shopify ist ein Content Management System (CMS) das speziell für Online Shops gemacht ist und mit dem man sehr einfach den gesamten Shop, sowie dessen Produkte pflegen und einstellen kann.
Um den Aufbau zu beschleunigen, habe ich ein vorgefertigtes Theme eingesetzt. Die darin enthaltenen Module und Sektionen habe ich anschließend mit dem Design Programm Sketch neu gestaltet und auf das Brand der Mode-Marke angepasst.
Gerade wenn du dir den Theme Store von Shopify anschaust, merkst du schnell, dass es unzählige Varianten für alle möglichen Arten von E-Commerce Stores gibt. Worauf musst du also bei der Auswahl achten? Genau das habe ich dir hier in dem folgenden Video zusammengefasst.
Ich zeige dir auf welche Kriterien ich bei der Theme Auswahl geachtet habe und welche Vorbereitungen vor dem Redesign des Templates wichtig sind.
Die Struktur und der Aufbau des Online Shops
Bevor ich überhaupt mit dem Design des Layouts starten kann, muss ich mir erstmal grundlegende Gedanken um den Aufbau und die Struktur der Seite machen. Während des Design-Prozesses kann ich später immer wieder darauf zurückgreifen und mich daran orientieren.
Die richtige Strategie und das Konzept für eine Website zu entwerfen, ist ein entscheidender Faktor, wenn es darum geht, als Webdesigner ein Layout anzulegen. Falls du noch tiefer in diesen konzeptionellen Part eintauchen willst, schau dir mal folgenden Beitrag hier auf meinem Blog an: Landingpage Planung: Konzept, Ziele und Zielgruppe definieren
Die Homepage des Online Stores gestalten
Die Startseite eines Online Shops muss den Seitenbesucher nicht nur sofort überzeugen, sie muss ihm auch direkt einen Eindruck davon geben, worum es bei dem Ganzen überhaupt geht und wo er was auf der Seite findet.
Sie eignet sich sehr gut dafür, die einzelnen Unterseiten kurz vorzustellen und darauf zu verlinken.
In diesem Video gehen wir zusammen das Design und den Aufbau der Homepage Schritt für Schritt durch. Ich erkläre dir aus der Perspektive eines Designers, welche Gedanken ich hatte und was mir besonders wichtig war.
Aufbau, Inhalte und Design des Online-Shop-Footers
In diesem Video habe ich mich mal intensiver mit dem Footer eines Online Shops beschäftigt. Viele schenken ihm nicht allzu viel Aufmerksamkeit obwohl ich finde, dass er gerade bei einer E-Commerce Website entscheidende Informationen beinhaltet.
Um den „perfekten” Footer herauszufinden, habe ich zunächst eine Benchmark-Analyse gestartet und mal bei anderen Marken geschaut, wie sie diesen Bereich umsetzen und was man besser machen kann. Das gab mir eine super Grundlage um das Design für unseren Footer zu erstellen.
In diesem Video zeige ich dir, wie der Abschluss bzw. die „Fußzeile” des Shops aufgebaut werden muss und welche Inhalte integriert werden sollten:
—
Live Vorschau des fertigen Online Shops: www.cylvan.de
—
Falls du mehr Einblicke in dieses Projekt haben möchtest, ich habe mittlerweile auch eine umfangreiche Case Study auf meiner Projektseite dazu veröffentlicht:
