Wireframes met OmniGraffle

Gawin Dapper za 05 dec 09

Soms kan het prettig zijn een interactie ontwerp van je website of applicatie te hebben voordat je rails in duikt. Vaak helpt het dan om wireframes te maken. Dit kan bijdrage tot een zekere mate van consensus onder de stakeholders binnen een project. Het is een snelle manier van visueel duidelijke maken wat de website moet kunnen, en hoe het er ongeveer uit gaat zien.

Er zijn veel verschillende wireframing applicaties die je kunnen helpen bij het ontwikkelen van wireframes. Op de Mac kun je bijvoorbeeld OmniGraffle Professional gebruiken. Binnen OmniGraffle zijn een aantal functies om het maken van wireframes en prototypes een stuk makkelijker te maken.

OmniGraffle Shared Layers

OmniGraffle beschikt over de mogelijkheid om shared layers aan te maken. Een shared layers kun je op verschillende canvases terug laten komen. Als je dan wijzigingen in de shared layer aanbrengt, dan is dit direct in alle canvases zichtbaar. Dit kun je bijvoorbeeld gebruiken om een Header op verschillende pagina’s terug te laten komen, dan hoef je bijvoorbeeld bij een nieuw menu item deze slecht één keer in je header te zetten (inplaats van op iedere pagina apart). Je voegt een nieuwe shared layer toe door met de rechter muisknop op je canvas te klikken, en dan op shared layer te klikken. Let er even op dat je wel je shared layer als active layer instelt voordat je deze kunt bewerken.

OmniGraffle Actions

Naast de shared layers kun je ook gebruik maken van actions. Door het toewijzingen van een actie aan een object kun je bijvoorbeeld verspringen tussen canvases, inzoomen om een gedeelte van je canvas. Een URL of een andere applicatie openen:

Je kunt zelfs AppleScript toevoegen aan een actie:

Bij een wireframe kun je zo in de header alle menu items naar de correcte canvas laten verwijzen.

OmniGraffle Exporteren naar PDF

De actions komen tot leven in de presentation mode, welke gestart kan worden met Option-Command-P (alt + apple + p). Dit kan bijvoorbeeld handig zijn bij het doorlopen van een Prototype.

Echter heeft OmniGraffle ook de mogelijkheid om je gehele document te exporteren naar PDF. Hiervoor selecteer je in de export functie Option-Command-E (alt + apple + e), het type PDF vector image, en vervolgens Entire Document.

Een leuke extra functionaliteit is dat de geëxporteerde PDF de links behoud. Hierdoor kun je in je geëxporteerde PDF de links in je header blijven gebruiken!

Bron bestanden

• Wireframes.graffle
• Wireframes.pdf

Gepost in  |  0 reacties