Hoe maak je een Wireframe?

Een Wireframe is een vereenvoudigde ontwerpweergave die drie eenvoudige maar exacte doelen dient:

1. Presentatie van de informatie die we op een pagina moeten weergegeven.
2. De Wireframe geeft een overzicht van de structuur en de lay-out van de pagina.
3. Geeft bovendien de algemene richting en beschrijving van de gebruikersinterface weer.

Net als de blauwdruk van een gebouw, beschrijft een Wireframe de details duidelijk en specifiek terwijl het de ontwikkelaars een overzicht van het project geeft.

Wireframes zijn een essentiële stap bij het vertalen van een software idee naar realiteit. Of je nu nieuw bent in User Experience design bent of je bent er al jaren mee bezig, wireframes is iets waar van je moet weten.

Hoe weet je wat je moet doen als je het nog nooit eerder hebt gedaan? Op welk moment maak je een Wireframe en welke stappen moet je nemen? Wat is het verschil tussen een schets en een Wireframe? Hoe zit het met mockups of prototypes? Dit artikel helpt je op weg.

Wat is een Wireframe?

Een Wireframe is de middenweg tussen pen-en-papierschetsen en ons eerste prototype. Het helpt bovendien bij het plannen van de lay-out en interactiepatronen van onze gebruikers. Hierbij maken we geen gebruik van afleidende details zoals kleuren of kopieën. De voorgestelde user journey maken we eveneens duidelijk zonder kleur, arcering of mooie menu’s.

Een Wireframe is snel, goedkoop en misschien het belangrijkste, vergankelijk. Wireframes zijn bedoeld om te evolueren naarmate we meer informatie verzamelen via gebruikersonderzoek of input van belanghebbenden.

Vergeleken met een high-fidelity mockup of prototype, is het verzamelen van feedback met een Wireframe veel belangrijker dan onderzoek naar gebruikspatronen of user journeys. Bij een Wireframe besteden we meer aandacht aan functionaliteit en user experiance dan aan de esthetische kenmerken van de elementen op het scherm.

Wireframes fungeren als een gemeenschappelijke taal tussen ontwerpers, gebruikers, belanghebbenden en ontwikkelaars. Ze zijn complex genoeg om iedereen te informeren, maar eenvoudig genoeg om niet vast te zitten aan te veel details of ontwerptaal. 

Wat nemen we niet op in een Wireframe?

De kern van een goed Wireframe is eenvoud. Het enige wat we namelijk hoeven te doen, is te laten zien hoe elementen op de pagina zijn ingedeeld en hoe de site-navigatie zou moeten werken. We kunnen later wel fraaie afbeeldingen en flitsende lettertypen toevoegen. Nu leiden dit soort dingen alleen nog maar af.

Houd deze richtlijnen in gedachten:

• Gebruik geen kleuren maar grijswaarden maar wit, zwart en de grijstinten daartussen.
• Gebruik maximaal twee generieke lettertypen, misschien één serif en één sans-serif. Het tonen van de hiërarchie van informatie door middel van het lettertype kan nog steeds worden weergegeven door de grootte van het lettertype te wijzigen en of het is gestileerd (vetgedrukt, cursief, enz.).
• Vermijd ook flitsende graphics en afbeeldingen. Probeer in plaats daarvan eenvoudige rechthoeken en vierkanten als tijdelijke aanduidingen met een “x” door het midden van het vak om te laten zien waar de afbeelding wordt geplaatst.

Van een Wireframe naar een gereed product

Na de schetsen zijn er vaak veel stappen tussen het begin en einde van het productontwerpproces. Laten we nog een paar termen bekijken die we kunnen tegenkomen:

• Wireframes dienen als het skelet van een software idee. Ze geven ons een algemeen idee van de indeling en constructie. Naast het ontwerp is de content nog meer bepalend voor de kracht van het idee. Probeer daarom de content zo vroeg mogelijk in het proces in beeld te hebben. Lorem ipsum doet namelijk nooit recht aan ons programmaontwerp. Het is handig om de eigenlijke content te hebben om ervoor te zorgen dat de informatie door het systeem loopt zoals wij dat voor ogen hebben.
• De volgende stap in het proces is een hifi – mockup. Mockups zijn een meer visuele weergave van ons software idee. Een mockup is het deel waar we onze visuele beslissingen nemen door variaties te testen en ons product een bepaald karakter te geven.
• De laatste stap voordat we ons ontwerp aan de ontwikkelaars overhandigen, is het prototype. Een prototype maken is als het aankleden van je model en het geschikt maken voor het publiek. Het is niet de definitieve versie, maar het is acceptabel om aan andere mensen te laten zien. Op dit punt hoeven we alleen nog maar kleine aanpassingen te doen voor dat we ons model in echte software laten omzetten.

Onthoud dat een Wireframe pas de eerste stap zijn naar een prototype. Terwijl prototypes bedoeld zijn als een redelijk functionele versie van ons product, helpen wireframes ons bij de plaatsing van content en het uitzetten van een koers naar een functionerend prototype.

Wireframes gebruiken in ons ontwerpproces

UX-ontwerpers benaderen wireframing op verschillende manieren. Sommigen beginnen graag met de hand te schetsen, terwijl anderen graag apps of tools gebruiken die iets technischer zijn. De beslissing om een Wireframe met de hand of met een computer te maken is meer gerelateerd aan welke benadering de specifieke situatie vereist in plaats van de voorkeur van de ontwerper. Deze specifieke situaties kunnen zijn:

• Wat zijn de beoogde gebruikers- en bedrijfsdoelen bij interactie met deze
  pagina?
• Hoe kan de inhoud precies worden georganiseerd om deze doelen te
  ondersteunen?
• Waar moeten onze hoofdboodschap en logo komen te staan?
• Wat moet de gebruiker als eerste zien wanneer hij op de pagina aankomt?
• Waar is de ‘call to action’?
• Wat verwacht de gebruiker op bepaalde delen van de pagina?

Ons Wireframe moet een visuele gids zijn voor het kader van onze site en hoe je hier op kunt navigeren. Uiterlijk en visuele aantrekkingskracht spelen in dit stadium geen rol. Onze grootste zorg met een Wireframe is om onze content op een intuïtieve en natuurlijke manier te presenteren op een manier die vertrouwd overkomt bij gebruikers van dit soort diensten. Het is onze missie is om het voor onze gebruikers gemakkelijker te maken om hun doelen te bereiken (of om door te gaan met onze Call-to-Action). Door onze informatie op deze manier te presenteren, stemt we de zakelijke doelstellingen van onze software af op de behoeften van onze gebruikers. Dat kan allemaal door wat lijnen op papier te zetten.

Discussieer mee op LinkedIn.