The Benefits of Using OmniGraffle in Web Design

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. We often create additional canvases to represent alternate states and user interaction. Each OmniGraffle document can have as many canvases as you need.

Two canvases illustrating a mobile interaction.
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.

Konigi wireframe stencils for Omnigraffle
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.

3) Stencils

Stencils are one of OmniGraffle’s superpowers. OmniGraffle allows you to group objects, and to organize these groups of objects into stencils. Think of stencils as a pattern library from which you can pull objects or modules on to your canvas at any moment. In addition to creating stencils of your own, many stencils are bundled with OmniGraffle and a vast number are available from Graffletopia. These stencils are superbly useful for quickly getting your hands dirty with low-fidelity wireframes for prototyping.

At JTech, we’ve made extensive use of bundled stencils, Graffletopia and our own custom stencils. In particular, the Konigi wireframe kit bundled with OmniGraffle is extensive and high quality, and makes an excellent starting point.

Because stencils can easily be unbundled and recombined, I’ve created a custom version of the Konigi kit that cuts out all the elements I don’t use, customized others (such as a “heavier” image placeholder) and added still others — such as embedded Google Map widgets — that are commonplace in the work that we do for our clients. We’ve also created fully custom stencils with icons that represent budget items for our flowcharts and help us consistently track project complexity.

JTech Flowchart Stencil
Above: JTech’s flowchart stencil helps us track project features and complexity.

Using stencils as a pattern library in OmniGraffle speeds up wireframing but also creates a cornerstone of style consistency across the different pages or screens of your project. When creating the final style guide (which we at JTech call the master element sheet) for the project, we begin with the objects created in OmniGraffle.

Therefore, these stencils are important both for the interface designers, where there can be a great temptation to create novel elements, and for the front-end developers, who can be provided with reassurance that there is a comprehensive, consistent plan to implement.

4) Templates

Much like stencils, templates allow you to create a document with pre-defined styles for later use. If stencils are groups and individual objects in a collection, templates are akin to a whole canvas — without any customization yet applied.

JTech Flowchart Sample
Above: A sample flowchart built using our flowchart template.

Useful for developing consistent pages throughout your website or application. At JTech, we use templates especially to get a head start creating flowcharts of our web development projects.

5) Smart Guides

OmniGraffle provides quite a bit of power and flexibility to make consistent spacing easy. Not only can each canvas have its own grid, with the option of snapping objects to grid, but it keeps track of the spacing between existing objects on the canvas and provides useful smart guides suggesting how to keep new objects evenly spaced.

If you’re the sort of designer who enjoys laying out gutters and margins as guides on top of the grid, no problem. OmniGraffle also allows you to manually create guides to be positioned however you please.

Defining margins and columns with guides in OmniGraffle.
Above: OmniGraffle’s guides can help define columns, gutters and the layout grid.

As a power user, I find the customizability of OmniGraffle’s grid system particularly useful for working consistently and quickly. I can define the “minor grid steps,” and then use the shift-arrow keyboard shortcut to move objects by that increment, keeping them in line with my project’s horizontal and baseline grids.

6) Vector-Based Drawing Tools

Resolution-independent, rather than fixed resolution. Shapes can be easily resized without pixellation or stretching your rounded corners (here’s looking at you, Photoshop), and tools are offered to create bezier curves, to control standard points such as stroke, fill, and opacity, and set alignment rules for text that’s following a path or embedded inside an object.

Although the toolset is not as complex or complete as Adobe Illustrator, OmniGraffle offers a surprising amount of power and flexibility with its drawing tools. More importantly, it focuses on tools that are useful for interface and wireframe design, deliberately leaving out many of the more complex features (live trace, meshes, and so on) that make Illustrator a powerhouse for digital graphics authoring.

Vector shapes can sometimes be drawn in OmniGraffle.
Above: Simple vector shapes can be drawn in OmniGraffle, but more complicated shapes such as those in Yegor Shustov’s icons (top right) are more appropriately authored in illustration software.

Although I prefer using Illustrator to draw complex objects, OmniGraffle’s built-in tools are very convenient for simple objects such as rounded rectangles that you’re likely to be creating using CSS. As a rule of thumb, if your shape is complicated enough that you’d want to build it as an SVG or icon font, it would be easier to draw it in Illustrator or your vector authoring tool of choice.

7) Compatibility — Importing and Exporting

OmniGraffle offers export into a large number of formats, from multi-page PDFs to vector SVGs to layered PSDs. Export an entire document or just the canvas you’re working on. It can import intact vector imagery from PDFs (which allows it to work with Illustrator) and from Microsoft’s Visio diagramming tool, if you’re working across platforms.

At JTech, we export our files into JPGs and PDFs to share our progress with clients. We also frequently import PDFs created in Illustrator into OmniGraffle to preserve the fully-editable vector shapes in OmniGraffle.

8) Scripting Extensibility

OmniGraffle documents can be parsed and manipulated via AppleScript — for instance, we created the jtCount script to take inventory of our flowcharts and output a preliminary budget based on the complexity of the project described.

So, is OmniGraffle the right tool for you?

As always, the answer is, “it depends.” OmniGraffle offers a large, flexible toolset and can be used throughout your process, from planning and diagramming the project’s structure through to delivering wireframes of medium to high fidelity. If you feel like you would benefit from a tool that offers better precision than a sketch, but is sufficiently removed from the finished product, OmniGraffle is a great tool for web design.

Comments

  • digiltd

    I wouldn’t say OmniGraffle is a “design” tool. The tools available are incredibly basic, which is not a bad thing because it is very easy to get distracted with the design when you should be focusing on the basics. But what it does provide is a very quick way to wireframe a site. There are lots of free asset libraries out there, making it very quick to throw together an idea of a site. It is better suited to the planning stage, the way it auto generates sitemaps and flow charts is brilliant (compared to using Sketch or Illustrator to manually draw the connecting lines). I use all three, OmniGraffle to plan, and Sketch and usually illustrator for the occasional bits when I get frustrated with Sketch “quirks” (which is a lot)

  • Kampiamo DiKuesto

    What about axure 7?
    and what do you think about using adobe edge reflow + bracket cleaner plugin for prototyping and wireframing (the plugin is need to generate good html and css output)?

  • Thanks for your insights into using OmniGraffle for planning and wireframing a website. We find it particularly helpful to use stencil templates when flowcharting website development projects. Also, it offers good style consistency in wireframes to smooth the workflow of interface design and front end web development.

  • Channeling: Fred…

    My biggest gripe with OmniGraffle is that you can never accelerate your work the way you can with Illustrator or InDesign. For instance, once you learn the keyboard shortcuts for Illustrator/InDesign, you become a speed demon! But, with OmniGraffle, it’s like you’re always going back to the mouse…it’s a bummer. And a repetitive stress injury waiting to happen. And sometimes it’s difficult to really tweak the stencils to what you want. That said, it’s easy to pick up and would be a good tool for, say, a content strategist, or someone who doesn’t do design on a daily basis, to use to create something that looks good but doesn’t take too long to put together (if you pick the right templates/stencils, of course).

  • Hi Felix – thanks for the article. Sarah Doody has a good tip for getting past shared layers limitations by using the Link Back feature in Omnigraffle. Check it out here http://www.sarahdoody.com/work-faster-with-these-7-omnigraffle-tips/#.VpKbgHi3mi4