Als Shopbetreiber bist du Inhaber deines eigenen Kartenladens. Der Webshop wird zum Schaufenster deines Ladens, daher ist es wichtig, ihn in deinem eigenen Stil zu gestalten. Für das reibungslose Funktionieren deines Webshops ist es notwendig, dass du ein Design für Desktop und Mobilgeräte einreichst. Wenn du nur eine Desktop-Version einreichst, erstellen wir nach eigenem Ermessen eine mobile Version.
Die Mobil- und Tablet-Versionen sind Ableitungen der Desktop-Version. Hier verwendest du denselben Content. Du kannst dich jedoch dafür entscheiden, spezifische Teile oder Elemente auf Mobilgeräten wegzulassen. Tu dies nur, wenn es der Benutzererfahrung zugutekommt.
Starte in der Adobe Creative Suite: Erstelle das Design für deinen Shop in einem Programm der Adobe Creative Suite (Photoshop, Illustrator, InDesign), damit wir auch mit deinen Quelldateien arbeiten können.
1. Das Design des Webshops
Ein gutes Design ist ansprechend, hält die Aufmerksamkeit fest und lädt den Besucher dazu ein, aktiv zu werden. Manchmal liegt das in den kleinen Details, wie der Form eines Buttons oder der Schriftgröße eines Textes. Der Stil muss in jedem Fall zu dem passen, was du als Unternehmen ausstrahlen möchtest. Schnickschnack ist längst nicht immer für ein erfolgreiches Design nötig.
Die Benutzererfahrung spielt sich eher im Hintergrund ab und dreht sich vor allem um Funktionalität und Struktur. Was möchte der Besucher wissen oder was möchte der Besucher tun? Es ist ratsam, der Art und Weise, wie du Informationen ordnest, Aufmerksamkeit zu schenken. Präsentiere die Informationen so weit wie möglich in übersichtlichen Abschnitten.
1.1. Beispiele zur Inspiration
Hier findest du einige Shop-Beispiele zur Inspiration. Schau dir diese Shops mal auf dem Desktop und mobil an. Mobil bietet ein anderes Erlebnis und eine andere Interaktion. Berücksichtige das später auch bei deinem Entwurf.
2. Richtlinien für das Design
2.1. Ein eigener (Haus-)Stil
Beginne mit dem Design der Homepage für Desktop und Mobilgeräte und arbeite dabei mit einem klaren Corporate Design. Der Stil wird durch Logo, Schriftarten, Farben, Bilder, Icons, Komposition usw. bestimmt. Innerhalb des Photoshop-Templates wird auch ein Stylesheet für das Corporate Design angeboten. Vervollständige dieses Stylesheet mit einer Farbpalette, den Schriftarten und den Buttons, die du verwenden wirst. Dies bildet die Basis für deinen Webshop. Wende den Stil so konsequent wie möglich auf den Seiten an, die du anschließend entwirfst. Das sorgt für Konsistenz und Wiedererkennbarkeit, was beides ein Gefühl von Vertrauen beim Kunden erzeugt.
Tipps:
- Das Logo: Entwirf dein Logo (oder lass es entwerfen) und platziere es im Stylesheet. So kannst du die Farbpalette und die Schriftarten besser aufeinander abstimmen.
- Wähle die Farbpalette: Begrenze die Anzahl der Farben deines Stils. Berücksichtige dabei auch den Kontrast, wenn es um (hellen oder dunklen) Text auf einer Farbe geht.
- Wähle die Schriftarten: Verwende maximal zwei (Google) Fonts.
- Bestimme die Überschriften und den Fließtext: Vervollständige die Übersicht der Überschriften und des Fließtextes. Bist du nicht mit der Funktionsweise von Headings und Bodytext vertraut? Kein Problem! Das wird hier erklärt.
- Gestalte die Buttons: Durch die Verwendung von wiedererkennbaren Buttons wird sich der Besucher schnell zurechtfinden und verstehen, welche Aktionen auf der Seite am wichtigsten sind. Ein Button kann seinen eigenen Charakter erhalten, indem man mit der Abrundung der Ecken, der Farbe und der Typografie spielt.
- Triff klare Entscheidungen bei der Formgebung, wie etwa eckig oder rund. Hier kannst du mehr über das Styling von Buttons lesen.
- Sei konsistent, das sorgt für einen klaren Stil.
Beispiel eines Styleguides mit Auswahl für Farben und Schriftarten.
2.2. Schriftart wählen
Sei sparsam mit der Verwendung verschiedener Schriftarten. Oft reicht eine Schriftart für die Überschriften (Headings) und eine für die Texte (Absätze) aus. Nutze für die Schriftarten Google Webfonts. Diese Fonts können sowohl online als auch offline frei heruntergeladen und verwendet werden!
Schriftart in Google Fonts wählen
2.3. Lesbarkeit
Verwende für den Bodytext (auch: Lesetext) eine Mindestschriftgröße von 14–16 px für eine gute Lesbarkeit. Die Titel und Überschriften dürfen natürlich größer sein.
Tipp
Spiele mit Schriftart, Textgröße und Zeichenabstand. Texte in Versalien (Großbuchstaben) wirken schön und schick, können aber auch schwerer lesbar sein.
Beispiel einer Übersicht für die Schriftverwendung, bei der verschiedene Header/Titel und die Nutzung auf Desktop und Mobilgeräten berücksichtigt wurden.
3. Desktop und Mobil
Starte in deinem Designprogramm mit einer Breite von 1200 px für Desktop und 414 px für Mobilgeräte. Wie lang die Seite wird, hängt von der Menge an Content ab, den du dort platzierst.
Mobil- und Desktop-Design
3.1 Photoshop-Template
Arbeiten mit dem Grid: Bootstrap
Im Photoshop-Template des Shops wird ein Grid-Layout verwendet (das weit verbreitete Bootstrap-Grid). Dieses Grid nutzt eine Einteilung in 12 Spalten. Das macht es einfacher, Abstände genau festzulegen und so die einzelnen Elemente auf der Website für Desktop, Mobiltelefone oder andere Bildschirme zu positionieren.
Den Link zu den PSD-Templates findest du unten auf der Seite:
- Homepage
- Landingpage
- Styleguide
Mehr über Bootstrap wissen? https://getbootstrap.com/docs/4.4/layout/grid/
Zeilen und Spalten
Beim Aufbau der Seite verwendest du (horizontale) Zeilen. Jede Zeile versiehst du mit einer Spaltenaufteilung. Zum Beispiel: 2 x 6 Spalten, 3 x 4 Spalten, 4 x 3 Spalten usw. So entstehen Zeilen mit Blöcken, die du mit Text, Bild, Buttons usw. füllen kannst. Je nachdem, was du zeigen möchtest, nutzt du eine spezifische Aufteilung einer Zeile.
Anmerkung
Das bereitgestellte PSD-Template zeigt, was du mit der Aufteilung machen kannst, nicht was du machen musst! Du musst also nicht alle Blöcke im Template füllen. Du nutzt die Aufteilungen, die für dich funktionieren.
PSD-Template
Beispiele
Anzeige von Kategorien (Hippe-Geboortekaartjes) – 4 x 3 Spalten:
Beispiel hippe-geboortekaartjes.nl
Anzeige eines Swipers mit Kundenerfahrungen (MyCards) – 12 Spalten breit:
Beispiel mycards.nl
Anzeige von zusätzlichen Produkten und Dienstleistungen (Made For Moments) – 3 x 4 Spalten:
Beispiel madeformoments.nl
Die festen Elemente
Der Header enthält die folgenden Elemente:
- Optionaler Platz für „Unique Selling Points“ (USPs), wie eine Telefonnummer, Versprechen oder Sterne-Bewertung
- Info, Login und Warenkorb
- Logo des Webshops: Das Logo kann links oder zentriert stehen
- Hauptnavigation mit Menüpunkten
- Suchfunktion
Anmerkung
Behalte im Header/in der Navigation die Position von Login, Warenkorb und Suche bei.
Header-Variationen
Im Template kannst du auf der Homepage aus 3 Variationen für den Header wählen.
- Header mit geschlossener Suchfunktion
- Header mit offener Suchfunktion
- Header mit Logo und Elementen zentriert
Feste Elemente: verschiedene Layouts
Anmerkung
Wenn du dich für ein zentriertes Logo entscheidest, werden die Menüpunkte unter dem Logo platziert. Der Header benötigt dann mehr Platz in der Höhe, wodurch die Seite weiter nach unten gedrückt wird.
Beispiel 1: blijkaartje.nl
Beispiel 2: zomooikaartjes.nl
Navigation
Die Homepage ist in vielen Fällen nicht der Startpunkt für den Besucher. Dieser gelangt oft über eine Suchanfrage oder eine Anzeige (Google) auf eine Landingpage oder Produktdetailseite. Die Homepage ist jedoch ein guter Startpunkt für die Ausarbeitung des Corporate Designs. Aber versteife dich nicht zu sehr darauf.
Die Hauptnavigation einer Website muss es einem Erstbesucher ermöglichen, abzuleiten, was das Unternehmen tut, was es anbietet und welche Art von Inhalten verfügbar ist. Dies ist der Ort, um Menschen (und Suchmaschinen) zu sagen, was du tust. Die Navigation enthält natürlich weitere Elemente. Weiche dabei nicht vom Standard und von dem ab, was Besucher gewohnt sind. Einen Warenkorb sucht man oben rechts in der Navigation. Es ist nicht logisch, diesen plötzlich oben links zu platzieren.
An die Arbeit
- Die Kategorien, die du festgelegt hast, platzierst du im Design (bestimme auch die Navigation des mobilen Menüs und gib diese an das Support-Team weiter).
- Begrenze die Anzahl der Menüpunkte in der Hauptnavigation auf etwa 7 Punkte (plus/minus zwei).
- Stelle sicher, dass die Navigation nicht zu viel Bildschirmplatz in der Höhe einnimmt.
- Verwende für die Menüpunkte Wörter und Begriffe, die der Besucher versteht.
- Verwende eine gut lesbare Schriftart.
- Die Hauptnavigation und der Footer werden im gesamten Shop gleich sein.
Footer
Ein weiterer wichtiger Ort auf der Website ist der Footer. Er befindet sich (genau wie die Hauptnavigation) auf jeder Seite des Webshops. Es ist vielleicht nicht der Ort mit dem beeindruckendsten Inhalt oder für das schönste Design, aber es ist ein Ort, an dem Nutzer oft nach Informationen suchen. Es ist also wichtig, dass dieser Bereich nicht vernachlässigt wird.
- Platz für USPs, Logos von Zahlungsmethoden oder Social-Media-Kanäle
- Die wichtigsten Seiten-Links, Kategorien, Öffnungszeiten des Kundenservice
- Eventuell Basisdaten des Webshops.
- Datenschutzerklärung
Footer-Elemente
An die Arbeit
- Halte das Design einfach
- Gehe bewusst mit Kontrast und Lesbarkeit um
- Wähle die Schriftgröße nicht zu klein
- Überlade ihn nicht mit grafischen Elementen
- Optional: Zeige die akzeptierten Zahlungsmethoden an
- Optional: Zeige die relevanten Social-Media-Kanäle an
- Links zu den Unternehmensdaten (Kontakt, Über uns)
- Optional: Nimm die Basis-Kontaktinformationen auf
- Organisiere den Inhalt auf logische Weise
- Sorge für den Erhalt der Hierarchie
- Nimm den Copyright-Hinweis auf
Homepage-Content
Du bist frei in der Wahl des Contents, den du auf der Homepage platzierst. Es ist jedoch ratsam, Klarheit darüber zu schaffen, was man bei dir kaufen kann. Zum Beispiel mit Blöcken, die die wichtigsten Kategorien zeigen. Vielleicht möchtest du auch Kundenerfahrungen zeigen. Einige Webshops entscheiden sich für visuelle Wirkung mit einem Hero-Image.
7.1 Hero-Image
Ein Hero-Image ist das (große) Eröffnungsbild auf einer Homepage. Mit einem guten Hero-Image kannst du visuell und textlich Eindruck beim Besucher hinterlassen. Das ist schön, aber nicht immer funktional. Ein solch großes, überwältigendes Bild kann nämlich auch für Unklarheit beim Besucher sorgen. Was soll ich tun? Wo soll ich klicken?
Beispiele Hero-Image
An die Arbeit
Wenn du dich für ein Hero-Image entscheidest, berücksichtige die folgenden Punkte:
- Verwende ein Bild mit „Wow-Effekt“
- Mache das Bild funktional und zeige, was hier verkauft wird
- Mache im Text deutlich (und lesbar), was der Besucher im Shop bekommen kann
- Sorge für einen auffälligen Aktionsbutton (Call-to-Action) mit einem klaren Text
- Text und Buttons, die über dem Bild liegen, müssen gut lesbar und sichtbar bleiben. Auch auf dem kleineren Bildschirm eines Tablets oder Smartphones!
- Sorge für ein Bild mit ausreichender Schärfe, aber einer geringen Dateigröße (ein „schweres“ Bild beeinflusst die Ladezeit und somit das Ranking bei Google).
Landingpage
Auf der Landingpage wird eine Übersicht von Karten/Designs präsentiert. Über der Übersicht ist nach eigenem Ermessen Platz für eine Überschrift, Text oder Kategorieblöcke. In der Breite hast du also noch 9 Spalten zur Verfügung (z. B. 3 Blöcke von jeweils 3 Spalten Breite).
8.1 Seitenmenü
Ganz links auf der Seite sind drei Spalten für das Seitenmenü und die Filter reserviert. Die Filter können auch über der Kartenübersicht angezeigt werden (horizontale Filterung). Dies kannst du im CMS einstellen.
8.2 Kartenübersicht
Die Anzahl der Karten, die pro Zeile angezeigt werden, ist frei wählbar. Am gebräuchlichsten sind vier Karten pro Zeile. Wenn du mehr Karten pro Zeile anzeigst, werden diese für den Besucher eigentlich zu klein, um sie gut beurteilen zu können.
8.3 Labels
Designs können mit Labels versehen werden. Denke hierbei an die Erwähnung einer speziellen Veredelung wie „Goldfolie“ oder „mit Holzherz“. Das Design und die Position dieser Labels darfst du selbst bestimmen.
8.4 Filter
Die Filter sind in Schriftart, Größe, Zeichen- und Zeilenabstand anpassbar. Weiterhin wird die Anzeige durch die Einstellungen in den Widgets (im CMS) bestimmt.
Landingpage-Template
Produktdetailseite
Auf der Produktdetailseite finden die Besucher detaillierte Informationen zur Karte. Die Vorschaubilder (Previews) des Designs werden automatisch vom System generiert.
9.1 Thumbs
Die Thumbs sind die kleinen Ansichten unter der Vorschau der Karte. Diese sind anklickbar, sodass der Besucher mehrere Ansichten der Karte betrachten kann. Du kannst wählen, ob die Thumbs unter der Karte oder links von der Karte angezeigt werden.
9.2 Corporate Design
Stelle sicher, dass du auch auf dieser Seite dein Corporate Design beibehältst. Versuche hier so wenig wie möglich davon abzuweichen, um ein konsistentes Erlebnis zu bieten.
Produktdetailseiten-Template
Das Design ist fertig!
- Teile die Quelldatei mit deinem Sparkles-Ansprechpartner.
- Du erhältst Feedback und Beratung im Bereich Webdesign und Benutzerfreundlichkeit.
- Arbeite das Feedback und die Ratschläge in dein Design ein.
- Entwirf eine Übersichtsseite (Beispiel) und eine Produktdetailseite (Beispiel) in deinem (Haus-)Stil.
- Das Design ist fertig. Teile die (Quell-)Dateien mit deinem Ansprechpartner.
- Der Bau des Shops wird eingeplant.
Gut zu wissen!
Im Web werden Überschriften verwendet. Diese Überschriften dienen einem Zweck. Sie sind dazu da, deinem Leser zu helfen zu verstehen, was er auf der Seite liest. Worum geht es auf dieser Seite? Was steht in dem Absatz? Möchte ich diesen Absatz lesen oder nicht? Headings sorgen für Übersicht und eine klare Struktur auf Webseiten. Dadurch können Besucher Seiten schnell scannen und es hilft Suchmaschinen, die Struktur und das Thema der Seite zu verstehen.
Beim Entwerfen der verschiedenen Seiten nutzt du also diese Überschriften (Headings). Vergleiche die erste Überschrift mit dem Titel eines Buches. Das ist die wichtigste Überschrift und somit auch die größte: die H1. Die zweite Überschrift steht in der Hierarchie tiefer und ist logischerweise die H2. Vergleiche dies mit den Kapiteln deines Buches. Diese zweite Überschrift darfst du öfter verwenden. Schließlich gibt es mehrere Kapitel in einem Buch. Die Unterüberschriften H3 bis H6 kannst du als Zwischenüberschriften über Absätzen in einem Buch sehen. Du kannst problemlos ein paar H3s unter einer H2 haben. Und darunter eventuell sogar noch H4s. Ganz so, wie du es für passend hältst.
- Bestimme den Stil der Buttons: Abgerundete Ecken machen einen Button freundlicher. Gerade Ecken wirken eher sachlich. Wähle einen Button-Stil, der zu deinem Shop passt.
- Verwende dieselbe auffällige Farbe für die wichtigsten Buttons: Indem du auf der gesamten Website konsistent im Aussehen und in der Farbe der wichtigsten Buttons (Call-to-Action-Buttons) bleibst, wird die Konsistenz gestärkt und Verwirrung beim Nutzer vermieden.
- Verwende klare Texte im Button: Der Text in einem Button muss eindeutig sein und darf vor allem keine Verwirrung beim Besucher stiften.
Nutzer (und Google) lieben schnelle Websites. Eine hohe Website-Geschwindigkeit sorgt nicht nur für eine bessere Benutzererfahrung, sie hat auch noch einen positiven Einfluss auf deine Sichtbarkeit bei Google.
Bei Sparkles wird täglich daran gearbeitet, die Shops besser und schneller zu machen, aber du hast als Shopbetreiber auch selbst Einfluss auf die Ladezeit deiner Seiten. Die Bilder, die du in deinem Shop platzierst, können nämlich einen großen Einfluss auf die Geschwindigkeit deiner Seiten haben. Das merkst du vielleicht nicht so deutlich mit einem schnellen Laptop und einer Glasfaserverbindung, aber auf einem Smartphone oder einem veralteten Laptop kann es durchaus spürbar werden. Sorge daher immer dafür, dass du Bilder „komprimierst“. Das ist eine Technik, mit der Bilder ohne merklichen Qualitätsverlust kleiner gemacht werden. So wird deine Seite schneller, während das richtige Erscheinungsbild erhalten bleibt.
Kompressions-Tool
Ein gutes (Online-)Kompressions-Tool ist tinyjpg.com/. Platzierst du ein neues Bild? Dann jage es immer kurz durch dieses Tool!
Beispiel für den Gewinn, den ein komprimiertes Bild bringen kann
