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 user experience design (en je focust op interactie met de gebruiker) is het handig om wireframes te maken. Ook als een website of app erg complex is en 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.

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, bijvoorbeeld door ze te presenteren aan je opdrachtgever.

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 lastig zijn te verschuiven. Ook kun je ze niet eenvoudig delen met anderen.

Illustrator, Figma of Photoshop

Uiteraard kun je wireframes ook maken in Illustrator of Photoshop. Illustrator en Figma zijn hier het meest geschikt voor, maar ook voor Photoshop kun je online genoeg templates en toolboxes 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. In online tools zoals Figma kun je zelfs andere mensen uitnodigen waarna zij reacties kunnen achterlaten.

Free Online Figma Wireframe Kit

Met deze gratis Figma Wireframe Kit kun je razendsnel wireframes ontwerpen. Je kunt kiezen uit losse elementen of ga voor de kant-en-klare pagina's. Met Figma kun je ook klikbare prototypes maken, en deze delen met je collega's of klanten.

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 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).