High-Fidelity Clickable demo (functioneel wireframe)
Door: Jelmer B
Omschrijving
Wireframes, ook wel mockups genoemd, zijn een visueel hulpmiddel bij het ontwikkelen van een website of -applicatie. Ze kunnen gezien worden als de bouwtekening van een website, waarin een overzicht wordt gegeven van de verschillende onderdelen die op een website aanwezig zullen zijn.
In de wireframes worden zaken vastgelegd als navigatie, indeling en inhoud, zonder gebruik te maken van een grafisch ontwerp. Het grote voordeel is dat alleen op de inhoud gefocust wordt en niet op het grafische aspect.
Doel
“Je laat toch ook geen huis bouwen zonder bouwtekeningen?”. Men is vaak veel drukker in de weer met een planning, deadlines en een begroting dan dat er aandacht wordt besteed aan een gedegen functioneel ontwerp. Opmerkelijk aangezien een FO juist bijdraagt aan een strakke planning, het halen van deadlines en een project dat binnen budget blijft.
De investering in een FO is absoluut verstandig. Het voorkomt valkuilen, uitloop in planning, meerwerk kosten en andere nadelige zaken gedurende het project. Ik durf het zelfs zo te stellen dat een project zonder of met een half FO, vaker uitloopt en vaker boven begroting uitkomt dan een project met een compleet FO.
Daarnaast is een FO een waardevol communicatiemiddel. Bij een groot webdevelopment project komen vaak meerdere expertises kijken, bijvoorbeeld: opdrachtgever, online marketing bureau, copywriter, projectmanager, designer, programmeur en derden. Het FO is de blauwdruk, het centrale uitgangspunt van waaruit iedere betrokkene werkt. Dit bevordert de onderlinge communicatie en het reduceert de kans op ruis.
Het wireframe wordt voornamelijk ingezet bij ICT projecten. Daarbij is het vaak handig om een overzicht te hebben hoe een website of applicatie eruit komt te zien.
Methoden
Enkele methoden waarbij functionele ontwerpen gebruikt kunnen worden zijn:
WerkwijzeEr zijn verschillende tools om klikmodellen te maken, hieronder link ik naar drie voorbeeld-tools. Met een beetje oefening is zo’n tooltje ook prima te gebruiken door niet-techneuten. Er zijn dan ook opdrachtgevers die zelf aan de slag gaan.
Wireframes, ook wel mockups genoemd, zijn een visueel hulpmiddel bij het ontwikkelen van een website of -applicatie. Ze kunnen gezien worden als de bouwtekening van een website, waarin een overzicht wordt gegeven van de verschillende onderdelen die op een website aanwezig zullen zijn.
In de wireframes worden zaken vastgelegd als navigatie, indeling en inhoud, zonder gebruik te maken van een grafisch ontwerp. Het grote voordeel is dat alleen op de inhoud gefocust wordt en niet op het grafische aspect.
Doel
“Je laat toch ook geen huis bouwen zonder bouwtekeningen?”. Men is vaak veel drukker in de weer met een planning, deadlines en een begroting dan dat er aandacht wordt besteed aan een gedegen functioneel ontwerp. Opmerkelijk aangezien een FO juist bijdraagt aan een strakke planning, het halen van deadlines en een project dat binnen budget blijft.
De investering in een FO is absoluut verstandig. Het voorkomt valkuilen, uitloop in planning, meerwerk kosten en andere nadelige zaken gedurende het project. Ik durf het zelfs zo te stellen dat een project zonder of met een half FO, vaker uitloopt en vaker boven begroting uitkomt dan een project met een compleet FO.
Daarnaast is een FO een waardevol communicatiemiddel. Bij een groot webdevelopment project komen vaak meerdere expertises kijken, bijvoorbeeld: opdrachtgever, online marketing bureau, copywriter, projectmanager, designer, programmeur en derden. Het FO is de blauwdruk, het centrale uitgangspunt van waaruit iedere betrokkene werkt. Dit bevordert de onderlinge communicatie en het reduceert de kans op ruis.
Het wireframe wordt voornamelijk ingezet bij ICT projecten. Daarbij is het vaak handig om een overzicht te hebben hoe een website of applicatie eruit komt te zien.
Methoden
Enkele methoden waarbij functionele ontwerpen gebruikt kunnen worden zijn:
- A/B testing
- Eyetracking
WerkwijzeEr zijn verschillende tools om klikmodellen te maken, hieronder link ik naar drie voorbeeld-tools. Met een beetje oefening is zo’n tooltje ook prima te gebruiken door niet-techneuten. Er zijn dan ook opdrachtgevers die zelf aan de slag gaan.
- Axure
- OmniGraffle
- Easel