Wat is wireframing?

Als je ooit een website of app hebt geprobeerd te ontwerpen zonder een wireframe, dan weet je waarom het wireframing-proces zo belangrijk is. Zonder wireframes, hoe kun je dan samen met je team visualiseren wat je probeert te maken? Hoe bepaal je gebruikersstromen, of weet je welke content op welke schermen moet komen?

“Het is frustrerend als mensen een reactie geven op visuele details terwijl je eigenlijk behoefte hebt aan feedback op de hoofdlijnen, zoals 'Is dit het belangrijkste element?'” zegt Tom Lowry, Directeur Advocacy bij Figma. Uitstekend product- en webontwerp begint met een slim wireframe-ontwerp. Lees verder om elke fase van wireframing te beheersen met Figma's pro-tips en wireframing-tools.

Wat is een wireframe?

Wireframes zijn eenvoudige blauwdrukken die teams helpen om op één lijn te komen, waardoor UX-ontwerpgesprekken gefocust en constructief blijven. Zie je wireframe als het raamwerk van je app, website of ander eindproduct. Je wireframe laat het ontwerpteam en stakeholders de basisstructuur zien van essentiële webpagina's, componenten en functies, zoals:

• Schermindeling
• Navigatiebalken
• Componenten van UX- en UI-ontwerp
• Interactieve elementen

In de beginfase gebruiken low-fidelity wireframes lorem-ipsumteksten en eenvoudige vakken als placeholder voor afbeeldingen en video’s. Dit helpt het ontwerpteam, copywriters en andere teamleden om zich te concentreren op basisfunctionaliteit om samen de juiste richting op te gaan.

Beginnen met een eenvoudig wireframe-ontwerp geeft UI- en UX-ontwerpers ook ruimte om aanpassingen te doen. Ze kunnen vroegtijdige feedback verzamelen via gebruikerstests op de belangrijkste UX/UI-elementen, zonder gebruikers af te leiden met visuele details. Ontwerpteams testen verschillende concepten, gebruikersstromen en sjablonen, terwijl ze toewerken naar de beste gebruikerservaring.

3 soorten wireframe-ontwerpen

De UX-ontwerp mogelijkheden lijken eindeloos, maar de meeste wireframe-ontwerpen kun je verdelen in drie basisniveaus. Tijdens het ontwikkelproces werk je mogelijk met alle drie de soorten wireframes.

1. Low-fidelity wireframes zijn basiswireframes die zich richten op lay-out, navigatie en informatiearchitectuur. Ze laten zien hoe de interface eruit zal zien en maken gebruikersstromen inzichtelijk met belangrijke UI-ontwerpelementen. Fysieke Whiteboard-sketches kunnen bruikbaar zijn in de vroege fasen van wireframing, maar zijn niet altijd makkelijk te delen, op te slaan of te bewerken. Met Figma's online wireframing-tool kun je snel low-fidelity wireframes maken, delen en aanpassen.
2. Mid-fidelity wireframes helpen ontwerpers om het uiteindelijke ontwerp te aan te passen en vorm te geven. Ontwerpteams kunnen aantekeningen en content toevoegen terwijl ze verschillende benaderingen testen van gebruikersstromen en UI-ontwerpelementen, waarbij ze de kernfunctionaliteit en belangrijke interacties in kaart brengen. Dit helpt teams om een definitief raamwerk te maken voor het wireframe-ontwerp vóórdat de visuele componenten worden toegevoegd.
3. High-fidelity wireframes lijken op vroege productmodellen, met interactieve en visuele ontwerpelementen, maar zonder de functionaliteit van low-fidelity prototypes. In deze fase van het ontwerpproces kun je merkelementen zoals lettertypes, kleuren en logo’s toevoegen. Op die manier kun je de look-and-feel van het eindproduct testen met gebruikers.

Wanneer kun je wireframes overslaan

Veel ontwerpteams gaan ervan uit dat ze moeten beginnen met een low-fidelity wireframes om van daaruit verder te bouwen. Dat is logisch wanneer je nieuwe productconcepten verkent, zodat je kunt afstemmen op belangrijke componenten, het ontwerp kunt aanpassen en later visuele ontwerpdetails kunt toevoegen. Maar volgens Tom is er soms een goede reden om direct met high-fidelity wireframe-ontwerp te beginnen.

"Als je een vastgesteld ontwerpsysteem hebt, en het ontwerp dat je onderzoekt lijkt op andere bestaande ontwerpen, zullen gesprekken waarschijnlijk niet te veel worden beïnvloed door visuele ontwerpelementen," legt Tom uit. "In zulke gevallen kan het verkennen van een ontwerpidee op een hoger niveau net zo snel en net zo effectief zijn."

7 best practices voor het ontwerpen van wireframes

Een effectieve wireframe kan zo eenvoudig zijn als een sketch op een servet of zo complex als een statisch productmodel. Door deze best practices tijdens het ontwerpen van wireframes toe te passen, kun je sneller de richting met je team afstemmen en de beste aanpak bepalen.

1.Bepaal je ontwerpdoelen.

Voordat je begint met sketches of experimenteren met wireframe-sjablonen, benoem je eerst je ontwerpdoelen. Denk na over de behoeften van gebruikers en welke acties je wilt dat zij ondernemen om deze te doelen bereiken. Misschien kun je de gebruiker helpen een probleem op te lossen door een nuttig product te kopen of door het aanmelden op een educatieve nieuwsbrief. Zorg ervoor dat je ontwerpteam op één lijn zit met dit doel, zodat je wireframe-ontwerpen daaraan bijdragen.

2. Kies de juiste afmeting voor je wireframe.

Je wireframes moeten afgestemd zijn op de grootte van het scherm dat je doelgroep gebruikt. Een website of applicatie ziet er natuurlijk er anders uit op een laptop dan op een mobiel apparaat. De standaard wireframeformaten voor verschillende schermtypes zijn daarom als volgt:

• Mobiel: 393 pixels breed bij 852 pixels hoog
• 11" Tablet: 834 pixels breed bij 1194 pixels hoog
• Desktop: 1440 pixels breed bij 1024 pixels hoog

3. Houd je wireframe-ontwerp eenvoudig.

Begin je wireframe met grijstinten, beperk het aantal lettertypen, en vervang afbeeldingen door vakken. Zorg ervoor dat je blauwdruk voldoet aan de basisvereisten van de gebruiker. Als je je te veel focust op details zoals spelfouten of kleurenschema's, kun je een fout in de gebruikerservaring over het hoofd zien. Bij eenvoudige ontwerpen in een vroeg stadium kunnen verkorte voorbeelden of kaarten volstaan. Maar voor contentrijke interfaces raadt Tom aan om echte content te gebruiken in plaats van “lorem ipsum” als placeholdertekst. "Wanneer je informatiearchitectuur toepast op een gebruikersinterface, heeft het weinig zin om menu-items op te sommen met 1-2-3-4," legt hij uit. "Dan wil je echte content gebruiken."

4. Behoud ontwerpconsistentie.

Wireframes moeten niet afleiden of voor verwarring zorgen. Vergelijkbare componenten moeten er hetzelfde uitzien in alle wireframes, zodat ze gemakkelijk te begrijpen, aan te passen en te coderen zijn. Zelfs als er een kleine variatie is tussen twee gerelateerde componenten, kunnen verschillende ontwerpen onzekerheid creëren voor ontwikkelaars over pagina's en aanpassingen.

5. Maak de navigatie duidelijk.

Je gebruikersstromen moeten vloeiend en intuïtief zijn. Terwijl je informatiearchitectuur toepast op je wireframe, denk dan ook na over waar je navigatie en wegwijzers nodig hebt om de gebruiker te ondersteunen. Als gebruikers een sitemap moeten raadplegen, moeten je navigatie en informatiearchitectuur worden verbeterd.

6. Hecht niet te veel aan je wireframe.

Zelfs een high-fidelity wireframe is nog steeds een concept dat aangepast moet worden voordat het een eindproduct wordt. Zodra je ontwerpteam het wireframe-ontwerp heeft voltooid, is het tijd om samen te werken met ontwikkelaars en andere creatieve teamleden om functionaliteit toe te voegen.

7. Benut wireframing-tools.

Ontwerpteams hebben wireframes nodig die ze kunnen delen, opslaan en online kunnen omzetten in modellen. Figma's wireframe-kit wordt geleverd met drag-and-drop ontwerptools waarmee zowel beginners als professionals eenvoudig aangepaste high-fidelity wireframes kunnen maken.

Wireframe-ontwerp checklist

Het wireframing-proces helpt je plannen, bouwen en samenwerken tijdens de ontwerp- en ontwikkelingscycli/ Maar hoe weet je wanneer je klaar bent? Zodra je deze actiepunten van je wireframing-takenlijst kunt afstrepen, is je wireframe klaar voor modellen en prototypen met een hoge mate van detail.

Zodra je wireframe klaar is, kijk dan terug naar je oorspronkelijke hoeveelheid werk. Nu je je eindproduct hebt gemaakt, kun je mogelijk je schatting misschien verfijnen. Zelfs als het maar een sketch met placeholders is, moet je wireframe laten zien:

• Welke schermen essentieel zijn om aan de behoefte van de gebruiker te voldoen
• Gebruikersstroom door conversietrechters
• Bruikbaarheidsoverwegingen, inclusief navigatie en organisatie
• Hoofddoelen en gebruikersstromen voor elk scherm
• Belangrijke UI ontwerpelementen, plus inhoud en interactieve functies op elk scherm
• Hoe ontwerpcomponenten samenkomen om schermsjablonen te vormen

Wanneer je ontwerpteam begint met het ontwerpproces, weet je misschien nog niet precies hoe je eindproduct moet functioneren of eruit moet zien. Beginners hebben soms de neiging om wireframing over te slaan en zich te baseren op bestaande modellen voor hun ontwerp, maar dat kan resulteren in een weinig inspirerende en onpraktische gebruikerservaring. Wireframes richten de creatieve aandacht op de behoeften van de gebruiker en helpen teams gedurende het ontwerp- en ontwikkelingsproces op één lijn te blijven. "Het wireframe geeft mensen een vroeg inzicht in het project, voordat je veel tijd hebt geïnvesteerd in het perfectioneren van iets,” zegt Tom. “Wanneer je meer mensen in de organisatie vroeg op elkaar kunt afstemmen, bespaart je later tijd.”

De kans is groot dat je eindproduct er heel anders uit zal zien dan het eerste wireframe, en dat is een positieve zaak! Wireframing geeft je de vrijheid om te experimenteren, wijzigingen aan te brengen, nieuwe concepten uit te proberen en risico's te nemen. Met een raamwerk, kun je eenvoudig workflows en ontwerpelementen aanpassen, die later in het ontwerpproces moeilijk te wijzigen zouden zijn. Je uiteindelijke ontwerp zal er beter uitzien en aanvoelen, dankzij het trial-and-error-proces van wireframing.

Wireframes stellen bruikbaarheid voorop, en richten de creatieve aandacht op elementen die essentieel zijn voor de gebruikerservaring, waaronder:

• Gebruikersstromen en scenario's
• UX-ontwerpoplossingen voor mogelijke knelpunten
• Navigatie- en wegwijzerfunctionaliteit
• Informatiestructuur ingebouwd in schermsjablonen

Hoe weet je of je wireframe geslaagd is

Het beoordelen van het succes van je wireframe is lastig zonder kwantitatieve gegevens, maar Tom zegt dat er verschillende kwalitatieve meetpunten zijn die je kunt toepassen. Hij raadt aan om gemodereerde gebruikerstests uit te voeren om te zien of gebruikers zonder instructies door de gebruikerservaring kunnen navigeren, in plaats van dat ze "vastlopen of niet weten wat ze daarna moeten doen.”

Een ander teken dat een wireframe succesvol is, is de afstemming met stakeholders. “Als je uit een creatieve sessie komt met het gevoel dat je de feedback hebt gekregen die je wilde, en dat je vol vertrouwen de volgende stappen kunt zetten, dan zou ik zeggen dat je wireframe echt succesvol was,” zegt Tom.

Maar als stakeholders zich richten op kleine details of esthetische aspecten in plaats van op kernbehoeften van gebruiker, zegt hij, "dat kan een indicatie zijn dat je de wireframe minder gedetailleerd moet maken. Verwijder een deel van de verfijning van de artefacten die je deelt, totdat je de feedback krijgt die je nodig hebt.”

Maak wireframe-ontwerpen met Figma en pas ze aan

Teams hebben wireframes nodig om samen UX/UI-ontwerpen te verbinden en te brainstormen, en Figma's wireframe-kit helpt je hierbij op weg. Je kunt ideeën valideren en workflows versnellen op Figma's collaboratieve ontwerpplatform, en webdesignprojecten een kickstart geven met Figma's gratis wireframing-kit.

Voor inzichten en inspiratie raadt Tom aan contact te maken met de Figma-community. “Onze community deelt een overvloed aan wireframe-ideeën en UI-sjablonen,” zegt hij.