Internet Marketing Gemak Logo

Website ontwerpen

Ontdek hoe je in slechts 4 stappen je website ontwerpt en waarom dit veel verder gaat dan het design. Want een echte website ontwerp je niet voor het oog, maar voor je bedrijfsdoelen.

Lees verder en ervaar hoe je in slechts enkele simpele stappen jouw website omtovert tot je beste werknemer.

Afbeelding van een vrouw met laptop
cATEGORIE:

Website maken > Ontwerp

Stap 1

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?

We beginnen in stap 1 dan ook niet met je websitedesign of huisstijl.

Maar met de functieomschrijving.

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 pagina 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?

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, het 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 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 word 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 bedoelt 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?

Samenvatting

In stap 1 zet je de belangrijkste stappen voor het ontwerpen van je website. Het is misschien niet de leukste stap, maar bepaalt uiteindelijk wel de effectiviteit.

Vergelijk het met een winkel. Open jij net je winkel dan wil je natuurlijk het liefste direct met het inrichten van de schappen aan de slag.

Maar is het niet veel belangrijker om na te denken over de locatie van de winkel? De looprichting, de schapindeling etc.?

Geef iedere pagina om je website haar eigen taken en functieomschrijving en bepaal op die manier als het waren de onderdelen die er op moeten komen.

Door er van tevoren over na te denken kun je tijdens het ontwerpen ruimte reserveren voor de belangrijkste elementen.

Waar toon je de FAQ, de reviews, de logo’s van klanten, de navigatie naar andere pagina’s, je telefoonnummer etc.

Website Live Checklist

Een website lancering zonder fouten?

Download deze superhandige checklist en verzeker jezelf van een second opinion bij het lanceren van je website. 

Zo voorkom je gegarandeerd de meest gemaakte fouten! 

Stap 2

Bepaal het wireframe

In stap 1 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. Je kunt voor het gemak ook het Wireframe werkboek downloaden.

Het Wireframe werkboek geeft je een eerste opzet welke 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 ze 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.

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?

Meer lezen?

Stap 3

Ondersteun met 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:

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? Noteer de kleurcode van de kleur en ga vervolgens op zoek naar de complementaire kleur van de kleur die je het meest zult gebruiken. 

Zo trekken contrasterende kleuren snel de aandacht en zijn ze zeer bruikbaar in het sturen op de acties die je van je bezoeker vraagt.

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 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 plaatsen 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:

Etc.

Hoe resoluter jouw aanpak op dit gebied, hoe eerder men jou als herkenningspunt ervaart. Met alle positieve gevolgen van dien.

Stap 4

Breng je ontwerp tot leven

Je hebt de belangrijkste stappen gezet. Je bent klaar voor het leuke werk. Voor stap 4 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 in een handig pakket.

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.

Stap 5

Test het 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.

Heb je ideeën voor je website en wil je eens met iemand sparren?

Neem hier gratis contact op

Website Live Checklist

Een website lancering zonder fouten?

Download deze superhandige checklist en verzeker jezelf van een second opinion bij het lanceren van je website. 

Zo voorkom je gegarandeerd de meest gemaakte fouten!