Hoe maak je een wireframe voor je website?
Voordat je begint met het ontwerpen van je website, of het maken, denk je na over de indeling, het doel en de elementen. Een wireframe helpt je hierbij.
Eigenlijk maak je geen wireframe voor je website, maar voor alles losse pagina’s. Het is belangrijk dat je bij het maken van een wireframe nadenkt over de intentie van de bezoeker.
Om welke reden bezoekt de bezoeker je website?
Wat verwacht het op je pagina te zien?
Elke pagina op je website heeft een ander doel en dus ook een ander wireframe nodig. Daar duiken we straks dieper op in.
Als je dit artikel leest omdat je zelf je eigen website aan het maken bent, schrijf dan eerst alle pagina’s op die je website straks krijgt.
Bijvoorbeeld:
- Homepage
- Verkooppagina
- Over ons pagina
- Contactpagina
- Opt-in pagina
- Blog
- etc.
Schrijf nu per pagina op wat voor jou de belangrijkste doelen zijn. Stel dat je je over ons pagina pakt. Wat zijn dan voor jou de belangrijkste doelen voor deze pagina?
- Je verhaal vertellen
- Twijfelende bezoekers overtuigen
- Je persoonlijkheid laten zien
- Etc.
Heb je voor iedere pagina je belangrijkste doelen opgeschreven, dan kun je met de daadwerkelijke lay-out (het wireframe) aan de slag.
Alle in de praktijk geteste wireframes
Wist je dat Webnemer bomvol staat met in de praktijk getest wireframes. Wireframes, templates en blokken waarvan we zelf gezien hebben dat ze werken.
Neem gerust een kijkje, je bespaart jezelf er een hoop tijd en gedoe mee en het is gewoon gratis.
Een wireframe maken
Pak een potlood, wat kleurtjes en een paar lege vellen papier. Zie elk vel als een losse pagina op je website.
Of download gratis ons Wireframe Template. Hoef je alleen te printen en kun je direct beginnen met tekenen.
Begin bovenaan je vel met het teken van je website header. Dit is het bovenste gedeelte van je website. Onderaan de pagina komt de footer van je website.
Merk je dat je te weinig ruimte overhoudt op 1 A4’tje om je wireframe te tekenen, sla dan de header en footer over.
Vervolgens pak je jouw lijstje erbij (per pagina) van je belangrijkste doelen. Denk nu goed na hoe je al (of zoveel mogelijk) doelen kunt bereiken.
Durf daarin creatief te zijn. Wil je overtuigen? Dan werken reviews goed. Wil je jezelf laten zien, dan werkt een stukje over ons goed.
De ideeën die je bedenkt, ga je nu een plekje geven. Dit kun je doen door echt te tekenen of met blokjes en een stuk tekst te werken.
Kies wat jij prettig vindt.
Het gaat erom dat je hebt nagedacht over de slimste lay-out van je website en al haar pagina’s.
Laten we daarom eens extra stilstaan bij de belangrijkste pagina’s op je website.
Wireframe voor je homepage
Een homepage maken is niet zo moeilijk. Maar ervoor zorgen dat je homepage precies dat doet, waar het voor bedoelt, tja… dat is een compleet ander verhaal.
De homepage van je website wordt vaak om deze twee redenen bezocht:
- Bezoekers kennen je bedrijf al en hebben gezocht op je bedrijfsnaam
- Bezoekers zijn geland op een willekeurige pagina en zijn op zoek naar een overzicht
Wat moet je verwerken in je wireframe
Op je homepage is het heel belangrijk dat je zo snel mogelijk antwoord geeft op de volgende vragen:
- Wie zijn jullie?
- Wat doen jullie?
- Wat moet de bezoekers doen?
Gun jezelf een creatief moment. Denk na over wie jullie écht zijn, welke brandbelofte je duidelijk wilt maken en wat je met je website wilt uitstralen.
Welke eerste indruk wil je maken?
Ben je grappig? Zakelijk, professioneel, een autoriteit?
Sowieso kun je natuurlijk al snel laten zien wie jullie zijn door je logo bovenaan je website te plaatsen. Denk ook aan een eventuele tagline of brandbelofte.
Duidelijk maken wat jullie doen, doe je door ergens op je homepage ruimte te reserveren voor je belangrijkste diensten of producten.
En dan het laatste en belangrijkste.
Wat moet de bezoeker doen?
Je wilt je bezoeker op een slimme manier gemakkelijk naar je belangrijkste pagina’s op je website sturen. Denk er goed over na wat voor jou de belangrijkste pagina’s zijn en hoe je mensen die jou al kennen, snel de volgende stap laat maken.
Wireframe voor je verkooppagina
De verkooppagina is waarschijnlijk de belangrijkste pagina op je website. Kijk bij het maken van je wireframe of je eerst je verkooppagina schrijft, of dat je eerst met je wireframe begint.
Waarom?
Je wireframe bepaalt de lay-out en ruimte op je website. Als je eerst je wireframe maakt, voordat je de tekst schrijft, geef je jezelf meer richting, maar daardoor wordt het ook moeilijker om de juiste tekst te schrijven.
Bepaal zelf wat goed voor jou werkt.
Op je verkooppagina is het belangrijk dat je net dat beetje vertelt en laat zien dat je bezoekers genoeg nieuwsgierig maakt om contact met je op te nemen.
Laat dus al je tell-sell trucjes thuis en probeer op je verkooppagina dat te vertellen (en laten zien) wat je normaal gesproken ook aan tafel doet.
Wireframe over ons pagina
De over ons pagina is de plek op je website waar je jouw verhaal vertelt.
Het is belangrijk dat deze pagina echt uitstraalt wie je bent en waar je voor staat, zodat bezoekers zich ermee kunnen identificeren.
Bedenk een duidelijke en open structuur waarin bezoekers te weten komen wie jullie zijn. Houd het kort en simpel, maar ook eerlijk.
Geef op het wireframe van je over ons pagina voldoende ruimte aan voor afbeeldingen of video’s als je deze elementen ook wilt gebruiken.
Wireframe contactpagina
Je contactpagina heeft natuurlijk maar 1 doel. Je bezoekers contact laten opnemen.
Maar…
De lay-out van je contactpagina en wat je in je wireframe verwerkt, bepaalt uiteindelijk ook of ze dat doen.
Denk voor het wireframe van contactpagina na hoe je de laatste bezwaren kan wegnemen. Hoe kan ik nog een keer duidelijk maken dat jij écht dat juiste partij bent?
- Toon logo’s van je klanten
- Toon je team (zorgt voor extra betrouwbaarheid)
- Toon reviews
- Toon je adres
- etc.
Slim SEO-trucje
Je contactpagina is vaak de pagina die de meeste interne links krijgt. Hierdoor bouwt deze pagina veel waarde op. Deze waarde kun je doorspelen door ergens op je contactpagina (zonder je bezoekers af te leiden) te linken naar je belangrijkste diensten. Dit helpt weer om deze pagina’s beter vindbaar in Google te maken.
Wireframe opt-in pagina
De opt-in pagina, of sqeeuzepage is bedoeld om de contactgegevens van je bezoekers los te peuteren. Alles wat je in je wireframe verwerkt moet dat doel dienen.
Plaats alleen maar elementen op je opt-in pagina waarvan je (bijna) zeker weet dat ze de bezoeker extra overtuigen om hun contactgegevens achter te laten.
Plaats niet zomaar plaatjes of foto’s of andere designelementen omdat het er mooi uitziet, denk of ieder element, al is het het kleinste puntje, na.
Wireframe blog
Als je een blog wilt maken, wat ik je sowieso aanraad om te doen, probeer dan na te denken of je in je blog lay-out elementen kunt verwerken om je bezoekers verder in je sales funnel te brengen.
Bijvoorbeeld door je diensten te benoemen, een contactformulier of een banner voor je weggever.
Aan de slag met de lay-out van je website
Ik weet dat je serieus bent. Je hebt niet voor niets dit complete artikel gelezen. Ik hoop dan ook dat ik je veel tips en nieuwe inzichten heb kunnen geven voor de lay-out van je website.
Maar… weet wel
Aan alleen theorie heb je geen fluit.
Daarom geven wij iedereen de mogelijkheid om volledig gratis met Webnemer aan de slag te gaan. Met dit programma, wat je kunt zien als je eigen online werknemer, heb je in een hand om draai de mooiste websites gemaakt.
En het mooiste van alles?
Wij hebben al het harde denkwerk al gedaan. Gebruik een van de vele templates, blokken of start blanco. Jij kiest.
Conclusie
Het uittekenen of visualiseren van je website is een belangrijke stap. Het helpt je bij het inrichten van je website en geeft je een richting bij het uiteindelijk ontwerp.
Veelgestelde vragen
1. Wat is een wireframe?
Een wireframe is een visuele weergave van de structuur en functionaliteit van een website of app. Het wordt gebruikt om een conceptueel ontwerp te maken voordat er grafische elementen of details worden toegevoegd.
2. Waarom zijn wireframes belangrijk?
Wireframes zijn belangrijk omdat ze ontwerpers in staat stellen om eerst over de indeling van de website na te denken voordat er met het design begonnen wordt. Wireframes dienen als een blauwdruk voor het ontwerpproces en helpen bij het testen van de functionaliteit of indeling.
3. Welke tools worden gebruikt om wireframes te maken?
Er zijn verschillende wireframe tools beschikbaar, zoals Lucidchart, Balsamiq, Adobe XD en vele anderen. Deze tools bieden sjablonen en functionaliteiten om het maken van wireframes te vergemakkelijken.
4. Voor wie zijn wireframes bedoeld?
Wireframes zijn bedoeld voor ontwerpers, ontwikkelaars en andere professionals die betrokken zijn bij het ontwerpproces. Ze helpen bij het communiceren van de functionele aspecten en het verkrijgen van input van verschillende belanghebbenden.
5. Wat is het verschil tussen een wireframe en een prototype?
Een wireframe is een statische visuele weergave van de structuur en layout van een website, terwijl een prototype interactief en functioneel is. Een prototype bootst de gebruikerservaring na en geeft vaak een beter beeld van het eindproduct.
6. Zijn er verschillende soorten wireframes?
Ja, er zijn verschillende soorten wireframes. Een ruw wireframe geeft alleen de basisstructuur weer, terwijl een gedetailleerd wireframe ook elementen zoals navigatiebalken en call-to-action knoppen bevat. Het type wireframe dat wordt gebruikt, hangt af van de behoeften en het stadium van het ontwerpproces.