Wireframing met OmniGraffle Professional

Door Hidde van Koningsveld
Een week geleden las ik het artikel van Daan Weijers over semantiek. Dit inspireerde mij om ook zelf aan de slag te gaan. Immers is er, voor er ook maar aan het coderen wordt begonnen, eerst een ontwerp nodig!

De meest voor de hand liggende optie is om Photoshop te openen en een ontwerp te maken. Hoewel dit misschien voor jou goed werkt, is het beter om eerst een wireframe te maken.

Wat is een wireframe?

Een wireframe (ook wel mockup genoemd) is als het ware een eerste design, waar je nog niet diep ingaat op de opmaak van de verschillende elementen.

Veelal worden deze met de hand getekend. Het voordeel van wireframes op de computer maken, is dat het overzichtelijker is, makkelijk uit te printen en het komt uiteraard professioneler over op eventuele klanten.

Software die hier veel voor gebruikt wordt is Microsoft Visio, Justinmind Prototyper en OmniGraffle. In dit artikel ga ik dieper in op OmniGraffle.

OmniGraffle

De laatste versie (5.2.1 Professional), beschikbaar voor Mac OS X, is te koop voor $199,95 bij The Omni Group. Voor honderd dollar minder heb je de standaard versie.

Er zijn een aantal verschillen tussen de professional en de standaard versie. Zo is er meer support voor Microsoft Visio, is het mogelijk om vormen te combineren en kan je gebruik maken van notities.
Kijk voor alle voordelen op http://www.omnigroup.com/applications/omnigraffle/pro/ .

Stencils

Standaard worden er al een aantal vormen meegeleverd. Deze zijn, in het venster ‘Figuren’, onderverdeeld in een aantal categorieën. Zo heb je bijvoorbeeld ‘Kaarten’, ‘Organogrammen’ en ‘Ruimtelijke planning’. Dit zijn allemaal vectoren. Dat betekend dat alle figuren oneindig schaalbaar zijn, zonder kwaliteitsverlies.
Bij een standaardinstallatie worden geen extra ‘stencils’ meegeleverd. Stencils zijn een soort van ‘kaarten’ waar extra figuren op staan. Zo heb je bijvoorbeeld stencils speciaal voor webdesign, woninginrichting en mindmapping.

Er zijn er in totaal twee, die ik heb geïnstalleerd. De eerste heet ‘Konigi Wireframe Stencils v3’, en de andere ‘Yahoo! Design Stencils’. Hier zit zo’n beetje alles bij wat je nodig hebt om een redelijk wireframe te ontwerpen.

Hier zijn bijvoorbeeld figuren meegeleverd van formulieren, menubuttons en videoplayers.

Het is simpel; selecteer een vorm, en sleep hem naar je werkveld.

Deze stencils zijn eigenlijk het ‘hart’ van OmniGraffle. Een leeg werkveld (het document waarin je werkt) vul je door vormen er naartoe te slepen. Zelf gebruik ik (zoals je ziet) een sjabloon waarin ik werk. Deze heb ik gecreëerd van de webbrowser-vormen uit het stencil ‘Konigi Wireframe Stencils v3’.

De vormen zijn te verplaatsen met de pijtjestoetsen. Wil je de vormen maar een klein stukje verplaatsen? Hou dan shift ingedrukt, en gebruik de pijltjestoetsen. Als je dit niet doet, dan schuiven ze een heel stuk op.

Conclusie

Dit zijn slechts de basisbeginselen van OmniGraffle. Er zijn nog veel meer functies, die ik nog niet heb uitgelegd. Voor meer uitleg verwijs ik graag door naar de tutorial sectie van The Omni Group. http://www.omnigroup.com/applications/omnigraffle/tutorials/ .

OmniGraffle is slechts een tool waarmee je een goed wireframe kan creëren. Gebruik het programma wat je zelf fijn vindt.