Geschreven door
Profielfoto Joey
Joey Verwey
Profielfoto Joey
Geschreven door
Joey Verwey
Leestijd
3 minuten
Close-up van schetsen op papier

In dit artikel

In digitale projecten spelen wireframes een belangrijke rol in het creëren van draagvlak binnen de organisatie door het snel en visueel kunnen betrekken van belangrijke stakeholders en eindgebruikers.

De digitale projecten waar wij aan meewerken beginnen altijd met het helder krijgen van de klantvraag en het leren kennen van de eindgebruikers. Alle inzichten in dit proces worden verzameld en vastgelegd. Op basis van die informatie wordt de structuur van het digitale product uitgewerkt in wireframes. Vaak wordt het maken van wireframes onderschat of gezien als een overbodige en kostbare stap in het proces. In dit artikel leggen we uit waarom deze 'simpele' schetsen juist heel waardevol zijn in jouw digitale project.

Wat zijn wireframes?

Een wireframe is een functionele weergave van een website of applicatie. Bij het maken van wireframes komt nog geen grafisch design kijken. Je zou het kunnen vergelijken met de blauwdruk van een huis. Je kijkt meer naar de inhoud dan de vorm van het digitale product. Je vindt de volgende details vaak terug in wireframes:

  • Overzicht van de verschillende soorten en type onderdelen
  • Indeling van de navigatie en pagina's
  • Hiërarchie van de content
  • Gebruikersinteracties en routes door de digitale omgeving

Wat zijn de voordelen van wireframes?

Co-creatie met wireframen

Wireframes maken begint letterlijk met pen en papier. Je kunt een onderscheid maken tussen low-fidelity (lo-fi) en high-fidelity (hi-fi) wireframes. Lo-fi wireframes zijn snelle schetsen op papier en hi-fi gedetailleerde digitale wireframes. In veel projecten werken wij eerst in co-creatie met onze klanten de wireframes uit in creatieve sessies. Wireframen is een krachtige en visuele tool om samen met het projectteam snel ideeën en concepten te visualiseren.

Denken in componenten

Wij benaderen digitale oplossingen niet als een verzameling van pagina’s of schermen, maar als een verzameling van losse componenten die samen het grotere geheel vormen. Tijdens het wireframen word je gedwongen om in componenten en elementen te denken. Je voert bijvoorbeeld veel eerder inhoudelijke discussies met elkaar over welk type content op welke plaats moet komen. Voorbeelden van componenten zijn de hoofdnavigatie, een productitem in je webshop, het aanmeldformulier voor de nieuwsbrief of het login gedeelte.

De kloof tussen design en development

We zien het nog te vaak gebeuren dat digitale producten eerst volledig worden ontworpen en vervolgens over de schutting worden gegooid naar development. Naast het feit dat dit vaak overbodige discussies oplevert over elementen in het ontwerp, creëert het ook geen gezonde basis voor samenwerking en betrokkenheid. Veel problemen en onnodige kosten kunnen worden bespaard door development al in de conceptfase van digitale projecten te betrekken bij het wireframen. Bekijk hier ons ontwerpproces.

Snel en makkelijk feedback verzamelen

Wireframes kunnen relatief eenvoudig omgezet worden naar een klikbaar prototype. Dit is handig voor gebruikerstesten en om ideeën te presenteren aan stakeholders en/of projectleden. Op deze manier kun je de gebruiksvriendelijkheid vanaf het begin waarborgen en ontstaat er een hoge betrokkenheid bij het project. Eén van onze favoriete tools voor het eenvoudig maken en delen van klikdemo's is Figma.

Profielfoto Joey
Vergelijkbare artikelen
 
 
Profielfoto Maike Maike Bekkernens
UX design

Designproces: alles over de create fase

Het doel van de create fase is het opleveren van de gevalideerde ontwerpen richting o...

Profielfoto Joey Joey Verwey
UX design

Wat is de achtergrond van ons designproces?

Ons designproces vormt al 10 jaar lang de basis voor elk project. Door de jaren heen...

Profielfoto Maike Maike Bekkernens
UX design

Hoe verloopt een project?

Het is geen geheim dat een goede user experience de nieuwe standaard is. Gebruikers v...

Mock-up van een core model canvas
Profielfoto Maike Maike Bekkernens
Tools & methodes

Core Model Canvas: in 8 stappen naar de kern van je content

Het Core Model Canvas template helpt je eenvoudig te ontdekken welke content niet mag...

Sfeerbeeld van werkende mensen op kantoor
Profielfoto Joey Joey Verwey
UX design

Rekening houden met de privacy van de eindgebruikers in digitale projecten

Met de komst van de AVG wetgeving in 2016 hebben wij ons ontwerpproces aangescherpt m...

Designer maakt wireframes op papier
Profielfoto Kelly Kelly Kroesen
UX design

Wat is Adaptive design?

Rekening houden met de context waarin gebruikers jouw digitale product gebruiken.

Mock-up van een Service Blueprint
Profielfoto Joey Joey Verwey
Tools & methodes

Ontdek kansen in je dienstverlening met een Service Blueprint

Een Service Blueprint is een canvas met daarop een visueel verloop van jouw dienstver...

Kind gebruikt een tablet
Profielfoto Joey Joey Verwey
UX research

Apps ontwerpen voor leerlingen op het basisonderwijs

Wat komt er allemaal kijken bij het ontwerpen van apps voor kinderen?

Mobiele mock-up Stappy applicatie
Profielfoto Jasper Jasper Griepsma
Development

Web, native, hybrid en progressive apps: wat zijn de verschillen?

Je kan het zo gek niet bedenken of er is wel een app voor gemaakt, maar wat is nou he...

Profielfoto Joey Joey Verwey
Tools & methodes

Organiseer en structureer de inhoud van je website met behulp van card sorting.

Card sorting is een onderzoeksmethode die je helpt om de inhoud van je website op een...

Profielfoto Joey Joey Verwey
UX design

Digitale toegankelijkheid voor overheden, hoe zit dat precies?

Sinds 2018 zijn overheidsinstanties wettelijk verplicht de noodzakelijke maatregelen...

Designer schetst een user flow
Profielfoto Maike Maike Bekkernens
Tools & methodes

Zet je gebruiker centraal met user flows voor jouw app of website

De user flow template helpt je om de paden die gebruikers bewandelen bij het gebruik...

Profielfoto Joey Joey Verwey
UX design

Designproces: alles over de strategy fase

In dit artikel leggen we je alles uit over de strategy fase van ons designproces. Wat...

Developer schrijft gebruiksvriendelijke code
Profielfoto Kelly Kelly Kroesen
Tools & methodes

Tips om de digitale toegankelijkheid te verbeteren

In dit artikel vind je handige tools die je helpen om de digitale toegankelijkheid va...

Profielfoto Joey Joey Verwey
UX design

Designproces: alles over de explore fase

In dit artikel leggen we alles uit over de explore fase. Wat is het doel van deze fas...

Studenten werken aan designopdracht
Profielfoto Joey Joey Verwey
UX design

Assessment Week Grafisch Lyceum Utrecht

Studenten van het Grafisch Lyceum gingen aan de slag met een uitdaging voor PostNL.

Profielfoto Jasper Jasper Griepsma
UX design

Designproces: alles over de understand fase

In dit artikel leggen we alles uit over de understand fase. Wat is het doel van deze...

Close-up van schetsen op papier
Profielfoto Joey Joey Verwey
UX design

Stakeholders en eindgebruikers betrekken met wireframes

Een belangrijk onderdeel in het ontwerpproces van digitale projecten is het maken van...

Profielfoto Kelly Kelly Kroesen
UX design

Digitale toegankelijkheid voor mensen met een beperking. Waar moet je rekening mee houden?

In Nederland leeft een aanzienlijk deel van de bevolking met een beperking. Voor deze...

Kennismaken