Op 24 oktober 2011 plaatsten wij ons blogbericht “Interactieontwerp”. Hierbij gaven we een introductie over de rol van een interactieontwerper binnen een project. In dit artikel gaan we hier nog wat dieper op in. We bespreken een belangrijk hulpmiddel dat wij interactieontwerpers graag inzetten bij de uitwerking en ontwikkeling van nieuwe producten: wireframes. Wat zijn wireframes en waarom gebruiken we ze?
Wat zijn wireframes?
Simpelweg zijn wireframes lijntekeningen (blauwdrukken) van websites of (web)applicaties. De wireframes worden tijdens en na de brainstormfase ontwikkeld om alle content en gewenste functionaliteiten te positioneren. Op die manier wordt in kaart gebracht wat er precies gemaakt gaat worden. Het gaat puur om de functionaliteiten, structuur en indeling van de applicatie. Er komt bij het maken van wireframes nog geen vormgeving kijken.
Wireframe schets op een UI whiteboard van UI stencils.
Hoe een wireframe precies ontwikkeld wordt maakt niet heel veel uit. Er zijn heel veel handige hulpmiddelen die later nog aan bod zullen komen. Vaak worden er eerst schetsen met pen en papier uitgewerkt. Naarmate het project vordert en de plannen concreter worden zullen de pagina’s digitaal uitgewerkt worden. Als het nodig is kan er een digitaal klikmodel gerealiseerd worden om de interactie te benadrukken.
Screenshot van een wireframe.
Waarom gebruiken we wireframes?
Bij Freshheads houden we er van om wireframes bij de start van een nieuw project te gebruiken. Het gebruik van wireframes heeft een hoop voordelen ten opzichte van bijvoorbeeld het direct uitwerken van grafische ontwerpen of het enkel uitschrijven van functionaliteiten.
Sneller concreet voor alle betrokkenen
Een afbeelding zegt meer dan 1000 woorden. Het werken met wireframes kan de snelheid en efficiëntie van een project verhogen doordat het goede praatstukken zijn. Het is nu eenmaal makkelijker om met meerdere mensen over een afbeelding/weergave van de website te discussiëren dan over een stuk tekst te praten. Een tekst is vaak ook nog op meerdere manieren te interpreteren, terwijl dit bij een wireframe niet het geval is. Voor klanten wordt het meteen duidelijk wat ze gaan krijgen en hoe de website er uit komt te zien, voor programmeurs is het meteen duidelijk wat ze moeten maken.
Ook voor de snelheid van een project heeft het voordelen. Als we een functionaliteit uitwerken door middel van het maken van een simpele schets, dan bespaart ons dit een hoop tijd. Het uitschrijven ervan zou een stuk langer duren. Ook werkt het sneller dan het uitwerken van een grafische mockup. Vooral in de beginfase van een project, wanneer het nog niet concreet is wat er gemaakt moet worden, is deze flexibiliteit en snelheid heel waardevol. In de tijd dat een grafisch ontwerper 1 grafische mockup kan maken, kunnen er veel verschillende schetsen en wireframes gemaakt worden. Door deze flexibiliteit kunnen we voor een probleem van alles proberen waaruit nieuwe ideeën en oplossingen ontstaan.
Conclusie
Zoals eerder al genoemd kunnen we wireframes zo ingewikkeld maken als we zelf willen. Enerzijds kunnen we een simpele tekening met pen en papier maken, anderzijds kunnen we digitale wireframes maken. Afhankelijk van het project zullen de methodes verschillen. Belangrijk is om ideeën te visualiseren en te concretiseren. Het gebruik van wireframes is voor ons de ideale methode om abstracte ideeën om te zetten in concrete plannen: plannen die duidelijk zijn voor zowel de klant als de developer.
Wat gebruiken wij voor de uitwerking
Voor het uitwerken van wireframes zijn er verschillende hulpmiddelen. Je kunt uiteraard beginnen met simpel een pen en wat papier. Wil je wat serieuzer te werk gaan dan zijn er enkele handige tools beschikbaar. Dit zijn enkele middelen die we bij Freshheads gebruiken:
Print browser_template – Template om op te schetsen (pdf)
Print phone_template – Template om op te schetsen (pdf)
Omnigraffle – Software voor het tekenen van wireframes.
Konigi wireframe stencils – Template met elementen voor bij wireframes.
ui stencils – Handige hulpmiddelen voor interactie ontwerpers en designers.
wireframes.tumblr.com – Verzameling met wireframes.
Geschreven door Igor Delissen en Evert Hilhorst
