updates
& inspiratie

Functioneel ontwerp website met wireframes

Wanneer je voor een klant een website gaat maken loop je vaak tegen hetzelfde probleem aan; de klant weet ongeveer wat ze willen, maar heeft eigenlijk geen idee wat ze hier precies van moeten verwachten.

Om dit te vermijden maken we gebruik van website wireframes. Met wireframes wordt het duidelijk hoe de website in elkaar zit en hoe de verschillende onderdelen van de website met elkaar samenwerken.

Wat zijn wireframes?

Een wireframe is in principe een soort structurele plattegrond van je website. Het is een (visueel) hulpmiddel dat snel de structuur en de functionaliteit van de website laat zien. Een wireframe is puur gericht op de structuur, de navigatie en de gebruiksvriendelijkheid.

Wanneer gebruiken we wireframes?

Nadat het duidelijk is wat de klant voor website wil, maken we hier een wireframe van. Op deze manier kunnen we de klant laten zien hoe de website uiteindelijk zal gaan functioneren. Wanneer de klant andere wensen heeft kunnen deze snel worden geïmplementeerd, en we kunnen gelijk zien of de website een logische en gebruiksvriendelijke indeling heeft. Grotere structurele wijzigingen kunnen nu ook nog makkelijk worden doorgevoerd, zonder dat dit invloed heeft op de uiteindelijke uitstraling van de website.

Ook als de klant alleen een globaal idee voor de website heeft, is het nuttig om dit al uit te werken in een wireframe. Op deze manier krijgt de klant een beter idee van de website en kan de structuur al gedeeltelijk gebouwd worden voordat het definitieve ontwerp vast staat.

Bij het maken van een grafisch ontwerp kan de designer ook makkelijk zien wat het idee is, zodat dit niet eerst langdurig besproken hoeft te worden. Dit alles bespaart uiteindelijk weer kostbare tijd.

Hoe gebruik je wireframes?

Er zijn verschillende manieren om een wireframe te maken. Behalve de oude vertrouwde pen-en-papier aanpak zijn er genoeg andere manieren om dit te doen. Een aantal veelgebruikte programma’s om wireframes te bouwen zijn Microsoft Excel, Word, of Visio, Adobe Photoshop of Balsamiq. Elke methode heeft zijn voor- en nadelen, maar uiteindelijk draait het om je eigen voorkeur.

Wanneer je aan een nieuw wireframe begint moet je altijd uitgaan van het doel van de website. Wat moet de website doen, en hoe kan dit worden bereikt? Met deze gedachte in je achterhoofd ga je beginnen met de structuur.

Conclusie

Het werken met wireframes heeft veel voordelen. Het grootste voordeel is toch wel dat je al een functioneel ontwerp van de website hebt voor je met de daadwerkelijke website zelf begint. Hierdoor hebben jij en je klant al een goed beeld van het uiteindelijke eindresultaat voordat de website zelf af is en kan de klant duidelijke feedback geven.

Daarnaast hoef je je alleen nog maar bezig te houden met het uiterlijk van de website, aangezien de structuur en werking is al bepaald. Natuurlijk kunnen er later altijd nog dingen worden gewijzigd, maar het is wel zo prettig dat hier niet meer over nagedacht hoeft te worden.