Wireframes maken voor je website

Wat zijn wireframes?

Een wireframe is een schets voor je website. Het is te vergelijken met een bouwtekening, waarin je de onderdelen van een website visueel maakt. De focus ligt vooral op wat je met de website kunt en niet zozeer hoe de website eruit ziet. Door deze twee werkzaamheden te scheiden, kun je je beter focussen zonder te worden afgeleid.

Bij een wireframe ligt de focus vooral op:

Structuur: welke route leggen de gebruikers af op je website?
Layout: wat is de indeling en hoe ziet de vlakverdeling eruit?
Navigatie: het menu en links op de pagina's
Functionaliteit: welke functies en acties er op de website uitgevoerd kunnen worden

Wanneer maak je wireframes?

Wireframes zijn handig om snel ideeën voor een interface te schetsen. Vooral als je bezig bent met interaction design, en de focus ligt op interactie met de gebruiker, is het handig om wireframes te maken. Ook als een website of app erg complex is, of als je veel feedback nodig hebt van je klant loont het om wireframes te maken. Door je nog niet te richten op kleuren, typografie en afbeeldingen bespaar je namelijk veel tijd, vooral als er meerdere revisies gedaan moeten worden.

Je kunt in principe direct met wireframes beginnen, zodra je iets weet over de doelgroep en doel van de website. Doordat wireframes gemakkelijk aan te passen zijn en erg visueel zijn kun je ze gebruiken als communicatiemiddel.

Nadat de wireframes zijn goedgekeurd kun je beginnen met het ontwerpen van de website. Dan hoef je je alleen te focussen op kleuren, typografie en afbeeldingen: de structuur en indeling heb je al vastgelegd in je wireframes.

Hoe maak je wireframes?

Er zijn verschillende manieren om wireframes te maken, met elk hun eigen voor- en nadelen.

Pen en papier

Het makkelijkste is natuurlijk om wireframes te schetsen met pen en papier. Je kunt zo snel ideeën op papier zetten en het grootste voordeel is dat iedereen het kan. Je hoeft geen Picasso te heten. Een nadeel is dat getekende wireframes moeilijk zijn aan te passen of elementen te verschuiven. Ook is het ervan delen lastig.

Illustrator, Sketch of Photoshop

Uiteraard kun je wireframes ook maken in Illustrator of Photoshop. Illustrator en Sketch zijn hier het meest geschikt voor, maar ook voor Photoshop kun je online genoeg templates en toolboxes voor vinden. Vanuit Illustrator of Photoshop is het eenvoudig om iets te delen: beide tools hebben oneindige manieren om de wireframes te exporteren naar bijvoorbeeld png of pdf.

Sketch UI Kit

Neem nou eens deze template van designer Mikolaj Dobrucki. De kit zit vol met elementen, symbolen en tekststijlen en bevat schermen voor Android, iOS en websites. De kit is gratis te downloaden en te gebruiken.

Free Photoshop Wireframe Kit

Ook deze wireframe set is gratis te gebruiken. Naast algemene elementen zoals zoekvelden zitten er ook formulieren, tekstkoppen, paragrafen en afbeeldingen in. Kortom, alles wat je nodig hebt voor je wireframes.

Online tools

Ook zijn er verschillende online tools beschikbaar waarmee je eenvoudig wireframes kunt maken. Ook is het vaak makkelijk om wireframes te delen met klanten of ontwerpers met wie je samenwerkt.

Mockplus

Mockplus is een gratis online tool voor wireframing waarmee je eenvoudig outlines, design flows en ideeën tot interactieve wireframes kunt maken. Met zijn intuïtieve drag-and-drop-builder en massa's kant-en-klare componenten, iconen en templates, kun je alles razendsnel wireframen en prototypen. Het biedt een gratis abonnement aan en de betaalde abonnementen beginnen bij $ 10,95 per gebruiker per maand.

Wireframe.cc

Met Wireframe.cc is het eenvoudig om online wireframes te maken. Zonder een account aan te maken kun je wireframes maken, opslaan en delen. Met een (gratis) account kun je privé projecten aanmaken, wireframes aan elkaar linken en wireframes exporteren naar png of pdf.

Balsamiq

Ook Balsamiq biedt een online versie aan van hun wireframe software. Balsamiq biedt een gigantische database aan website elementen die eenvoudig met drag and drop in het scherm geplaatst kunnen worden. Verder beschikt de online tool over een heleboel functies. De tool is betaald, maar er is ook een 30-daagse gratis trial beschikbaar.

Aan de slag met wireframes

Het belangrijkste met wireframes is niet hoe je ze maakt of hoe ze eruit komen te zien, maar wat je als eindresultaat krijgt. Ga dus zo snel mogelijk aan de slag en werk met de tools die jij het makkelijkst vindt werken.

Direct beginnen? Check onze website layouts om inspiratie op te doen voor je indeling (inclusief voorbeelden).