In dit artikel gaan we dieper in op het ontwerpen van je website. Wil je liever zelf je website bouwen, lees dan het artikel over je eigen website maken.
Wat is dan het verschil?
Het ontwerpen van je website bevat alle belangrijke stappen voordat je een website bouwt.
Bij het ontwerpen schenk je aandacht aan de strategie, de indeling en uiteindelijk de vormgeving.
Het bouwen van je website brengt uiteindelijk je website, vanuit het ontwerp, tot leven.
Een sterk websitedesign in 6 stappen
Of het nu gaat om een b2b website of persoonlijke website, om tot een goed ontwerp te komen dien je enkele belangrijke stappen te zetten.
Dit zijn stappen die heel belangrijk zijn, maar in de meeste gevallen (met spijt achteraf), overgeslagen worden.
We beginnen daarom bij het begin en werken samen stap voor stap toe naar een professionele website.
Ben je er klaar voor?
Pak een goed kop koffie, een bakkie thee of desnoods een lekker koud biertje, dan kunnen we beginnen met stap 1.
1 | Begin bij je merk
Of het nu gaat om de personal branding of je bedrijf als merk, jij verdient een eigen uitstraling. Besteed eerst aandacht aan de online branding. Denk na over je merkwaarde, je merkidentiteit en merkpositie.
Waar sta je voor? Wie zijn jullie en welke positie wil je in de markt innemen?
2 | Geef je website een functieomschrijving
Heb je goed nagedacht over je websiteontwerp, dan is je website je als een soort werknemer.
Een werknemer die zorgt voor meer klanten en forse tijdbesparingen.
Maar hoe vaak sta je hierbij stil?
Hoe vaak heb jij je websiteontwerp bekeken alsof je website een werknemer is?
Het ontwerpen van je website gebeurt namelijk in twee stappen.
- Het functionele ontwerp
- Het design
De eerste stap is het functionele ontwerp.
Een soort van functieomschrijving van alle belangrijke pagina’s op je website.
We doen net alsof je website een nieuwe werknemer is. En niet zomaar een.
Het is het schaap met vijf poten.
Het goudhaantje en de werknemer waar je al die tijd op gewacht hebt.
Nu gaan we deze werknemer taken geven. We stellen een functieomschrijving op en beschrijven voor iedere pagina op jouw website wat onze gewenste uitkomst is.
De homepage
De homepage is een van de meest bezochte pagina’s op je website. Bezoekers komen op je homepage via het Google-en naar jouw bedrijf of via een dieperliggende pagina op je website.
In een goed websiteontwerp is het logo klikbaar en brengt het logo de bezoeker terug naar de homepage.
De homepage wordt dan ook vooral gezien als “overzichtspagina”.
Het brengt de bezoeker als het ware terug naar het begin.
Aan jou de schone taak om in je ontwerp rekening te houden met de vragen die een bezoeker heeft en rekening te houden met de stap ervoor.
Wat heeft een bezoeker hiervoor gedaan? Hoe is de bezoeker uiteindelijk op de homepage beland? Heeft iemand je gevonden in Google, doorgeklikt vanuit een andere landingspagina op je website?
Omdat het lastig te zeggen is waarom de bezoeker de homepage bezoekt zorg je er in ieder geval voor dat je de meest voorkomende vragen beantwoord:
- Wie zijn jullie?
- Wat doen jullie?
- Wat moet ik doen?
Wie zijn jullie?
Of de bezoeker nu direct uit Google komt, via een flyer of via een dieperliggende pagina, je homepage wordt niet voor niets bezocht.
In veel gevallen heeft de bezoeker een vraag over wie jullie precies zijn en wat jullie doen.
Wie jullie zijn kun je al deels beantwoorden door je bedrijfsnaam en logo te tonen.
Maak in je ontwerp ruimte voor een slogan, tagline of klein verhaal. Maak je bezoekers zo snel mogelijk duidelijk wie jullie zijn en waar jullie voor staan.
Wat doen jullie?
Alleen het tonen van je bedrijfsnaam, je logo en een kleine intro is niet voldoende om de bezoekers gerust te stellen dat zij bij het juiste bedrijf zijn beland.
Zie de homepage als een soort van uithangbord waar jij je beste diensten tentoonstelt.
Laat duidelijk zien wat jullie doen.
Wat moet ik doen?
Wat wil jij dat iedere bezoeker doet? En wat moet de bezoeker doen om antwoord te krijgen op zijn vraag?
Jouw homepage wordt niet voor niets bezocht. Door het tonen van wie jullie zijn en wat jullie doen zul je de meeste bezoekers al helpen.
Maar denk nog verder na.
Met welke intentie komen de meeste bezoekers op je homepage? Doe je veel offline acquisitie en zijn ze op zoek naar een adres of contactformulier?
Komen de meeste mensen op je website met een supportvraag?
Denk na met welke actie of wens iemand jouw homepage bezoekt en schrijf zoveel mogelijk elementen op die straks op je homepage een plekje moeten krijgen.
Of het uiteindelijk ook allemaal in je ontwerp past, is van latere zorg. In deze stappen doe je eerst het “denkwerk”.
Pas later kijken we hoe we je website zo moeten ontwerpen dat iedere pagina precies doet wat het moet doen.
De over ons pagina
Net zoals bij de homepagina denk je eerst na over het “waarom”. Waarom bezoeken mensen je over ons pagina?
Welke vragen hebben, wat verwachten ze?
De meeste mensen bezoeken je over ons pagina omdat je een vacature live hebt staan, of omdat ze twijfelen. Twijfelen of jullie wel het bedrijf zijn dat ze zoeken.
Nu kun je op je over ons pagina proberen iedereen te overtuigen, maar ik raad je eerder aan om te werken met filters.
Filters?
Ja. Niet iedereen past bij jou en je bedrijf. De over ons pagina is dan ook de uitgelezen kans om je klanten te filteren.
Laat duidelijk merken wie jullie zijn, waar jullie voor staan en wanneer een klant écht past.
Durf een tikkie arrogant te zijn. Sta voor jouw kwaliteit, toon je bedrijfscultuur, maak je merkbelofte duidelijk en durf ook vooral NEE te zeggen tegen de klanten die toch niet passen.
De contactpagina
Het ontwerpen van je contactpagina is simpel. Gewoon een pagina met een contactformulier.
MAAR…
Wat is de taak van jouw contactpagina?
Waarom wordt jouw contactpagina gebruikt?
Wat zou, in de meest ideale situatie, jouw contactpagina voor je moeten doen?
Word jouw contactpagina gebruikt voor supportvragen, kijk dan of je de meest gestelde vragen al kunt beantwoorden met een FAQ.
Is je contactpagina vooral bedoeld om bezoekers om te toveren tot leads, neem dan de laatste obstakels weg. Toon reviews, logo’s van bestaande klanten of foto’s van je team.
Wees kritisch op iedere pagina van je website. Geef je pagina’s duidelijk taken en zie er, wanneer je website een tijdje live staat, op toe dat deze taken worden volbracht.
De 404 pagina
Een 404 pagina is een soort foutmelding. Het is het rekje waar normaal je autosleutel hangt, maar dat op dit moment helaas akelig leeg is.
Een 404 pagina ontstaat wanneer iemand een URL (pagina op jouw website) bezoekt die niet meer bestaat.
Veelal wordt de 404 pagina overgeslagen of een standaard variant gebruikt. Zonde. Jouw website bezoekers wilde iets vinden. Misschien zelfs wel iets kopen.
Stuur jij je ze dan met een kluitje het riet in?
Denk na over hoe jij jouw bezoekers de weg kunt wijzen en weer het goede pad op stuurt. Toon bijvoorbeeld je diensten, een link naar de homepage of een zoekveld.
Verkooppagina of landingspagina
Als je website een homepage, over ons pagina en een contactpagina heeft, dan is het grootste gedeelte al klaar.
De rest van je website wordt gevuld via blogs, informatieve pagina’s en verkooppagina’s.
Dit soort pagina’s kun je zien als landingspagina. Een pagina waarop je bezoekers “landen”.
Iedere landingspagina krijgt zijn eigen functieomschrijving. Omschrijf zo helder en concreet mogelijk per pagina wat je ervan verwacht.
Waarom staat deze pagina op je website? Wat is het doel en wat verwachten je bezoekers?
Zorg dat je voor iedere doel, een losse landingspagina maakt.
Opt-in pagina
Een opt-in pagina (ook wel squeeze page genoemd) is een landingspagina waar je iets aanbiedt in ruil voor een e-mailadres.
Dat kan een gratis e-book zijn, maar ook een online cursus of toegang tot waardevolle informatie.
Je wilt een opt-in pagina gebruiken als je weet dat iemand op zoek is naar de oplossing die je aanbiedt, maar nog niet klaar is om te kopen.
Met een opt-in pagina kun je via een mail funnel of nieuwsbrief een relatie opbouwen en uiteindelijk op de ‘automatische piloot’ online leads generen.
Iedere website die wij maken, of zoals wij ze noemen, de online lead generators, heeft deze belangrijke pagina’s en is volledig gericht op het generen van leads.
Ik raad je aan hetzelfde te doen.
3 | Maak wireframes
In stap 2 heb je alle eisen bepaalt. Je weet per pagina met welke elementen je wilt werken. Nu pakken we een pen en papier en geven ieder element zijn eigen plekje.
We maken als het waren het bouwwerk van je website, oftewel jouw wireframe.
We beginnen met het reserveren van de header en de footer. Dit doe je door zowel bovenaan als onderaan je blaadje een balk te tekenen.
Het Wireframe werkboek geeft je een eerste opzet dat je kunt gebruiken, om concepten van je te designen pagina’s uit te werken.
Indien er meer ruimte nodig is voor de onderdelen van je webpagina, plaats je een blanco pagina tussen de twee templatepagina’s.
De header
De header van je website is de bovenste balk. Het is de balk waar je vaak je logo en websitenavigatie plaatst.
Denk goed na over welke elementen je hier plaatst. Zorg er in ieder geval voor dat je de belangrijkste pagina’s opneemt (via een menu), je logo en eventueel een telefoonnummer.
De footer
De footer van je website is de onderste balk. Het is de balk waar je vaak de algemene voorwaarden en overige informatie van een website vindt.
Als je op je blaadje de header en footer een plekje hebt gegeven kun je per pagina de rest van de elementen indelen. Het gaat er hier niet om hoe mooi jij kunt tekenen, maar om het indelen van de elementen.
Waar zetten we alles neer? Is er voldoende ruimte? Wat tonen we het eerste?
4 | Kies het juiste design
Het webdesign geeft je website de juiste uitstraling, maar moet vooral het ontwerp ondersteunen.
Wat ik daarmee bedoel?
Je hebt in de vorige stappen de taken en elementen bepaalt. Je weet per pagina wat je wilt bereiken. Nu kijk je hoe je met het juiste design het ontwerp ondersteunt.
Dit doe je door na te denken over de:
- Kleuren
- Afbeeldingen
- Witruimte
- Pixels
- Stijl
De kleuren
Bij het bepalen van de kleuren op je website kijk je als eerste naar je huisstijl. Met welke kleuren is je huisstijl opgebouwd?
Verdiep je ook in de betekenis van de kleuren om iedere kleur een extra boodschap mee te geven.
Contrasterende kleuren
Contrasterende of complementaire kleuren zijn de kleuren die recht tegenover elkaar staan in de kleurencirkel. Door contrasterende kleuren te gebruiken trek je de aandacht.
Welke kleuren contrasterend zijn en de meeste aandacht trekken, hangt af van de andere kleuren die je gebruikt.
De kleuren bepalen
Via de tools Coolors kun je gemakkelijk een kleurenschema voor je website maken. Je vult allereerst de kleuren van je huisstijl in en laat vervolgens de tool zijn werk doen.
Naast ondersteunende kleuren, leg je een of twee complementaire kleuren vast.
De complementaire kleuren gebruik je voor buttons of banners of voor de elementen waar je de aandacht op wilt vestigen.
Afbeeldingen
Met afbeeldingen ondersteun je het verhaal. Denk per pagina na wat je wilt uitbeelden en wat voor soort afbeeldingen hier het beste voor gebruikt kunnen worden.
Plaats niet zomaar een foto of plaatje omdat het mooi staat, maar denk na over de boodschap. In de vorige stap, bij het uittekenen van je wireframe, heb je al ervaren dat je pagina maar slechts ruimte heeft voor een beperkt aantal elementen. Ga hier met zorg mee om.
Witruimte
Witruimte is een van de makkelijkste en ook krachtigste elementen dat je kunt inzetten bij het ontwerpen van je website.
Door witruimte vallen zaken op!
Plaats je meest belangrijke element op de pagina tussen voldoende witruimte. Door te spelen met witruimte geef je het element nog meer aandacht.
Zo kan een knop, afbeelding, boodschap of review nog meer aandacht krijgen als je het plaatst tussen enkele witregels.
Pixels
Ieder scherm is opgebouwd uit pixels. Kleine vierkantjes die gevuld worden met jouw websiteontwerp.
Voor ieder scherm dien jij een passend ontwerp te maken. Denk na over de breedte van je pagina’s, het ontwerp voor pc, tablet en mobiel.
Stijl
Je websiteontwerp is paas geslaagd als iedere bezoeker feilloos de weg weet te vinden en ieder pagina precies doet wat het moet doen.
Dit lukt alleen wanneer jij je vasthoudt aan de stijl die je hebt bepaald.
Kies je voor informeel, formeel, eigen foto’s, illustraties of veel video’s? Blijf bij je gekozen stijl en plaats belangrijke elementen altijd op deze plek.
Verwerk in je brandbook de elementen die kenmerkend zijn voor jouw merk en schenk ook aandacht aan je huisstijl.
Leg bijvoorbeeld het volgende vast:
- Het lettertype dat je gebruikt
- Welke hoofdkleuren en contrasterende kleuren je gebruikt
- Hoe je omgaat met beeldmateriaal
- Of je met u of je spreekt
- Etc.
Hoe resoluter jouw aanpak op dit gebied, hoe eerder men jou als herkenningspunt ervaart. Met alle positieve gevolgen van dien.
5 | Breng je ontwerp tot leven
Je hebt de belangrijkste stappen gezet. Je bent klaar om je website te designen. Voor stap 5 kun je er voor kiezen om zelf aan de slag te gaan, of om je website te laten ontwerpen.
Ga je zelf aan de slag verdiep je dan eerst in de verschillende systemen voor je website.
Kies je voor een content managementsysteem of bouw je alles op via HTML?
Denk na welke eisen jij aan het programma stelt en welke partij, software of ontwikkelmethode het beste bij je past.
Zo hebben wij jaren geleden Webnemer in het leven geroepen. Een pakket dat het beste uit alle werelden samenbrengt.
Zo kun je gemakkelijk je website ontwerpen, optimaliseren en beheren. En het beste van alles?
Je hebt geen gedoe meer met hosting, beveiliging of technische rompslomp.
6 | Test je ontwerp
Hoewel de gouden tip niet bestaat, je blijft er altijd naar zoeken.
Ook ik ben al ruim dertien jaar bezig met het testen, onderzoeken en optimaliseren van de effectiviteit van talloze websites.
En wat blijkt?
Er is altijd ruimte voor verbetering.
Blijf je ontwerp testen, bekijk je Google Analytics resultaten, zoek naar de meest bezochte landingspagina en start een A/B test op om je ontwerp pas écht goed te testen.
Hoe meer je test, hoe beter je wordt.
Conclusie
Zelf je website ontwerpen geeft wat uitdagingen, maar ik hoop dat ik je met dit stappenplan heb kunnen helpen. Neem je tijd voor het proces. Denk na over het doel van de pagina’s, de indeling, de kleuren en teksten. Gun het jezelf ook om fouten te maken.
Maak je website, laat het rusten en kijk met een frisse blik opnieuw. Kijk wat er nog beter kan, verbeter het en breng je site dan gewoon live.
Niemand kan zo goed bepalen of je website goed ontworpen is als je bezoekers. Laat je website een tijd online staan, kijk in Google Analytics hoe je bezoekers reageren en breng dan opnieuw verbeterpunten aan.