Aan de slag met: je visuele identiteit

De vormgeving van je webwinkel kun je vergelijken met een etalage van een fysieke winkel. Wat je etaleert, spreekt een bepaalde doelgroep aan. Blink je uit met een professionele vormgeving? Dan weet je op te vallen en jezelf te onderscheiden tussen de vele webwinkels en kom je betrouwbaar over.

Voordat je met het ontwerp en de indeling aan de slag gaat, is het belangrijk om een huisstijl als basis te hebben. Je huisstijl vormt een groot onderdeel van de visuele identiteit van je bedrijf. Bovendien is het belangrijk dat je huisstijl een verhaal vertelt of zelfs een gevoel naar boven haalt. Dit is onder andere te beïnvloeden door het kleurgebruik in je webwinkel. Door de juiste kleuren in te stellen. laat je zien waar je voor staat, zodat mensen het gaan herkennen en onthouden. Je logo en het gebruik van lettertypes spelen hierin tevens een belangrijke rol. Voer dit daarom ook door in alle communicatie richting klanten, zoals in je nieuwsbrieven, op visitekaartjes, op facturen en zelfs op je verpakkingen. Denk bij huisstijl ook aan de naam, iconen, stijl en vorm van foto’s.

Bij Instellingen / Vormgeving / Template instellingen vind je alle mogelijkheden om jouw huisstijl door te voeren in je shop. De template instellingen zijn onderverdeeld in diverse tabbladen. 

• Lettertype en -grootte: Bepaal hier welk font je wilt gebruiken voor alle koppen in je shop. Denk aan paginanamen, artikelnamen en kopjes in de indeling. Hier vind je de opties voor de lettergrootte van je koppen. Probeer gerust wat opties uit om uit te vinden welke het best bij jouw opmaak past.

• Tekstkleur: Of je hier dezelfde kleur gebruikt als bij gewone teksten bepaal je natuurlijk helemaal zelf.

• Lettertype en -grootte: Kies hier uit een flinke collectie (Google)fonts. Dit font wordt gebruikt voor alle ‘normale teksten’ zoals artikel- en paginaomschrijvingen. Stel hier in hoe groot de letters standaard moeten worden.

• Tekstkleur: En uiteraard welke kleur ze moeten krijgen.

• Tekstkleur hyperlinks: Eventuele links in je tekst geef je hiermee een accentuerende kleur.

• Hoverkleur hyperlinks: De kleur van je links, wanneer je deze met je muis aanwijst. (Tip: don't go crazy! De automatische optie is eigenlijk de beste optie).

• Kleur koopknop: Kies voor deze knop een kleur waarop je klanten graag willen klikken en die complementair is aan de hoofdkleur van je shop.

• Tekstkleur koopknop: Kies hier een kleur die goed afsteekt en voldoende contrast biedt tegen de achtergrondkleur van de koopknop.

• Kleur algemene knoppen: Kies hier een kleur die je graag op algemene knoppen hebt, zoals de filterknop, overzichts-knop, account aanmaken-knop en de knoppen om je aan te melden voor de nieuwsbrief.

• Kleur niet beschikbare knop: Kies hier de kleur voor een knop waar je klant niet op kan klikken.

• Tekstkleur algemene knoppen: Zorg hier weer voor voldoende contrast tussen de achtergrondkleur en de tekstkleur, zodat het goed leesbaar is.

• Afgeronde hoeken: Zorg voor minder scherpe hoeken met deze instelling.

• Favicon: Upload hier een logo of icoon van 16x16 pixels. Deze wordt getoond in het tabblad van de internetbrowser. Is je logo te ingewikkeld voor zo’n ieniemienie plaatje? Kies dan liever voor een detail uit je logo (zoals de eerste letter)

• Browserinterface: Ondersteunende browsers zullen deze kleur gebruiken voor de browserinterface.

• Achtergrondafbeelding: Upload hier je achtergrondafbeelding. Klik op het tandwielicoontje om te bepalen hoe deze getoond wordt (bijvoorbeeld herhaald of gecentreerd).

• Achtergrondkleur pagina: Liever geen afbeelding of gebruik je een afbeelding die niet helemaal doorloopt? Stel dan hier de achtergrondkleur in.

• Achtergrondkleur middenkolom: Je kan ervoor kiezen om het middelste gedeelte van je pagina een (andere) kleur te geven.

• Witruimte rond de pagina inhoud: Als tekst tegen een rand aan staat leest dat niet zo lekker, daarom staat de witruimte automatisch ingesteld op 25 pixels. Plaats je afbeeldingen in de paginainhoud? Dan wil je misschien wel alle 1100 pixels gebruiken. Vul hier dan 0 in.

• Achtergrondkleur: Deze kleur kan kort zichtbaar zijn tussen de afbeeldingen door. Gebruik dus een neutrale kleur.

• Actieve navigatie: De slideshow heeft bladerknopjes bij meerdere afbeeldingen. Kies hier een kleur voor de actieve-knop die op de slideshow getoond worden.

• Inactieve navigatie: Kies hier een kleur voor de inactieve-knop(jes) die op de slideshow getoond worden.

• Ondersteunende kleur: De ondersteunende kleur wordt gebruikt bij scheidingslijnen en als achtergrond van artikelopties. Kies hier een neutrale kleur die past binnen je palet.

• Achtergrondkleur: Bepaal hier de achtergrondkleur van de dunne balk boven je headerafbeelding.

• Tekstkleur: Bepaal hier de tekstkleur van de dunne balk boven je headerafbeelding.

• Paginabreedte: Kies hier of je balk over de volledige breedte moet doorlopen of juist niet.

• Uitlijning elementen: De elementen in je balk kunnen in het midden (gecentreerd) of aan de buitenzijden worden gezet (1 links en 2 rechts).

• Headerafbeelding: Deze achtergrond van max. 2200 x 400 pixels wordt achter je logo getoond. Wil je een kleur of patroon als achtergrond? Dan mag je deze natuurlijk ook weglaten.

• Achtergrondkleur: Stel hier een achtergrondkleur in voor je header

• Tekstkleur: Deze tekstkleur gebruiken we voor je winkelnaam, indien er geen logoafbeelding is geüpload.

• Logo: Upload hier je bestaande logo, of maak een nieuwe via de Logomaker. Het bestand mag maximaal 1100 pixels breed zijn en maximaal 400 pixels hoog.

• Uitlijning: Kies hier of je het logo links, in het midden, of rechts wilt tonen.

• Achtergrondafbeelding: Wil je een afbeelding, patroon of kleur achter je subbalk tonen? Upload hier dan een afbeelding van maximaal 50 pixels hoog.

• Achtergrondkleur: Bepaal hier de achtergrondkleur van de dunne balk onder je headerafbeelding

• Tekstkleur: Bepaal hier de tekstkleur van de dunne balk onder je headerafbeelding

• Breedte: Stel hier in of je de subbalk over de volledige breedte van het scherm wilt tonen, of net zo groot als je pagina inhoud.

• Uitlijning elementen: De elementen in je balk kunnen in het midden (gecentreerd) of aan de buitenzijden worden gezet (1 links en 1 rechts).

• Lettertype en -grootte: Bepaal hier het lettertype- en grootte van de pagina’s in het navigatiemenu. Automatisch gebruiken we hier de grootte die je koos voor normale teksten. Aanpassen kan door een andere waarde te kiezen.

• Standaard tekstopmaak: Bepaal hier of je alle pagina’s in het menu zonder opmaak of onderstreept en/of schuingedrukt wilt tonen. Je kunt van deze instelling per pagina afwijken door in het submenu bij Paginaoverzicht voor ‘Menustijl’ te kiezen.

• Achtergrondkleur menu item: Hier kun je de achtergrond van een menu item een kleur geven.

• Tekstkleur menu item: Bepaal hier de kleur van de pagina’s in het navigatiemenu.

• Achtergrondkleur actief menu item: Dit is de achtergrondkleur van het menuitem van de actieve pagina en de pagina die je muis aanwijst.

• Tekstkleur actief menu item: De pagina die open staat (actief) en de pagina die je muis aanwijst krijgen deze tekstkleur

• Sticky navigatie balk: Zet je de knop aan dan blijft je navigatiebalk plakken (en dus zichtbaar) wanneer je bezoeker naar beneden scrollt op een pagina. Handig! Dit geldt alleen wanneer je navigatiemenu in een balk is geplaatst (niet in een kolom)

• Pijltjes bij subpagina’s: Als deze functie aan staat, wordt er een pijltje getoond bij elke hoofdpagina die één of meerdere subpagina’s heeft.

• Opsommingstekens: De afbeelding die je hier toevoegt (max. 16x16 pixels) wordt gebruikt bij opsommingen in plaats van de welbekende zwarte stip (alleen bij zijkolom navigatie).

• Weergeven vanaf: Bepaal hier of je de mobiele weergave alleen op kleine schermen (mobiel) wil laten zien of ook vanaf middelgrote schermen (tablet).

• Plaatsing knop: Bepaal hier waar de knop van het navigatiemenu komt te staan in de gekozen weergave.

• Titels van elementen: Bij het gebruik van kolommen in de indeling, zorgt deze functie voor een kopje boven elk element in die kolommen. Een titel, zoals ‘Nieuwsbrief’ verdwijnt dus, wanneer je deze slider uitzet.

• Achtergrondafbeelding: Je kan ervoor kiezen om een achtergrondafbeelding achter de titels van de elementen te plaatsen.

• Achtergrondkleur: Stel hier de achtergrondkleur in van bovengenoemde titels.

• Tekstkleur: Stel hier de tekstkleur in van de titels.

• Achtergrondkleur in zijkolommen: Stel hier de achtergrondkleur in van de elementen die je in de linker- of rechterkolom hebt geplaatst.

• Achtergrondkleur middenkolom: Stel hier de achtergrondkleur in van de middelste kolom, oftewel de pagina inhoud.

• Randkleur: Deze functie zorgt voor een rand om alle elementen, de pagina inhoud en de producten.

• Afgeronde hoeken: Hiermee zorg je voor minder scherpe hoeken van de verschillende elementen.

• Schaduw: Voeg met een druk op de knop schaduw toe aan de verschillende elementen.

• Achtergrondkleur: Wanneer je subpagina’s automatisch toont op home- en/of hoofdpagina’s, stel je daarvan de achtergrondkleur in.

• Tekstkleur: Stel hier de tekstkleur in van de getoonde subpagina’s.

• Lettergrootte productnaam in overzichten: Met deze instelling pas je de grootte van de namen in je artikeloverzichten aan.

• Lettergrootte productprijs: Mag de prijs wel wat extra in het oog springen? Pas dan hier de grootte aan.

• Kleur productprijs: De prijzen van je producten krijgen de kleur die je hier kiest.

• Kleur actieprijs: voor afgeprijsde producten kun je een afwijkende kleur invullen voor de actieprijs.

• Achtergrondkleur: Gebruik je stickerteksten bij artikelen of automatische stickers? Dan krijgen ze deze achtergrondkleur.

• Tekstkleur: Deze tekstkleur wordt gebruikt op de sticker(s).

• Automatische stickers: Schakel deze functie in om automatisch het kortingspercentage in de sticker te tonen bij producten met een actieprijs.

• Productafbeeldingen uitvullen: Als deze functie aan staat wordt de ruimte voor je productafbeelding en subpagina-afbeelding volledig gebruikt. Hoe dat precies uitpakt hangt af van het formaat van je foto’s. Uitproberen maar!

• Witruimte rond afbeeldingen: Standaard staat er geen witte rand om productafbeeldingen in je productoverzicht. Als je dat wel wilt, bepaal je hier hoe dik de rand wordt getoond.

• Achtergrondkleur: Deze achtergrondkleur wordt alleen gebruikt voor de footer. Deze vult de gehele breedte.

• Tekstkleur: Deze tekstkleur wordt gebruikt in de footer.

• Tekstkleur hyperlinks: Eventuele links in je footer geef je hiermee een afwijkende kleur.

• Hoverkleur hyperlinks: De kleur van je links in de footer, wanneer je deze met je muis aanwijst.

• Lettergrootte: Automatisch wordt hier de grootte gebruikt die is gekozen voor bodyteksten. Je kan hiervan afwijken.

• Lettergrootte koppen: Hier wordt de grootte gebruik die je koos voor kopteksten. Pas het aan door een andere waarde te kiezen.

Sfeerbeelden van je producten en je merk zorgen voor een beleving bij je klanten. Je kunt ervoor kiezen om dit beeldmateriaal zelf te maken. Zorg er dan wel voor dat dit op een professionele manier gebeurt. Professionele foto’s zijn namelijk cruciaal om het vertrouwen van je bezoekers te winnen.

Ben je zelf niet in de mogelijkheid om goed beeldmateriaal te maken, dan zijn er gelukkig ook andere manieren om dit op te lossen. Zo kun je bijvoorbeeld een fotograaf inhuren om sfeerbeelden te maken of beeldmateriaal zoeken op (de wat hippere) stockphoto websites.

De header is het bovenste deel van je shop. Het is gebruikelijk om hier je logo in te plaatsen. Het geeft vaak de eerste indruk van je shop. Omdat dit bepalend is, is het belangrijk om een goede header te maken.

Je kan ervoor kiezen om een achtergrondafbeelding te plaatsen. Let erop dat je de achtergrond van je webwinkel neutraal en rustig houdt en dat de achtergrond goed wordt weergegeven. De aandacht moet naar de inhoud gaan en niet naar de achtergrond.

Tip: Op zoek naar een rustige achtergrondafbeelding? Kijk dan eens op: https://www.toptal.com/designers/subtlepatterns/.

In de inhoud van een pagina kun je afbeeldingen plaatsen.​​ In sommige gevallen kan het handig zijn om afbeeldingen naast elkaar te plaatsen.

Een slideshow is een handige manier om aanbiedingen extra onder de aandacht te brengen of sfeerbeelden van je producten te tonen. Meestal worden er minimaal drie afbeeldingen gebruikt in een slider. Naast het uploaden van eigen slideshow afbeeldingen, kun je ook aanbiedingen, meest verkochte producten of geselecteerde producten tonen in je slideshow. Probeer ervoor te zorgen dat je verschillende foto’s gebruikt die bij elkaar passen, bijvoorbeeld door één stijl van fotograferen of kleurgebruik. Zo behoud je eenheid in je webwinkel.

Tip: Via de website www.fotor.com kan je gemakkelijk het formaat van je foto bepalen. Ga naar de website, klik op ‘edit’ en importeer je afbeelding via de knop 'import'. Klik vervolgens op ‘crop’ om de afmeting van de afbeelding aan te passen.

Een ander belangrijk onderdeel van de vormgeving van je webwinkel is je productpresentatie. Door je producten op een professionele en waarheidsgetrouwe manier te presenteren, verhoog je de kans op conversies en verminder je de kans op retouren. Het is bijvoorbeeld belangrijk dat de kleur van je product overeenkomt met de kleur in werkelijkheid. Het is gemakkelijk om productfoto’s zelf te maken met de juiste tips en tricks.

Het onderste stukje van je webwinkel is de footer. Het lijkt misschien een onbelangrijk deel, maar er kijken meer mensen naar de footer van je webshop dan je denkt! De voornaamste reden voor bezoekers om naar beneden te scrollen, is het zoeken van contactgegevens of informatie over voorwaarden, retouren, verzendkosten etc.

Hopelijk hebben bovenstaande tips je geholpen om een goed ontwerp voor je webwinkel te maken. Houd wel altijd in gedachten dat functie minstens even belangrijk is als ontwerp; zorg er dus wel voor dat je mooi vormgegeven webwinkel ook nog gebruiksvriendelijk is.

Wanneer je zelf niet zo thuis bent in beeldbewerking en grafisch ontwerp, kan het een optie zijn om hulp in te schakelen met betrekking tot de vormgeving van je shop