UX design
Geplaatst op: 2 mei 2020, aangepast op: 16 december 2024
Wireframes zijn vaak onmisbaar bij het maken van een website of webapplicatie. Maar hoe doe je dit nu effectief? In dit artikel lees je praktische tips.
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: hoe ziet het menu eruit en hoe link je van de ene pagina naar de andere?
Functionaliteit: welke functies en acties kunnen er op de website worden uitgevoerd?
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.
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 je werk op te slaan: beide tools hebben verschillende manieren om de wireframes te exporteren als png-afbeelding of pdf-document. In online tools zoals Figma kun je een link delen of zelfs andere mensen uitnodigen waarna zij reacties kunnen achterlaten.
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.
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 voor het maken van wireframes
Ook zijn er verschillende online tools beschikbaar waarmee je eenvoudig wireframes kunt maken. Hiermee 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.
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.
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).
