OmniGraffle is the OmniGroup’s visual design tool for Apple’s OSX and iOS. It has a deep, extensive set of features that makes it a useful tool to solve most visual problems. At JTech, we’ve found that it excels as a tool for creating wireframes and diagramming flowcharts of website hierarchies. Its diagramming and flowchart capabilities have many other potential uses in web development, such as mapping user journeys through the interface. Let’s look at how OmniGraffle helps us get the job done: Wireframing and Flowchart Workflow Tools 1) Canvases We use a canvas to represent each “screen” of a website or app, rather than creating separate Photoshop documents. IPhone stencil (OmniGraffle). $5 Responsive Website Mockup Templates by loswl in Graphics. $3 8 for Sketch Mobile UI Kit mini by App Ui Kit in Graphics. FlatBlock Wireframe Kit. An OmniGraffle stencil used to do 'color block' wireframes. It includes the following parts: Basic Frames for web and mobile. Buttons Content Blocks Layout Components, like navigator, image placeholder, etc. Please go to for examples and contribute. Free Mobile Device Mockups OmniGraffle Stencil and Illustrator Template – UX Kits. We often create additional canvases to represent alternate states and user interaction. Each OmniGraffle document can have as many canvases as you need. Above: These two canvases show two states of an interaction: open and closed versions of a mobile menu. 2) Layers and Shared Layers Like Photoshop, each canvas within a document can have multiple layers, each of which can be turned on and off. This is particularly useful for annotating documents and calling out specifications in style guides. In addition, shared layers allow you to show objects (such as site navigation) which will appear on multiple canvases of your project. Above: A subset of the Konigi wireframing kit bundled with OmniGraffle. Shared layers in OmniGraffle are powerful — they sync across all your canvases — but are not without their limitations. In particular, it would be nice if there were shared objects rather than layers — the current way of doing things doesn’t allow for repositioning, which means that it can only be used when absolute positioning is acceptable. Anything related to the flow of a page, such as a footer that’s positioned below a page or screen of dynamic height, cannot be addressed using shared layers.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
March 2018
Categories |