Get started
Get the right tools
/>
Get inspired
Get help
Websites bouwen met wireframes

Websites bouwen is een proces in dit blog leg ik uit hoe wireframes je helpen om een goed werkende website op te zetten.

Websites bouwen met wireframes

Websites bouwen is een proces in dit blog leg ik uit hoe wireframes je helpen om een goed werkende website neer te zetten.

Wat is een wireframe?

Wireframe is een bouwtekening voor het bouwen van een website, het helpt om de navigatie door een website  begrijpelijk te maken.  Het focust op de prioriteiten wat er op de scherm gaat gebeuren en niet hoe het design eruit komt te zien. Een wireframe bevat dus geen typografie, kleur of beelden.

Waar zijn wireframe’s goed voor?

Wireframes worden vaak gebruikt door ux designers, visual desginers. Het voordeel van een wireframe is dat je veel sneller en makkelijker een concept kan neerzetten. Het develop team weet wat er moet worden gebouwd, Je klanten en team kunnen je eerder feedback geven. Je vermijd later in het design process hacks voor dingen die niet werken of niet logisch zijn.

Hoe maak je een wireframe?

Er zijn verschillende soorten software om een wireframe te maken. Mijn voorkeur gaat voor papier en potlood of een tekentablet zo ben je niet afgeleid door andere dingen op je computer scherm. Juist door van scratch te beginnen kom je met de beste oplossingen en ideeën hierdoor zit je niet vast aan een stramien van de beperkte mogelijkheden die een software kan bieden.

Enkele tips voor je begint aan een wireframe:

  • Maak het functioneel houdt er rekening mee dat elke kader die je gebruikt een functie heeft.

  • Houdt het overzichtelijk en schoon dus niet volstoppen met teveel tekst en of kaders op onlogische plekken.

  • Controleer of de navigatie door de wireframe logisch is voor de gebruiker.

Voorbeeld van een wireframe :

Dit is een wireframe van een evenement website het heeft een duidelijke structuur waar wat komt en aan de hand van de teksten in het wireframe kan je zien waar elk blok voor dient.

 

 

Eindresultaat wireframe

Hier zie je hoe de wireframe is uitgewerkt met beelden, tekststijl en kleuren.

Waarom wireframes?

Overal is wireframing goed voor het oplossen van usabillity problemen. Dat het heel tijdrovend kan zijn ben ik het er niet mee eens omdat je ook korte brainstorm sessie kan houden. Gebruik het als tool om snel iets duidelijk te maken naar je klanten en teamgenoten . Ik ben het er mee eens dat het de creativiteit van een ontwerper kan beperken omdat de mogelijkheden en of ideeën soms niet verder kunnen gaan dan wat een wireframe voor ogen heeft.

Verder zitten klanten vast aan de keuzes van een wireframe en ze weten vaak niet hoe het eindresultaat eruit komt te zien dus hierdoor kunnen er zaken gaan opschuiven. Maar daar kan je ook op improviseren met of zonder wireframe zul je altijd wel flexibel moeten zijn.

Ik zie meer voordelen als een wireframe wordt gezien als een kleine hulpmiddel, een snelle weergave en dat er dingen kunnen veranderen waar nodig.