Wireframing
Daar zit je dan. Tegenover een klant. Een klant met een vraag en veelal een (vaag) idee waar hij naartoe zou willen. “En ik wil ook iets met social media. Daar hoor je tegenwoordig zoveel over!”
En jij zit tegenover hem. Met de expertise om een antwoord te geven op de vraag van de klant. Maar eerst moet je er achter zien te komen waar het pijn doet. Vragen stellen is één van de mogelijkheden. “Maar weet je wel wat social media is?”Dit redelijk standaard vraag en antwoord spel leidt al snel – afhankelijk van je eigen expertise – tot een beeld van de best passende oplossing voor de klant. Nu kan je een dik functioneel ontwerp schrijven of andere grote plannen schrijven maar ik hou het vaak bij het maken van schetsen. Per slot van rekening is men meer visueel ingesteld en leest men toch niet (let op de algemeenheid. Ik wil niet tegen schenen schoppen).
De schetsen – ook wel wireframing – komen voor in vele soorten en maten en er zijn diverse pakket voor om de wireframes samen te stellen. Toch één van de bekendste methode is de aloude pen-en-papier methode. Wireframing kan – theoretisch gezien – op twee manieren. Low Fidelity en High Fidelity wireframing. Dit artikel gaat in op low fidelity. Let op: dit is zeer theoretisch. Elke hybride versie is mogelijk. Ga uit van de klant en laat je leiden door hem. Er zijn diverse voordelen en nadelen aan beide methodes.
Doel van wireframes
Met een wireframe kan men snel en simpel elementen en content op een webpagina organiseren. Denk aan elementen als een menu balk, login gedeelte, tekst gedeelte, eventueel banners of andere afbeeldingen al naar gelang de gewenste functionaliteit. Het wireframe geeft de verhoudingen van de functionaliteit in de online oplossing weer. De wireframes zijn een belangrijke referentie gedurende de realisatiefase van een project. Een blauwdruk.
Het wireframe is het praatmodel gedurende het project. Niet alleen richting klant maar ook richting de grafisch ontwerper, functioneel ontwerper, ontwikkelaars en testers in het project! Kortom, een onmisbaar onderdeel om een project goed te laten verlopen.
Low Fidelity Wireframing
Dit is de snelste en simpelste manier van schetsen op papier krijgen. Veelal wordt hier ook echt pen en papier gebruik alvorens het wordt uitgewerkt in een High Fidelity Wireframing. Een aantal handvaten die ik zelf altijd gebruik:
- Werk de schetsen uit in zwart-grijs-wit;
- Gebruik zogenaamde placeholders voor afbeeldingen en geen afbeeldingen zelf;
- Gebruik lipsum teksten in plaats van relevante content;
- Hou het high level en voorkom details. Dit komt in een later stadium wel;
- Gebruik een vast datum formaat (00-december-0000) door alle schermen heen.
Naast de ouderwetse pen-en-papier methode maak ik ook gebruik van Pencil of Balsamiq op mijn laptop en iMockups op de iPad (let op: link gaat naar de First Gen iPad).
Pencil, Balsamiq en iMockups zijn tools waar veel elementen al standaard in opgenomen zijn. Door middel van drag-and-drop kan je al snel een wireframe samenstellen. Daarnaast zijn er veel bronnen met templates waar allemaal elementen zijn samengevoegd in zogenaamde toolkits:
Het grote gevaar van low fidelity wireframing is de snelheid waarop je schermen kunt samenstellen. De eerste vraag die je kunt verwachten van de klant is: “Is het al klaar dan?”. Helaas, ik heb geen direct antwoord op deze vraag. Wees creatief en zorg ervoor dat de boodschap is dat de wireframes een fundament vormen voor de uiteindeiljke oplossing, en niet de oplossing zelf.
In het volgende artikel ga ik in op High Fidelity Wireframing. Daar is het risico op de bovenstaande opmerking nog groter. Daar zal ik wat meer voer geven om de klant te overtuigen dat het geen grafisch ontwerp is.
Voorbeelden low fidelity
Opgemaakt met pen en papier
Opgemaakt met Pencil
Opgemaakt met Photoshop
