Code14

Wireframes voor het bouwen van je website

Je bent een mobiele app, website of web app aan het ontwikkelen en wilt even uittekenen hoe het er ongeveer uit ziet. Het is vaak iets wat we al spontaan doen, maar het heeft ook een naam: wireframes! Met de onderstaande tips kun je zelf een wireframe maken.

Wireframes

Wat is een wireframe

De meeste webdevelopers maken bij het bouwen van een website of app gebruik van wireframes. Zie het eigenlijk als de bouwtekening van je website of app. Je tekent alle onderdelen die op je app aanwezig zullen zijn, zoals de navigatie, inhoud, indeling en knoppen. Wireframes gaan puur in op de functionaliteiten, de gebruiksvriendelijkheid en hebben invloed op de uiteindelijke user experience (gebruikerservaring) van een app of website. Een wireframe maken is dus niet bedoeld als grafisch concept, je wilt namelijk nog niet gaan discussiëren over kleuren en vormen, maar puur over het fundament.

User experience testen

Wanneer je klaar denkt te zijn met je wireframe, ga je aan de slag met het maken van een visueel ontwerp en een prototype. Een prototype zorgt voor een meer waarheidsgetrouwe beleving. Door het prototype zijn aspecten van UX zoals originaliteit, stimulatie en aantrekkelijkheid goed te meten. Het prototype leg je voor aan je doelgroep, want zo kun je al voordat je begint met de bouw, je user experience testen. Wat ervaren je gebruikers binnen het ontwerp? Kunnen ze alles vinden? Welke knoppen zouden ze gebruiken? Wat missen ze nog? Door je potentiële gebruikers dit soort vragen voor te leggen, zullen eventuele probleemgebieden in je ontwerp al kenbaar worden alvorens je echt aan het bouwen bent. Dat scheelt een hele hoop tijd en geld, want als je voor de bouw al weet wat gebruikers anders zouden willen, dan hoef je niet na het bouwen alles opnieuw te gaan inrichten.

User Experience testen voor websites

Hoe maak ik een wireframe?

Je wireframes kun je helemaal zelf op papier uittekenen, bijvoorbeeld op ruitjespapier, maar er zijn natuurlijk ook digitale wireframe tools te vinden. Als wij een wireframe maken, dan doen wij dat met Sketch als wireframe tool. Sketch is een digitaal tekenprogramma, waarmee je prima wireframes kunt uittekenen. Er is online ook een prima Sketch wireframe kit te vinden, met alles wat je nodig hebt om een wireframe te tekenen. Je kunt eigenlijk met elk tekenprogramma je eigen wireframe maken. Adobe InDesign of Illustrator zijn bijvoorbeeld ook heel geschikt voor het tekenen van je wireframe. Het nadeel hiervan is dat je geen format hebt of al voorgeprogrammeerde blokken, waardoor je echt alles zelf moet gaan tekenen.

Vind je het te lastig om een complete wireframe uit te tekenen? Wij helpen je graag op weg. Een wireframe maken doen we wel altijd samen met jou, want door bezig te zijn met een wireframe kun jij goed communiceren aan ons hoe je wilt dat jouw website of app functioneert en werkt.

Wireframes maken in Sketch

Ga jij wireframes gebruiken?

Dan ga je veel tijd en geld besparen! Uit onze ervaring weten wij dat je door het maken van wireframes heel goed hebt nagedacht over de wensen en eisen van het functionele ontwerp. Wanneer je de app of website daadwerkelijk gaat bouwen zul je merken dat je vrij weinig grote zaken hoeft te veranderen of aan te passen. Natuurlijk voorkom je kleine aanpassingen nooit, maar grote (en dure) aanpassingen ga je vermijden door het gebruik van wireframes!

We helpen je graag op weg met een wireframe maken. Neem daarvoor contact met ons op! Ben je op zoek naar meer informatie? Bekijk dan eens de andere artikelen in onze kennisbank.

Bekijk onze kennisbank

Onze diensten.

We bedenken frisse en creatieve ict-oplossingen die impact hebben en rendement opleveren. We doen dit door middel van maatwerk software, co-creatie software en Team as a Service.