Wireframes, hoe begin je eraan? Vijf stappen die je hierbij helpen!

Jeroen Pets Jeroen Pets
18 September, 2018

Of je nu een ervaren UX’er bent of nog maar net aan je designloopbaan bent begonnen, ongetwijfeld heb je al gehoord van wireframes. Toch merk ik dat een wireframe niet voor iedereen dezelfde invulling heeft en de kracht ervan vaak over het hoofd wordt gezien. In dit blogbericht ga ik dieper in op de waarde van wireframes, hoe je ze bouwt en gebruikt.

 

Je kent wireframes en het nut ervan en je wilt meteen aan de slag gaan? Scroll dan verder naar stap één van de vijf om je eerste wireframe te tackelen👇🏻

 

Wat zijn wireframes?


Wireframes zijn een essentiële stap om ideeën te vertalen in bruikbare schetsen voor digitale producten. De bedoeling van wireframes is om de content, de functies alsook de interne verbindingen van een pagina of scherm in een app of website op een visueel overzichtelijke manier weer te geven. Doorgaans hebben wireframes geen vergevorderd kleurgebruik of visueel esthetisch design. Ze representeren de structuur van het product in een schematische weergave.

Het nut van wireframes?


Een wireframe is een minimaal ontwerp van een lay-out dat drie doelen dient:

  • Het geeft overzicht van de structuur en lay-out van een pagina
  • Het presenteert de informatie op die pagina
  • Het geeft de algemene richting en beschrijving van de gebruikersinterface weer
Net als een plan van een gebouw, beschrijft een wireframe duidelijk de details. Zodat alle betrokkenen, zowel de klant als het creatief team, een duidelijk overzicht krijgen van het project.
Wireframes verbinden ontwerpers, gebruikers, ontwikkelaars en andere stakeholders. Ze zijn complex genoeg om iedereen voldoende te informeren, maar ze behouden eenvoud en vervallen niet in details van de ontwerptaal. Door het design los te laten, worden testgebruikers niet afgeleid door ontwerp, kleurgebruik en content, factoren die pas later in het designproces aan de orde zijn. Er gaat meer aandacht naar user experience, wat de uiteindelijke gebruiksvriendelijkheid van het product echt te goede komt.
Het is dan ook het aangewezen moment om nieuwe informatie uit gebruikersonderzoek of van stakeholders efficiënt te verwerken. Wireframes zijn flexibel, snel aanpasbaar en vooral vergankelijk. Veranderingen wegen in deze fase veel minder op het budget dan in een later stadium.

Maar hoe begin je eraan? Wat doe je als je nog nooit een wireframe hebt gemaakt? Welke stappen moet je vervolledigen om tot correcte wireframes te komen. Neem pen en papier (niet enkel voor notities), samen tackelen we je eerste wireframe in vijf simpele stappen.

Stap 1: weet wat je bouwt.

Toen ik net als designer startte en voor het eerst met wireframes in contact kwam, geloofde ik dat een concept wel op zijn plaats zou vallen, eens het geschetst was. Ik ben niet vaak verder van de waarheid af geweest. In realiteit is het allesbehalve evident om een ervaring te ontwerpen die natuurlijk aanvoelt. Vergeet daarom het esthetische.

In een wireframe is er geen tijd om te focussen op kleurgebruik en of die afbeelding daar wel goed staat. Start met een analyse. Heeft het ontwerp een menu nodig? Is een zoekbalk handig? Moet je eenvoudig kunnen navigeren naar een gebruikersprofiel? Zijn de links naar social media eenvoudig beschikbaar?

Lijst alle elementen op die je in het ontwerp wilt gebruiken en deel ze in volgens prioriteit. Eens je weet wat je gaat te bouwen, wordt het bouwen zelf een stuk eenvoudiger.

Stap 2: focus op UX en niet op het ontwerp.

Natuurlijk wil je een applicatie met een geweldige UX, maar wat is UX? User experience of UX is een omvangrijk concept. Je kan stellen dat het de ervaring van de gebruiker van je product, applicatie of pagina is. Hoe ervaart je gebruiker de applicatie en met welke vlotheid kan hij doorheen de verschillende onderdelen navigeren. Dat klinkt vrij abstract, niet?

Om eerlijk te zijn, dat is ook zo. Bovendien evolueert UX mee met de tijd. UX’ers bij Continuous scholen zich voortdurend bij om op de hoogte blijven van de laatste nieuwe trends, conventies en gebruikerspatronen. Daarbovenop testen we voortdurend deze best practices om zo in elk project een goede gebruikerservaring te bekomen.

Als je één ding over UX moet onthouden is dat UX niet gaat over het overladen van een scherm met alle toeters en bellen. Bij UX draait alles om het vertalen van de noden van de gebruiker. Hoe kan hij zo vlot en eenvoudig mogelijk werken in een applicatie, op een pagina of met een product. Er zijn een aantal patronen en conventies die natuurlijk aanvoelen, gebruik ze en houd rekening met de beperkingen van het gebruikte toestel, je product en doelpubliek.

Stap 3: raak geïnspireerd en ga van start.

Je hebt je lijst met elementen, je weet wat je wilt doen. Tijd om aan de slag te gaan. Kijk nog even rond op het internet en verdiep je in wat voorbeelden. Ze geven je inspiratie alsook een idee van de verschillende mogelijkheden.

Sommigen, zoals ikzelf, tekenen eerst wireframes met de hand. Anderen gebruiken dan weer meteen software zoals Invision, Axure of Balsamiq. Hoe je het doet maakt niet zoveel uit. Wat wel belangrijk is, is dat je bij het maken van wireframes een aantal zaken in het achterhoofd houdt:

  • Getekende wireframes, met pen en papier of op een whiteboard, zijn het gemakkelijkst aanpasbaar, zo win je heel wat tijd. Vooral in de vroege stadia van het designproces is dit belangrijk, om snel op de verzamelde feedback in te spelen.
  • Daarnaast zijn geschetste wireframes minder arbeidsintensief dan digitale exemplaren, dat scheelt in de prijs.
  • Wireframes die met software worden getekend, hebben het voordeel dat je de aanpassingen en beslissingen beter kan opvolgen, van elke versie kan je immers een kopie opslaan.

Om van de voordelen van beide systemen te genieten, kies ik bij een eerste versie steeds een handgetekende wireframe. Om die in een latere fase, na de eerste feedbackrondes, om te zetten in een gedetailleerdere digitale versie. Hiervoor gebruik ik meestal Axure, maar er zijn verschillende programma’s of online apps om deze taak tot een goed einde te brengen.

Stap 4: werk met blokken, vermijd details.

Werk met blokken. Waarom? Blokken bieden duidelijkheid en laten toe om snel een pagina te vullen. Daarnaast zorgen ze ervoor dat je jezelf niet laat afleiden door de details. Als je zoals ik wireframes graag met de hand tekent, investeer je in een goede stift. Werk je met een programma? Houd dan even rekening met volgende guidelines:

  • Gebruik basiskleuren: bv. wit, zwart en enkele grijswaarden.
  • Gebruik maximaal twee generische fonts, misschien een schreefloos en een lettertype met schreef. Hiërarchie creëer je aan de hand van fontgroottes en stijlen als vet en cursief.
  • Vermijd flashy grafische elementen en foto’s. Gebruik daarom simpele blokken met een kruis “X” door het midden om weer te geven dat hier een afbeelding wordt geplaatst. Je kan hetzelfde doen voor video’s, maar plaats dan midden in het blok een driehoek als play-knop

Als alle blokken duidelijk gedefinieerd zijn, is het tijd om alles op te vullen met details. Ik werk steeds van boven naar onder en van links naar rechts.

Stap 5: van wireframe, naar mock-up tot prototype.

Je wireframe is af, hoe groeit dit tot een afgewerkt product? Wireframes zijn het skelet, de basis van een digitaal product. Ze geven je een algemeen idee van de lay-out en de constructie. Streef er wel naar om zo vroeg mogelijk in het proces ook inhoud te voorzien. Lorum Ipsum is mogelijk, maar steeds een tijdelijke oplossing die je ontwerp geen enkele eer aan doet. Als je met de feitelijke inhoud kan werken, merk je meteen of alles tot zijn recht komt.

De volgende stap in het proces is een “high-fidelity” mock-up. Mock-ups zijn een visuele weergave van je product waarin je design en andere visuele beslissingen versterkt door variaties te testen en je product een karakter te geven.
De laatste stap voordat je jouw ontwerp aan een ontwikkelaar overhandigt, is een prototype maken, de meest functionele testversie van je product. Een prototype brengt je wireframes of mock-ups tot leven. Je voegt interacties toe en kan testen zoals je eindgebruiker het product ervaart. Dit is ook het laatste moment om kleine aanpassingen door te voeren.

Wireframes zijn de eerste stap in het proces om een goed prototype en later een product te bouwen. Ze helpen je bij het behouden van focus om alle elementen duidelijk te plaatsen en de koers te bepalen bij de creatie van een eindproduct.

Wat nu?

Ga zelf aan de slag en laat me weten hoe het is gegaan! Heb je zelf je eerste project voltooid, hoe was de ervaring? Wat waren de grootste obstakels? Je favoriete onderdeel van het project? Welke tools heb je gebruikt om je wireframes te maken?

Ik luister graag naar jouw ervaringen!
Ben je eerder nog wat terughoudend? Onze UX-experten helpen je graag verder bij het conceptualiseren van je product.
 

Wil je meer weten rond wireframing en user experience?
Aarzel niet om ons te contacteren!

 
Jeroen Pets
Jeroen Pets
Managing partner van Continuous en UX-expert
Contacteer ons