10 waardevolle tips voor een mooie, duidelijke en technisch goede website

Geplaatst op 18 februari 2021 in Webdesign, Webshop, WordPress

Grafische ontwerpers en designers houden zich bezig met het maken van originele webdesign ontwerpen voor websites. Een valkuil die kan voorkomen in dit werk is dat er te weinig aandacht is voor de commerciële doelstellingen van een website of webshop. En dat is helemaal normaal: het zijn creatievelingen en geen marketeers.

Bij Next Buzz combineren we deze twee expertisegebieden van design en functionaliteit samen. Wij zorgen voor een mooi en duidelijk ontwerp, waar ook vanuit marketing perspectief over nagedacht is. Bij een website is niet alleen het uiterlijk belangrijk, maar ook de conversie. In deze blog ga ik jullie 10 tips uit de praktijk geven voor een mooie, duidelijke en technisch goede website.

1. Lay-out

De lay-out van de website is het belangrijkste voor de structuur. Bij Next Buzz werken we vaak met een 12 kolommen systeem. Doordat we gebruik maken van een 12 kolommen systeem kunnen we ook goed rekening houden met het mobiele en tablet design.

2. Gebruik voldoende witruimte

Witruimte? Waarom zou je witruimte gebruiken in een donkere website? Of in een website met kleuren als achtergrond? De term “witruimte” wordt gebruikt voor de ruimte tussen de elementen. Dit is bijvoorbeeld de ruimte tussen de kop en de bodytekst. Hier moet een bepaalde “witruimte” tussen zitten om een bepaalde rust uit te stralen.  Als dit niet wordt toegepast, staan teksten of het beeldmateriaal te dicht op elkaar en kan het voor de lezer lastig worden om de website te begrijpen. Hierdoor is het belang van witruimte erg essentieel.

3. Zorg voor een duidelijke hiërarchie

We lezen op natuurlijke wijze van links naar rechts (Azië uitgezonderd). Dit geldt logischerwijs ook zo op een website. Naast deze manier lezen we ook in een “F-structuur”.
Een F-structuur werkt als volgt: we beginnen links boven waar vaak het logo staat van de website. Dit is ook de belangrijkste plek van je website. Dan gaan we door naar rechts, hier staat je menunavigatie. Je menu navigatie is, na je logo, het belangrijkste op je website.

Naast je menu navigatie kunnen verschillende elementen staan, afgestemd op de soort website. Zo staat er vaak bij een webshop een icoontje voor je account en een winkelmandje. Bij een bedrijf met een dienst kan daar een CTA-button staan (CTA; zie punt 10) om bijvoorbeeld een offerte aan te vragen. Vaak staat er ook een vergrootglaasje op de website, wie kent het niet?  Iedereen weet tegenwoordig dat het vergrootglaasje staat voor het zoeken naar iets.Daarna gaan we door naar de header. Hier wil je iets in hebben wat zeer veelzeggend is over jouw bedrijf. Wanneer je een bepaalde dienst aanbiedt, is een foto van zo’n dienst heel belangrijk om het te visualiseren. In die header gebruiken we dan een CTA. We gebruiken daar een CTA om een dienst te verkopen. Is jou dienst bijvoorbeeld het beletteren van auto’s kan je gebruik maken van: Toe aan een nieuwe stijl op uw auto? Is uw belettering verkleurd? Vraag nu direct een offerte aan en zie wat wij voor u kunnen betekenen. Klik hier. 

Onder je header is het belangrijk om je USP’s (Unique Selling Point) te benoemen. Mensen vinden USP’s belangrijk om te weten waar een bedrijf zich in onderscheidt ten opzichte van de concurrentie. Heb je meer dan 10 jaar ervaring? Gebruik je duurzame materialen? Zet dit in je USP’s. Dit kan voor een bezoeker een extra stimulans geven om iets te kopen bij jouw bedrijf.
Na je USP’s kan je beginnen met de content. Dit kan gaan over de producten/diensten van het bedrijf, maar ook een introductie van het bedrijf. Is dit belangrijk voor elke pagina? Het antwoord daarop is nee.
Deze hiërarchie is belangrijk voor de homepage, maar ook voor landingspagina’s die je gebruikt voor bijvoorbeeld online marketing. Meer weten over de aanpak van online marketing? Lees het artikel van mijn collega Iris hier. 

4. Maak goed gebruik van de huisstijl

Het goed gebruiken van de huisstijl is erg belangrijk voor herkenning van de website. Het is namelijk verwarrend voor de bezoeker als hij/zij een andere huisstijl ziet bij andere pagina’s binnen de website. Als dit wel gebeurt kan het ervoor zorgen dat de bezoeker de website direct verlaat. Bestaat de huisstijl van jouw website uit twee kleuren? Dan kun je gebruik maken van basis kleuren. Dit is bijvoorbeeld de kleur zwart of kunnen alle kleuren van grijs zijn. Er kan ook gekozen worden om met verschillende tonen te werken van de basis kleur. Er is van uit Adobe een hele mooie tool hiervoor, die kun je hier vinden. Heb je een huisstijl met meerdere kleuren? Dit kun je ook mooi doorvoeren in de website. Probeer dan ook eens opvallende kleuren te gebruiken voor je CTA’s.
 

5. Beeldmateriaal is leidend

Goed of slecht beeldmateriaal maakt of breekt een website. Al is een website goed ontworpen, een website is altijd minder sterk zonder goed beeldmateriaal. Dit is de reden waarom het belangrijk is om te investeren in goed beeldmateriaal. Dit kan op verschillende manieren:

1. Je kan een fotograaf inhuren die je helpt met het maken van de juiste beelden.
2. Je kan een illustrator inhuren om de juiste beelden te ontwerpen.
3. Je kan van site beelden kopen zoals iStock of Shutterstock
4. Je kan gebruik maken van gratis rechten vrije websites zoals pexels of unsplash
5. Je kan gebruik maken van rechten vrije beelden van freepik

6. Houd je afbeeldingen klein

Het klein houden van afbeeldingen is heel erg belangrijk. Met klein wordt bedoeld dat het bestandsformaat klein is (maximaal 1 MB). Hoe groter het bestandsformaat is, hoe langzamer je website wordt door meer inlaadgegevens. Een voorbeeld: stel je voor dat je op je mobiel een website gaat bekijken op 4G-netwerk. Als er dan 10 afbeeldingen op de site staan van 7 à 8 MB per afbeelding gaat er 70 a 80 MB van je data af met alleen 10 foto’s. Daarnaast moet de rest van de pagina ook nog worden ingeladen. Als de grootte van de foto’s wordt verkleind naar bijvoorbeeld 500KB of 1MB scheelt dit een hoop. Een langzame website door grote afbeeldingen kan frustraties oproepen bij de websitebezoeker. Dit moet ten alle tijden worden voorkomen. Afbeeldingen kunnen verkleind worden via sommige websites op dit terrein of door iemand met design programma’s.

7. Zorg voor een goed webfont

Een webfont is tegenwoordig heel belangrijk. Het is belangrijk omdat iedere browser het ondersteund. Als je een custom font wil inladen kan dit soms voor problemen zorgen.
De beste tip is om web fonts van Google te gebruiken. Google heeft meer dan 1000+ soorten fonts, daarom zit er voor ieder wel wat bij. Daarbij is het belangrijk om minimaal twee en maximaal drie verschillende soorten web fonts te gebruiken. Op een website zijn er namelijk verschillende fonts voor de koppen en leesteksten. Per font zijn er ook verschillende soorten waardoor je kunt variëren.

8. Duidelijke navigatie

Er wordt gedacht dat duidelijke navigatie iets normaals is binnen een website, echter wordt dit vaak vergeten. Een navigatie moet kloppen bij de producten/diensten van het bedrijf en moet ervoor zorgen dat je er goed mee gevonden wordt. De URL achter de link is daarin ook heel belangrijk. Hoe weet je wat een goede navigatie structuur is? Een zoektermenanalyse kan hiervoor worden gemaakt. Daaruit komen de meest belangrijke items voor je navigatiestructuur.

9. SEO zoekmachine optimalisatie

Om jouw website goed vindbaar te maken is het handig om gebruik te maken van SEO (search engine optimization). SEO wordt gebruikt om je teksten goed vindbaar te maken voor de zoekmachine Google. Om jouw website goed in te richten met een goede SEO is een zoektermenanalyse belangrijk. Hierin staan 25 tot 50 focustermen waar jouw website goed gevonden door gaat worden. Het is dan natuurlijk belangrijk dat de tekst daaromheen ook goed is opgebouwd.

10. Zorg voor een CTA (call to action)

Een CTA is ervoor gemaakt om de bezoeker te helpen om een actie te gaan maken binnen de website. Nu is de vraag, welke specifieke actie? Dat ligt aan jouw bedrijf, product of dienst. Het belangrijkste aan een CTA is dat het opvalt. Gebruik hier dan ook een opvallende kleur voor op een goede locatie op de website.

Is er na het lezen van de blog iets wat wij voor je kunnen betekenen of wil je meer weten over websites? Neem dan contact met ons op en misschien zitten wij samen binnenkort aan een (digitale) kop koffie!