Wireframing is geen tijdverlies

Geschreven door: Bart Vandebeek4 reacties

Wireframing ligt aan de basis van een goed uitgewerkt webproject. Het is echter nog steeds een te weinig gebruikt onderdeel tijdens de uitwerking van een project.

Waarom gebruiken we ze?

Wireframes zijn vereenvoudigde visuele weergaves van de user interface, het doel en de content van een website/webapplicatie. Ze zijn in feite de blauwdruk van het project. De belangrijkste redenen waarom we ze gebruiken zijn:

De klant duidelijk maken hoe de website werkt:

De wireframes helpen de klant tijdens de ontwikkeling (tijdens een meeting met de project manager, de designer, de informatie architect, ...) om zich te focussen op de functionaliteit en het doel van de website en niet het design. Het aanpassen van een wireframe kost minder tijd dan het aanpassen van het design waar je waarschijnlijk vele uren in zal steken.

Het inkorten van de ontwikkelingstijd:

Omdat de ontwikkeling van wireframes minder tijd in beslag neemt dan het uitwerken van het uiteindelijke design, kan je op relatief korte tijd alle pagina's "schetsen" van je project. Tijdens deze ontwikkeling krijg je reeds een beeld van de user experience, waardoor eventuele usability problemen reeds ontdekt en opgelost kunnen worden. Hierdoor kan je het ontwikkelingsproces stevig inkorten. Het is namelijk gemakkelijker om de aanpassingen in de beginfase reeds uit te voeren. Wanneer je deze in de laatste rechte lijn voor de afwerking krijgt, is dit al te vaak een ramp voor je planning en oplevering.

De developers en designers hulp bieden:

Dankzij de wireframes kunnen de developers zich reeds toeleggen op de ontwikkeling van de structuur van het project met focus op de functionaliteit en usability van het project, klaar om achteraf het design te implementeren. Alle ideeën staan immers op papier en alle partijen hebben hier goed over nagedacht, de developer moet niet meer vrezen voor extra aanpassingen door onduidelijkheden.

Conclusie

Het juiste gebruik van wireframes kan de ontwikkelingstijd stevig inkorten. Een wireframe is een document dat mee dient te groeien in het ontwikkelingsproces tot het uiteindelijke design, begin er anders niet aan. Het bespaart je eventuele kopzorgen en zet de verschillende partijen samen aan het denken doordat het voor een eerste visuele voorstelling zorgt binnen het ontwikkelingsproces.

In het boek "Getting Real" van 37Signals schrijft men:

If a wireframe document is destined to stop and never directly become the actual design, don't bother doing it. If the wireframe starts as a wireframe and then morphs into the actual design, go for it.

Hou dit steeds in het achterhoofd bij wireframing.

Resources

Om je wat op de juiste weg te helpen, verzamelde ik onderstaande resources.

Wireframing artikels

20 steps to better wireframing
Walkthrough van een wireframing process: wie te betrekken, de tools en tips voor beter wireframing.

The 'Boxing Glove' Wireframing Technique
Dwing jezelf om erg basic en snelle schetsen te tekenen.

The Importance of Wireframing
Een korte uitleg over het belang van wireframing.

Quick and dirty wireframes
Welke wireframe techniek naargelang het project.

Wireframe voorbeelden

I ♥ wireframes
Tumblelog met knappe wireframes in allerhande technieken.

Information Architecture Flickr Set
Flickr gallerij over wireframes, sitemaps, ... .

Wireframing magazine
Handige blog met voorbeelden, artikels, tools, ... .

Wordpress 2.7 wireframes
Wireframing proces van het Wordpress cms.

Paper wireframing

Inventis schetsboek
Handig schetsboek voor websites en nieuwsbrieven.

Konigi graph paper
Downloadbare schetsbladen met grids in non-repro blauw

Paper Prototyping
"All you need is paper, pens, scissors, and your imagination."

The Paper Version of the Web
Enkele wireframe schetsen op papier.

Online tools

Balsamiq
Eén van de meest gebruikte en degelijke wireframing applicaties online.

Hot Gloo
Wireframing applicatie ontwikkeld door informatie architecten, voor informatie architecten. (momenteel nog in beta)

iPlotz
Ontwikkel snel interactieve mockups en wireframes voor websites en software applicaties. iPlotz bezit tevens de mogelijkheid tot projectopvolging.

Jumpchart
Ontwikkel eenvoudig wireframes met de mogelijkheid om te exporteren naar html.

Lovely Charts
Lovely Charts laat toe om professioneel ogende flowcharts, sitemaps, wireframes, ..., te ontwikkelen.
 

Desktop tools

Axure
Axure RP is de marktleider als tool voor het snel maken van wireframes, prototypes voor applicaties en websites.

Adobe Flash Catalyst
Adobe Flash Catalyst is een nieuw interaction designtool voor het maken van user interfaces. Snel en zonder codering.

EasyPrototype
Ontwikkel applicatie of website prototypes in luttele minuten.

Flairbuilder
FlairBuilder is een cross-platform tool voor een snelle ontwikkeling van interactieve wireframes en user interface prototypes.

ForeUI
ForeUI is een handig prototyping tool. Hiermee ontwikkel je in een mum van tijd statische of interactieve prototypes voor uw project.

Justinmind
Ontwikkel op een eenvoudige manier volledig functionele wireframes voor uw web-, desktop-en mobiele toepassingen.

MockupScreens
"Quick and Easy Screen Prototypes".

Omnigraffle
Applicatie voor het ontwikkelen van diagrammen, procesgrafieken, wireframes, ... .

OverSite
OverSite voorziet een menu van widgets waarmee wireframes onwikkeld kunnen worden voor uw website of applicatie prototypes.

Pencil
Applicatie voor het ontwikkelen van wireframes met Firefox.

Visio
Dit is een Microsoft applicatie waarmee je in een handomdraai wireframes, diagrammen en nog veel meer overzichten kunt maken.


Meer resources zijn natuurlijk altijd welkom...

4 Reacties op deze blogpost:

Maarten Tibau
Door Maarten Tibau op 09 september 2009

Hmm, eigenlijk gebruik ik nooit wireframes, maar deze blogpost heeft me er toch van overtuigd het eens te proberen! Zeer interessant!!

Nice one Bart!

Fred
Door Fred op 10 september 2009

Je hebt gemist ForeUI (http://www.foreui.com), dat is zeer goed wireframing tool op het bureaublad.

Bart Vandebeek
Door Bart Vandebeek op 10 september 2009

@ Maarten Tibau, succes ermee!
@ Fred, bedankt voor de tip. De applicatie werd toegevoegd aan de lijst.

Bjorn
Door Bjorn op 10 september 2009

Ik gebruikt altijd Omnigraffle met de Konigi Stencils plugin. Echt handig!

Reageer ook op dit artikel

U kan optioneel inloggen met Twitter of Facebook. U krijgt dan de mogelijk om uw reactie ook te delen via Twitter of Facebook
Login with twitter
Aanmelden
{* Remarketing tag *}