Ontwerpen shop: Voor (aankomende) shophouders

1. Het design van de webshop

Een goed design is prikkelend, houdt de aandacht vast en nodigt de bezoeker uit om in actie komen. Soms zit ‘m dat in de kleine details, zoals de vorm van een knop of de lettergrootte van een tekst. De stijl moet hoe dan ook passen bij wat je als bedrijf wilt uitstralen. Toeters en bellen zijn lang niet altijd nodig voor een succesvol design.

De gebruikerservaring speelt zich wat meer op de achtergrond af en draait vooral om functionaliteit en structuur. Wat wil de bezoeker weten of wat wil de bezoeker doen? Het is verstandig om aandacht te besteden aan de manier waarop je de informatie ordent. Presenteer de informatie zoveel mogelijk in duidelijke stukken.

1.1 Voorbeelden ter inspiratie

Hieronder enkele voorbeelden van shops ter inspiratie. Bekijk deze shops eens op desktop en mobiel. Mobiel heeft een andere beleving en interactie. Houd daar in jouw ontwerp straks ook rekening mee.

• www.prettyorange.nl
• www.blijkaartje.nl
• www.jakima.nl
• www.lovz.nl
• www.studiopie.nl
• www.studiopien.nl
• www.buroleo.nl
• www.zomooikaartjes.nl

2. Richtlijnen voor het ontwerp

2.1 Een eigen (huis)stijl

Start met het ontwerp van de homepage op desktop en mobiel en werk hierbij met een duidelijke huisstijl. De huisstijl wordt bepaald door logo, fonts, kleuren, afbeeldingen, iconen, compositie, etc. Binnen het Photoshop template wordt ook een stylesheet voor de huisstijl aangeboden. Maak deze stylesheet compleet met een kleurenpalet, de fonts en de buttons die jij gaat gebruiken. Dit vormt de basis voor jouw webshop. Pas de huisstijl zo consequent mogelijk toe op de pagina’s die je vervolgens gaat ontwerpen. Dat zorgt voor consistentie en herkenbaarheid.

Tips:

• Het logo: Ontwerp je logo (of laat het ontwerpen) en plaats deze in de stylesheet. Zo kun je het kleurenpalet en de lettertypes beter op elkaar afstemmen.
• Kies het kleurenpalet: Beperk het aantal kleuren van de huisstijl. Houd hierbij ook rekening met contrast wanneer het gaat om (lichte of donkere) tekst op een kleur.
• Kies de lettertypes: Gebruik maximaal twee (Google) fonts.
• Bepaal de headings en bodytekst: Maak het overzicht van koppen en bodytekst compleet. Ben je niet bekend met de werking van headings en bodytekst? Geen probleem! Dit wordt hier uitgelegd.
• Geef stijl aan de buttons: Door het gebruik van herkenbare knoppen zal de bezoeker zich snel thuis voelen en snappen welke acties het belangrijkst zijn op de pagina. Een knop kan zijn eigen karakter krijgen door te spelen met de ronding van de hoeken, de kleur en de typografie.
• Maak duidelijke keuzes in vormgebruik zoals hoekig of rond. Hier kun je meer lezen over het stylen van knoppen.
• Wees consistent, dat zorgt voor een duidelijke stijl.

Voorbeeld van een styleguide met keuzes voor kleuren en fonts.

2.2 Lettertype kiezen

Wees spaarzaam met het gebruik van verschillende fonts. Vaak is één font voor de koppen (headings) en één font voor de teksten (paragraaf) al voldoende. Maak voor de fonts gebruik van Google webfonts. Deze fonts zijn zowel online als offline vrij te downloaden en te gebruiken!

Lettertype kiezen

2.3 Leesbaarheid

Gebruik voor de body text (ook wel: leestekst) een minimale font grootte van 14 -16px voor een goede leesbaarheid. De titels en koppen mogen uiteraard groter worden.

Tip

Speel met font, tekstgrootte en letterafstand. Teksten in kapitalen (hoofdletters) ogen mooi en chique maar kunnen ook moeilijker leesbaar zijn.

Voorbeeld van een overzicht voor font gebruik waarbij rekening is gehouden met verschillende headers/titels en het gebruik op desktop en mobiel.

3. Desktop en mobiel

Start in jouw ontwerpprogramma met een breedte van 1200px voor desktop en 414px voor mobiel. Hoe lang de pagina wordt hangt af van de hoeveelheid content die jij erin plaatst.

Mobiel en dekstop ontwerp

3.1 Photoshop template

Werken met het grid: Bootstrap

In het Photoshop template van de shop wordt een grid lay-out gebruikt (het veelgebruikte Bootstrap grid). Dit grid maakt gebruik van een indeling in 12 kolommen. Dat maakt het gemakkelijker om nauwkeurig afstanden te bepalen en zo de afzonderlijke elementen op de website te positioneren op desktop, mobiele telefoons of andere beeldschermen.
Link naar het PSD tamplate: https://drive.google.com/file/d/1JHrdD-f2hauLU_vmRsJKiLkC62FhRhLQ/view?usp=share_link

Meer weten over Bootstrap? https://getbootstrap.com/docs/4.4/layout/grid/

Rijen en kolommen

Bij de opbouw van de pagina maak je gebruik van (horizontale) rijen. Elke rij voorzie je van een kolom verdeling. Bijvoorbeeld: 2 x 6 kolommen, 3 x 4 kolommen, 4 x 3 kolommen, etc. Zo ontstaan rijen met blokken die je kunt vullen met tekst, beeld, buttons, etc. Afhankelijk van wat je wilt tonen, maak je gebruik van een specifieke indeling van een rij.

Opmerking

Het aangeleverde PSD-template toont wat je kan doen met de indeling, niet wat je moet doen! Je hoeft dus niet alle blokken in het template te vullen. Je maakt gebruik van de indelingen die voor jou werken.

PSD-template

Voorbeelden

Het tonen van categorieën (Hippe-Geboortekaartjes) - 4 x 3 kolommen:

Voorbeeld hippe-geboortekaartjes.nl

Het tonen van een swiper met klantervaringen (MyCards) - 12 kolommen breed:

Voorbeeld mycards.nl

Het tonen van extra producten en diensten (Made For Moments) - 3 x 4 kolommen:

Voorbeeld madeformoments.nl

4. De vaste elementen

De header bevat de volgende elementen:

• Optionele Ruimte voor ‘unique selling points’ (usp’s), zoals een telefoonnummer, beloftes of sterren-rating
• Info, inloggen en winkelmandje
• Logo van de webshop: Het logo kan links of gecentreerd staan
• Hoofdnavigatie met menu items
• Zoekfunctie

Opmerking

Behoud in de header/navigatie de positie van inloggen, winkelmandje en zoeken

Variaties header

In de template kun je op de homepage kiezen uit 3 variaties voor de header.

• Header met gesloten zoekfunctie
• Header met open zoekfunctie
• Header met logo en items gecentreerd

Vaste elementen: verschillende lay-outs

Opmerking

Wanneer je kiest voor een gecentreerd logo komen de menu items onder het logo te staan. De header eist dan meer ruimte in de hoogte op waardoor de pagina verder naar beneden wordt gedrukt.

voorbeeld 1: blijkaartje.nl

Voorbeeld 2: zomooikaartjes.nl

5. Navigatie

De homepage is in veel gevallen niet het startpunt voor de bezoeker. Die komt vaak via een zoekopdracht of een advertentie (Google) op een landingspagina of product detailpagina. De homepage is echter wel een goed startpunt voor het uitwerken van de huisstijl. Maar staar je er niet blind op.

De hoofdnavigatie van een website moet een eerste bezoeker in staat stellen af te leiden wat het bedrijf doet, wat het aanbiedt en welk type inhoud beschikbaar is. Dit is dé plek om mensen (en zoekmachines) te vertellen wat je doet. De navigatie bevat uiteraard meer elementen. Wijk daarin niet af van de standaard en van wat bezoekers gewend zijn. Een winkelmandje zoek je rechts bovenaan in de navigatie. Het is niet logisch om die opeens links bovenaan te plaatsen.

Aan de slag

• De categorieën die je hebt vastgesteld plaats je in het ontwerp (bepaal ook de navigatie van het mobiele menu en geef deze door aan het support team)
• Beperk het aantal menu items in de hoofdnavigatie tot 7 items (plus of min twee).
• Zorg ervoor dat de navigatie niet te veel schermruimte in de hoogte inneemt.
• Gebruik voor de menu items woorden en termen die de bezoeker begrijpt.
• Gebruik een goed leesbaar font.
• De hoofdnavigatie en de footer zullen over de gehele shop hetzelfde zijn.

6. Footer

Een andere belangrijke locatie op de website is de footer. Het staat (net als de hoofdnavigatie) op elke pagina van de webshop. Het is misschien niet de plek met de meest indrukwekkende inhoud of voor het mooiste ontwerp, maar het is wel een plek waar gebruikers vaak naar informatie zoeken. Het is dus van belang dat dit niet wordt verwaarloosd.

• Ruimte voor een usp’s, logo’s van betaalmethoden of social media kanalen
• De belangrijkste pagina links, categorieën, openingstijden klantenservice
• Eventueel basisgegevens van de webshop.
• Privacy statement

Footer elementen

Aan de slag

• Houd het ontwerp eenvoudig
• Ga bewust om met contrast en leesbaarheid
• Maak de tekstgrootte niet te klein
• Maak het niet te vol met grafische elementen
• Optioneel: toon de geaccepteerde betaalmethoden
• Optioneel: toon de relevante social media kanalen
• Links naar de bedrijfsgegevens (contact, over ons)
• Optioneel: neem de basis contactinformatie op
• Organiseer de inhoud op een logische manier
• Zorg voor behoud van hiërarchie
• Neem de copyright kennisgeving op

7. Homepage content

Je bent vrij in de content die je op de homepage plaatst. Het is echter wel aan te raden om duidelijkheid te geven in wat men bij jou kan kopen. Bijvoorbeeld met blokken die de belangrijkste categorieën tonen. Misschien wil je juist de klantervaringen tonen. Sommige webshops kiezen voor visuele impact met een hero-image.

7.1 Hero-image

Een hero-image is de (grote) openingsafbeelding op een homepage. Met een goede hero-image kun je visueel en tekstueel impact maken op de bezoeker. Dat is mooi maar niet altijd even functioneel. Zo’n grote, overweldigende afbeelding kan namelijk ook zorgen voor de nodige onduidelijkheid bij de bezoeker. Wat moet ik doen? Waar moet ik klikken?

Voorbeelden hero-image

Aan de slag

Kies je voor een hero-image, houdt dan rekening met de volgende zaken:

• Gebruik een beeld met ‘wow-factor’
• Maak het beeld functioneel en laat zien wat hier wordt verkocht
• Maak in tekst duidelijk (en leesbaar) wat de bezoeker in de shop kan krijgen
• Zorg voor een opvallende actieknop (call-to-action) met een duidelijke tekst
• Tekst en buttons die over de afbeelding liggen, moeten goed leesbaar en zichtbaar blijven. Ook op het kleinere scherm van een tablet en mobiel!
• Zorg voor een afbeelding met voldoende scherpte maar een kleine bestandsgrootte (een ‘zware’ afbeelding heeft invloed op de laadtijd en dus op de rankings in Google).

8. Landingspagina

Op de landingspagina wordt een overzicht van kaarten/ontwerpen gepresenteerd. Boven het overzicht is naar eigen inzicht ruimte voor een kop, tekst of categorie blokken. In de breedte heb je dus nog 9 kolommen over om te vullen (bijv. 3 blokken van ieder 3 kolommen breed).

8.1 Sidebarmenu

Uiterst links op de pagina zijn drie kolommen gereserveerd voor het sidebarmenu en de filters. De filters kunnen ook boven het kaartenoverzicht worden vertoond (horizontale filtering). Dit kun je in het cms instellen.

8.2 Kaartenoverzicht

Het aantal kaarten dat per rij wordt getoond, is vrij kiesbaar. Het meest gebruikelijk is vier kaarten per rij. Wanneer je meer kaarten per rij gaat tonen, worden deze eigenlijk te klein voor de bezoeker om goed te kunnen beoordelen.

8.3 Labels

Ontwerpen kunnen worden voorzien van labels. Denk hierbij aan het vermelden van een speciale afwerking zoals ‘goudfolie’ of ‘met houten hartje’. Het ontwerp en de positie van deze labels mag je zelf bepalen.

8.4 Filters

De filters zijn aanpasbaar in lettertype, grootte, letter- en regelafstand. Verder wordt de weergave bepaald door de instellingen in de widgets (in het cms).

Landingspagina template