PINGDOM_CANARY_STRING
Lucidspark LogoWat zijn wireframes?
    Gratis registreren
Diagram

Wat zijn wireframes?

Wat zijn uw behoeften op het gebied van whiteboards?

Ik wil mijn eigen whiteboard maken in Lucidspark.

Inhoud

Dit artikel leest u in 14 minuten

Wilt u zelf een whiteboard maken? Probeer Lucidspark. Het is snel, gemakkelijk en helemaal gratis.

Gratis registreren

Wat is een wireframe?

Beeld u in dat iemand u heeft aangenomen om een huis te bouwen. Wat is uw eerste stap? U moet een plattegrond ontwerpen, iets om de inrichting vast te leggen voor u daadwerkelijk gaat bouwen. Het is beter om een blauwdruk van het ontwerp aan te passen dan later het hele huis te verbouwen. 

Maar u bent hier niet om een huis te leren bouwen: u bouwt een app, of misschien een website. Het proces is echter niet helemaal verschillend: je bouwt ook nooit een app of website zonder er eerst wireframediagrammen voor te maken.

Net als een plattegrond is een wireframe een eenvoudige tekening gericht op structuur en indeling. U kunt een wireframe beschouwen als het ' geraamte' van uw website of app.

Bij het maken van wireframes gaat het om organisatie en structuur, wat waar hoort. Stijldetails komen pas later. Een wireframe bestaat uit basisvormen voor de visuele elementen van een pagina, zoals een zoekbalk, headerafbeeldingen en andere containers.

Wireframes maken kan moeilijk lijken, maar deze activiteit is niet uitsluitend voorbehouden aan UX-specialisten. U heeft er geen gespecialiseerde software of uitgebreide ervaring voor nodig. Veel wireframes beginnen als schetsen op een notitieblok of zelfs een servet, wat er ook beschikbaar is wanneer men inspiratie heeft. Om het meeste uit uw wireframes te halen, moeten ze echter meer worden dan schetsen. Naarmate uw eerste idee zich ontwikkelt, kunt u uw diagrammen opnieuw ontwerpen met behulp van een digitaal platform voor wireframes. Hiermee kunt u details toevoegen en de gebruikerservaring simuleren. De meest functionele wireframes laten zowel indeling van de pagina als gebruikersstroom, informatie-architectuur en beoogd gebruikersgedrag zien.

Wireframes hebben twee grote voordelen: alle belanghebbenden krijgen een duidelijke visie op het ontwerp van uw product, en uw ontwerp blijft gebruikersgericht.

Soorten wireframes

Wireframes worden meestal opgedeeld in drie categorieën: low-fidelity, mid-fidelity en high-fidelity. De fidelity van een wireframe verwijst naar hoeveel details het bevat. Low-fidelity wireframes zijn ruwe lijnen die voornamelijk gericht zijn op lay-out, terwijl high-fidelity wireframes vultekst bevatten en bepaalde functionaliteit voor de gebruikers nabootsen. 
Laten we deze verschillen iets gedetailleerder bekijken en een use case voor elk niveau van wireframe ontdekken.

Low-fidelity wireframes

low-fidelity wireframe

Een low-fidelity wireframe maken is meestal een van de eerste stappen in het ontwerpproces. U kunt deze diagrammen beschouwen als ruwe ontwerpen, een snelle manier om de basislay-out van uw app of website te visualiseren. Als u een low-fidelity wireframe maakt, houd het dan eenvoudig: voeg enkel essentiële tekst en basisvormen toe. Laat afbeeldingen, vultekst en pictogrammen weg: vervang ze eenvoudigweg door een vak, een 'X' enzovoort.

Opgelet: snel betekent niet slordig. Wie wil zijn manager een smerig servet voorleggen? Door een digitaal platform voor wireframes te gebruiken zorgt u ervoor dat uw wireframes netjes en professioneel blijven, en kunt u ook gemakkelijk samenwerken. U hoeft geen kopieën te maken of foto's te nemen van een whiteboard, maar kunt gewoon op 'delen' klikken.

Mid-fidelity wireframes

mid-fidelity wireframes

Zodra u uw ideeën hebt vastgelegd met low-fidelity wireframes, is het tijd om ze verder uit te werken. Wanneer u een mid-fidelity wireframe maakt, moet uw focus liggen op schaal en proportie: hoe groot is elk element in verhouding tot het venster of scherm in zijn geheel? Of tot de andere elementen? Stijl komt nog steeds minimaal aan bod. Als u wilt kunt u wel een paar generieke pictogrammen en belangrijke tekst toevoegen.

Low-fidelity wireframes hebben onder andere de taak om belanghebbenden bij het proces te betrekken, maar daar houdt hun functionaliteit bij op. Een mid-fidelity wireframe werkt die initiële schetsen uit tot een strakkere, meer gedetailleerde vorm. Meestal worden ze vroeg in het ontwerpproces gemaakt.

Sommige digitale platforms voor het maken van wireframes bieden u de mogelijkheid om gebruikersfunctionaliteit toe te voegen aan uw diagrammen. Een mid-fidelity wireframe moet de kijker een idee geven van de gebruikersstroom. Als een knop de lay-out van een pagina verandert of naar een nieuwe pagina doorverwijst, koppel deze dan aan het wireframe voor dit nieuwe scherm.

High-fidelity wireframes

Bij high-fidelity wireframes draait alles om precisie. Elk element in het diagram moet zich exact op de juiste plaats bevinden, tot aan de kleinste pixel toe. Waar mogelijk moet u de afbeeldingen en tekst opnemen die in het eindproduct gebruikt zullen worden. Menu's en andere klikbare aspecten van de pagina moeten functioneel zijn en evenveel details bevatten.

Gelet op het grote aantal details in een high-fidelity wireframe, worden deze diagrammen meestal door een UX-ontwerper gemaakt. Waar de andere twee typen wireframes vooral niet-ontwerpers helpen om hun ideeën duidelijk te maken aan ontwerpers, doen high-fidelity wireframes net het omgekeerde: ontwerpers gebruiken ze om andere belanghebbenden de mogelijkheid te geven om het eindontwerp goed te keuren.

Wireframes, en dan vooral high-fidelity wireframes, worden vaak verward met mockupdiagrammen. Als u niet zeker weet wat het verschil is tussen deze twee diagramtypen, dan vindt u in het volgende onderdeel informatie over hun respectieve functies en toepassingen.

Wireframes vs mockups

Als wireframes plattegronden zijn voor apps en websites, dan is een mockup een 3D-model in kleur en op schaal. Net zoals u nooit een plattegrond zou verwarren met een afgewerkt huis, zou u ook nooit een wireframe, zelfs een high-fidelity exemplaar, verwarren met het afgewerkte product. En dat is goed! Wireframes zijn niet bedoeld om visueel verbluffend te zijn: ze worden vooral gebruikt om structuur en functionaliteit te communiceren.

Mockups daarentegen worden gebruikt om het eindproduct zo nauwkeurig mogelijk te modelleren. Lettertypen, kleuren, afbeeldingen: een mockup bevat alle stijlelementen, maar niet de functionaliteit van een wireframe.

Zoals hierboven beschreven, worden wireframes in elk stadium van het ontwerpproces gebruikt en worden ze vaak gemaakt door mensen van buiten het ontwerpteam. Wireframes helpen belanghebbenden om structurele ontwerpfouten op te lossen en het eens te worden over de werking van de app of website. De meeste esthetische elementen worden weggelaten.

Mockups richten zich op hoe het product eruit zal zien en worden meestal gemaakt door ontwerpers nadat het wireframeproces is voltooid. Zodra de mockups van een product goedgekeurd zijn door de nodige belanghebbenden, kan men beginnen met de ontwikkeling van het project.

Wat is wireframing in UX?

Iedereen kan een wireframe maken. Wireframes worden echter vooral gebruikt door UX-ontwerpers - en in dit onderdeel leggen we uit waarom.

Zoals de functietitel doet vermoeden, bepalen UX-ontwerpers (of ontwerpers van de gebruikerservaring) hoe de interactie tussen een product en de gebruikers verloopt. Voor apps en websites betekent dit dat UX-ontwerpers verantwoordelijk zijn voor het ontwerp van de interface. Met wireframes kunnen UX-ontwerpers de gebruikersinterface nabootsen en het ontwerp verfijnen voor ze echt gaan programmeren.

Hoe ziet dit er in de praktijk uit? Wanneer een UX-team een webinterface ontwerpt, houden ze rekening met het gebruikersgedrag: hoe navigeren gebruikers door de pagina? Zijn er pop-ups? Vervolgkeuzelijsten? Zo ja, waar bevinden deze elementen zich?

Door wireframes te maken voor een website, kunnen UX-ontwerpers een concept maken van zowel de lay-out van de website als van de gebruikersstroom. Objecten binnen een wireframe kunnen klikbaar worden gemaakt, om zo de echte gebruikservaring na te bootsen. Ontwerpers kunnen vervolgens deze wireframes delen met andere teams om feedback te krijgen. UX-ontwerpers gebruiken app-wireframes op een vergelijkbare manier.

Gratis registreren

Wanneer beginnen met wireframing

Als het op wireframing aankomt, moet u daar liefst zo vroeg mogelijk mee beginnen. (Binnen het redelijke, natuurlijk.) Voor verschillende projecten zijn verschillende workflows nodig, maar in de regel moet u uw eerste wireframe uitwerken in de verkennings- of planningsfase van de projectlevenscyclus.

Als u een wireframe begint te maken tijdens de verkenningsfase, kies dan voor low-fidelity wireframes. Tijdens de verkenningsfase kunt u experimenteren: u heeft een idee voor een website of app, maar weet nog niet precies hoe die eruit moet zien. Low-fidelity wireframes kunnen snel en eenvoudig ontworpen worden, en zijn daarom ideaal als brainstormtool. Schrijf uw ideeën op, stuur ze naar de andere belanghebbenden voor feedback en keer dan terug naar de tekentafel.

Wanneer uw project in de planningsfase terechtkomt, kunt u beginnen met het maken van mid- en high-fidelity wireframes. Tijdens de planningsfase worden ontwerpen concreet, en heeft u robuuste wireframes nodig voor u verder kunt gaan naar de volgende fase: uitvoering.

Naarmate het project zich in die eerste twee fases verder ontwikkelt, worden uw wireframes complexer en gedetailleerder. Tegen de tijd dat u de ontwerpen overhandigt aan het ontwikkelingsteam om de code te schrijven (de uitvoeringsfase), luidt dit meestal het einde van het wireframeproces in.

Elementen van een wireframe

Wireframes zien er aan de oppervlakte eenvoudig uit: esthetisch gezien stellen ze niet veel voor. Dit verklaart deels waarom ze zo doeltreffend zijn. Bij web- en app-ontwikkeling is het verleidelijk om u in de wereld van lettertypen en kleuren te storten voor u de gebruikerservaring helemaal hebt vastgelegd. Wanneer u wireframes maakt zet u deze afleidingen aan de kant en richt u zich op drie fundamentele aspecten van uw product: informatie-ontwerp, navigatie-ontwerp en interface-ontwerp.

Informatie-ontwerp

Wanneer gebruikers uw app of website gebruiken, nemen ze voortdurend informatie op: wat voor soort website bezoeken ze? Hoe kunnen ze hem gebruiken? Wat is het 'doel' van de site? Het proces is automatisch en grotendeels onbewust. Als ontwerper maakt u deze interactie mogelijk: u kiest hoe u de informatie op een pagina presenteert.

Hoe ziet dit er in de praktijk uit?

Een voorbeeld: als uw website een berichtenservice aanbiedt, dan zullen de meeste gebruikers in één van twee categorieën vallen: terugkerende gebruikers en nieuwe bezoekers. Terugkerende gebruikers willen zich wellicht aanmelden, terwijl nieuwe bezoekers misschien een account willen aanmaken of gewoon meer informatie over uw product of service willen. Op uw startpagina moet u rekening houden met elk type bezoeker en hen voldoende informatie geven om hun respectieve doelen te bereiken. Deze informatie kan bijvoorbeeld gecommuniceerd worden via knoppen: aanmelden, registreren of meer informatie. Informatie-ontwerp gaat over de beslissing welke informatie u opneemt en waar u deze plaatst.

Navigatie-ontwerp

We hebben allemaal weleens veel te lang moeten zoeken naar het menu 'Instellingen' in een of andere app. En we kennen allemaal dat gevoel dat een website ons in een kringetje laat ronddraaien: dat moment waarop u denkt dat de pagina 'Accountgegevens' een klik verwijderd is, om dan weer terug te komen op de startpagina of, nog erger, een pagina met foutmelding 404. Wat we willen zeggen is: we komen voortdurend slecht navigatie-ontwerp tegen.

Zoals de naam al doet vermoeden, bepaalt navigatie-ontwerp de manieren waarop gebruikers door uw app of website navigeren. Vanaf elk scherm kan een gebruiker naar een aantal andere schermen navigeren. Dat weten ze echter niet tot u hen dat vertelt: vervolgkeuzelijsten, klikbare koppelingen en schuifbalken zijn allemaal voorbeelden van visuele elementen waarmee de gebruiker door uw product kan navigeren.

Interface-ontwerp

Interface-ontwerp brengt alles samen: informatie, navigatie en, wel, alle andere delen van uw wireframe. Zowel navigatie-ontwerp als informatie-ontwerp hebben schermcomponenten: knoppen, menu's enzovoort. Interface-ontwerp verwijst naar de manier waarop die elementen zijn opgenomen in de volledige gebruikersinterface, inclusief andere elementen zoals tekstvakken, headerafbeeldingen en zijbalken.

Hoe u een wireframe maakt

Nu u meer over de theorie over wireframes in deze gids te weten bent gekomen, is het tijd om die kennis in de praktijk te brengen. Hier zijn enkele stappen om aan de slag te gaan met wireframes:

1. Teken een plan uit


wireframe

Of u nu wireframes maakt voor een app of voor een website, u kunt van één ding zeker zijn: u zult meer dan één wireframe moeten maken. Bij wireframing gaat het vooral om de gebruikersstroom. Hoe verplaatst de gebruiker zich door uw app? Wilt u dat ze op een bepaalde plek terechtkomen?

Voor u met uw diagrammen begint, is het een goed idee om de mogelijke routes die een gebruiker kan volgen uit te stippelen, waarbij u elk scherm dat ze kunnen tegenkomen in een lijst noteert. Voor elk afzonderlijk scherm heeft u een extra wireframe nodig.

Dit voorbereidende werk lijkt misschien overdreven, maar het is het waard. Als u meteen in het diepe duikt en een wireframe begint te maken zonder een duidelijk idee van de gebruikersstroom te hebben, kan dit tot verwarrende en rommelige diagrammen leiden.

2. Begin door basisvormen toe te voegen


wireframe

Na één of twee grondige planningssessies bent u er klaar voor om met uw ontwerp te beginnen. Begin door een 'frame' voor uw diagram te selecteren. Als u een wireframe voor een app maakt, selecteer dan een vorm vergelijkbaar met het scherm van een mobiel apparaat. Voor een wireframe van een website kiest u een vorm die lijkt op een browservenster. Op de meeste digitale platforms voor wireframes vindt u deze basisframes in de vormbibliotheek.

Voeg vervolgens de grootste elementen van de wireframe toe. Het gaat dan om basisvormen en containers, die gebruikt worden voor items zoals een headerbalk, zijkolom, tekstvak enzovoort. Op dit moment is het nog niet nodig om tekst of afbeeldingen toe te voegen, u legt alleen de algemene lay-out vast.

Herhaal dit proces voor elke wireframe die u moet maken.

3. Voeg knoppen toe en koppel wireframes aanelkaar


wireframe

Zodra u de lay-out van uw wireframes heeft vastgelegd, is het tijd om wat functionaliteit toe te voegen. Op elk scherm in uw product zullen er wellicht verschillende knoppen staan die de gebruiker naar een nieuw scherm leiden. Misschien heeft u deze vormen toegevoegd in de vorige stap, maar als dat niet het geval is, selecteer dan een basisvorm voor elke knop en voeg deze nu toe. U kunt ook tekst toevoegen die op de knop moet worden weergegeven (bijvoorbeeld "start").

Als uw platform voor wireframes de mogelijkheid biedt om koppelingen toe te voegen, koppel elke knop dan aan de wireframe waarnaar de gebruiker moet worden doorgeleid.

Tip: selecteer één lettertype voor uw wireframe. Gebruik vette en cursieve tekst waar nodig, maar bewaar eventuele andere tekststijlen voor de latere mockups en prototypes.

4. Verzamel feedback en bewerk uw wireframe


wireframe

U heeft uren gewerkt aan uw wireframes. De lay-out lijkt goed te zijn, en u heeft ze aan elkaar gekoppeld om een gebruikersstroom na te bootsen. Nu is het tijd om ze te delen met andere belanghebbenden. Er zijn wellicht aspecten van uw wireframes die vatbaar zijn voor verbetering. Daarom is het belangrijk dat ze met een frisse blik worden bekeken voor u meer details gaat toevoegen.

Misschien staat een knop op een vreemde plaats. Of misschien is de menubalk te groot waardoor hij de pagina domineert. Wat de feedback van uw collega's ook is, luister naar hen en houd rekening met hun ideeën: dit is een samenwerkingsproces.

Pas voorgestelde wijzigingen toe als die uw wireframes kunnen verbeteren. Herhaal het proces tot uw ontwerpen zijn goedgekeurd door alle nodige belanghebbenden.

5. Voeg details toe


wireframe

Op dit punt zijn uw diagrammen wellicht mid-fidelity wireframes. Nu het basisontwerp goedgekeurd is, kunt u de details verder uitwerken. Voeg afbeeldingen en tekst toe. Gebruik kleuren om het onderscheid te maken tussen verschillende elementen op de pagina, maar houd het bij grijstinten. Zorg ervoor dat alles de juiste grootte heeft, tot aan de kleinste pixel toe.

6. Deel uw wireframes

Nu heeft u normaal gezien een reeks functionele high-fidelity wireframes. Deel ze met belanghebbenden van het project en relevante teams.


Nederlands
EnglishFrançaisDeutsch日本語PortuguêsEspañolNederlandsPусскийItaliano
PrivacyLegal
© 2021 Lucid Software Inc.