Als shophouder ben je eigenaar van je eigen kaartenwinkel! De webshop wordt de etalage van je winkel en het is dus belangrijk om deze in je eigen stijl op te maken. Voor het goed functioneren van je webshop is het noodzakelijk dat je een ontwerp aanlevert voor desktop en mobiel. Als je alleen een desktop versie aanlevert, wordt door ons naar eigen inzicht een mobiele versie gemaakt.
De mobiele en tablet versie zijn een afgeleide van de desktop versie. Hier gebruik je dezelfde content. Je kan er wel voor kiezen om specifieke onderdelen of elementen weg te laten op mobiel. Doe dit alleen als het de gebruikerservaring ten goede komt.
Start in Adobe Creative Suite: Maak het ontwerp voor jouw shop in een programma uit de Adobe Creative Suite (Photoshop, Illustrator, InDesign) zodat wij ook met jouw bronbestand(en) kunnen werken.
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.
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.
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 templates vind je onderaan de pagina:
- Homepage
- Landingspagina
- Styleguide
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
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
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.
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 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
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).
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
Product detailpagina
Op de productdetailpagina vinden de bezoekers gedetailleerde informatie over de kaart. De voorbeelden (previews) van het ontwerp worden automatisch gegenereerd door het systeem.
9.1 Thumbs
De thumbs zijn de kleine weergaven onder de preview van de kaart. Deze zijn klikbaar zodat de bezoeker meerdere views van de kaart kan bekijken. Je kunt ervoor kiezen om de thumbs onder de kaart of links van de kaart te tonen.
9.2 Huisstijl
Zorg ervoor dat je ook op deze pagina je huisstijl doorvoert. Probeer hier zo min mogelijk van af te wijken voor een consistente ervaring.
Product detailpagina template
Het ontwerp is klaar!
- Deel het bronbestand met jouw Sparkles contactpersoon.
- Je ontvangt feedback en advies op het gebied van webdesign en gebruiksvriendelijkheid.
- Verwerk de feedback en adviezen in jouw ontwerp.
- Ontwerp een overzichtspagina (voorbeeld) en een productdetailpagina (voorbeeld) in jouw (huis)stijl.
- Het ontwerp is gereed. Deel de (bron)bestanden met jouw contactpersoon.
- Het bouwen van de shop wordt ingepland.
Handig om te weten!
Op het web wordt gebruik gemaakt van koppen. Die koppen dienen een doel. Ze zijn er om je lezer te helpen begrijpen wat ze op de pagina lezen. Waarover gaat deze pagina? Wat staat er in de alinea? Wil ik die alinea lezen of niet? Headings zorgen voor overzicht en een duidelijke structuur op webpagina’s. Hierdoor kunnen bezoekers pagina’s snel scannen én het helpt zoekmachines de structuur en het onderwerp van de pagina te begrijpen.
Bij het ontwerpen van de verschillende pagina’s maak je dus gebruik van deze koppen (headings). Vergelijk de eerste kop met de titel van een boek. Dat is de belangrijkste kop en dus ook de grootste: de H1. De tweede kop staat lager in de hiërarchie en is logischerwijs de H2. Vergelijk dit met de hoofdstukken van je boek. Die tweede koptekst mag je vaker gebruiken. Er zijn per slot van rekening meerdere hoofdstukken in een boek. De subkoppen H3 t/m H6 kun je zien als kopjes boven alinea’s in een boek. Je kunt met gemak een paar H3’s onder een H2 hebben. En daaronder eventueel zelfs nog H4’s. Net wat jij passend vindt.
- Bepaal de stijl van de buttons: Ronde hoeken maken een button vriendelijker. Strakke hoeken juist zakelijker. Kies een knop stijl die past bij jouw shop.
- Gebruik dezelfde opvallende kleur voor de belangrijkste buttons: Door over de gehele website consistent te zijn in de uitstraling en kleur van de belangrijkste buttons (call-to-action buttons), wordt de consistentie versterkt en voorkom je verwarring bij de gebruiker.
- Gebruik duidelijke teksten in de button: De tekst in een knop moet eenduidig zijn en vooral geen verwarring geven bij de bezoeker.
Gebruikers (en Google) houden van snelle websites. Een hoge sitesnelheid zorgt niet alleen voor een betere gebruikerservaring, het heeft ook nog eens een positieve invloed op je zichtbaarheid in Google.
Bij Sparkles wordt dagelijks gewerkt aan het beter en sneller maken van de shops, maar je hebt zelf als shophouder ook invloed op de laadtijd van je pagina’s. De afbeeldingen die je in je shop plaatst kunnen namelijk grote invloed hebben op de snelheid van je pagina’s. Dat merk je misschien niet zo duidelijk met een snelle laptop en een glasvezelverbinding, maar op een mobiel of een verouderde laptop kan het wel degelijk merkbaar worden. Zorg er daarom altijd voor dat je afbeeldingen ‘comprimeert’. Dat is een techniek waarmee afbeeldingen zonder merkbaar kwaliteitsverlies kleiner worden gemaakt. Zo wordt je pagina sneller mét behoud van de juiste uitstraling.
Compressie tool
Een goede (online) compressietool is tinyjpg.com/. Plaats je een nieuwe afbeelding? Haal hem dan altijd even door deze tool!
Voorbeeld van de winst die een gecomprimeerde afbeelding kan opleveren
