Het verschil tussen wireframes en mockups

Allereerst is het belangrijk dat je het verschil weet tussen wireframes en mockups. Je gebruikt de twee namelijk in verschillende stadia van je designproces.

Een ‘simpel’ overzicht van pagina’s, zonder design-elementen zoals kleur, lettertypen of afbeeldingen, noem je een wireframe. Hiermee bepaal je de structuur van een website of app. Dit is de eerste stap in je designproces: je kunt nog alle kanten op, er ligt nog niks vast. Bij een mockup ga je een stap verder, je visualiseert echt. Het eindresultaat is het visual design van je website of app, het liefst klikbaar in een tool zoals Sketch of Figma. Een mockup geeft jou (en je klant) een realistisch beeld van de website of app.

 

 

Wireframes managen verwachtingen en besparen je geld

Maar waarom is het nou zo essentieel om met wireframes te beginnen? Heel simpel: met wireframes manage je de verwachtingen van je klant en bespaar je tijd en geld. Als je start met wireframes, kun je in een vroeg stadium al feedback vragen bij je klant. Je kunt dan snel en makkelijk schakelen en eventuele veranderingen aanbrengen, zonder dat je al veel tijd hebt gestoken in het visual design.

Je denkt misschien: maar hé, dan steek ik er toch juist meer tijd in? Klopt, maar je bespaart ook tijd en geld, omdat je mogelijke problemen al tackelt in de testfase. Als je nog problemen ondervindt ná de oplevering van je final site, moet je de developer inschakelen om het weer open te breken: dat kost je veel geld.

 

Zo werkt het ideale proces: van wireframe tot eindproduct

Je start dus met het maken van wireframes: je schetst grof hoe de website of app eruit komt te zien. Je wireframes kun je in een vroeg stadium al toetsen bij je klant. Liggen jullie op één lijn? Dan kun je door. Zo niet, dan kun je je wireframes makkelijk aanpassen naar de wens van je klant. Na goedkeuring kun je aan de slag met een mockup. Akkoord? Dan maak je een prototype om je uiteindelijke design te testen bij de doelgroep. Alle stappen succesvol doorstaan en de laatste details gefinetuned? Ready to go live!

In deze video wordt de toegevoegde waarde van het ideale proces nog eens duidelijk toegelicht:

 

 

Meer leren over wireframes en mockups maken?

Dinsdag 13 april vertelt trainer en visual designer Marlon Augustijn je meer over slimme designkeuzes voor je website en mockups in het voortraject van je ontwerp. >> Schrijf je op tijd in

 

Op de hoogte blijven van nieuwe trainingen en events?

Schrijf je in voor de nieuwsbrief!

Bedankt!

Je bent nu ingeschreven op onze nieuwsbrief.

Daarom kies je Competence Factory

What you see is what you pay

What you see is
what you pay

Je betaalt gewoon de prijs die je op de website ziet. Nooit bijkomende kosten.

Transparant over locatie

Transparant over locatie

Trainingen zijn altijd in Utrecht, pal naast het Centraal Station.

Les in creatieve spaces

Les in creatieve spaces

Voel je thuis en leef je uit. Teken je ideeën gerust uit op de white walls.

Top 10-trainingen gaan altijd door

Top 10-trainingen gaan altijd door

Lekker snel starten, en je wordt nooit omgeboekt naar een andere dag.



Bedankt!

Je bent nu ingeschreven op onze nieuwsbrief.