Ana sayfa general The Benefits of Using OmniGraffle in Web Design

The Benefits of Using OmniGraffle in Web Design



OmniGraffle is the OmniGroup’s visible design instrument for Apple’s OSX and iOS. It has a deep, intensive set of options that makes it a great tool to unravel most visible issues.
At JTech, we’ve discovered that it excels as a instrument for creating wireframes and diagramming flowcharts of web site hierarchies. Its diagramming and flowchart capabilities have many different potential makes use of in net improvement, comparable to mapping consumer journeys by way of the interface.
Let’s have a look at how OmniGraffle helps us get the job executed:

The UX Designer Toolbox
Limitless Downloads: 500,000+ Wireframe Templates, UX Templates, UI Kits & Design Property


Wireframing and Flowchart Workflow Instruments

1) Canvases

We use a canvas to symbolize every “display screen” of an internet site or app, reasonably than creating separate Photoshop paperwork. We frequently create further canvases to symbolize alternate states and consumer interplay. Every OmniGraffle doc can have as many canvases as you want.
Two canvases illustrating a mobile interaction.
Above: These two canvases present two states of an interplay: open and closed variations of a cellular menu.

2) Layers and Shared Layers

Like Photoshop, every canvas inside a doc can have a number of layers, every of which might be turned on and off. That is significantly helpful for annotating paperwork and calling out specs in model guides. As well as, shared layers can help you present objects (comparable to web site navigation) which can seem on a number of canvases of your venture.
Konigi wireframe stencils for Omnigraffle
Above: A subset of the Konigi wireframing package bundled with OmniGraffle.
Shared layers in OmniGraffle are highly effective — they sync throughout all of your canvases — however are usually not with out their limitations. Specifically, it might be good if there have been shared objects reasonably than layers — the present method of doing issues doesn’t permit for repositioning, which implies that it might probably solely be used when absolute positioning is appropriate.
Something associated to the circulate of a web page, comparable to a footer that’s positioned beneath a web page or display screen of dynamic top, can’t be addressed utilizing shared layers.

3) Stencils

Stencils are one in all OmniGraffle’s superpowers. OmniGraffle means that you can group objects, and to prepare these teams of objects into stencils. Consider stencils as a sample library from which you’ll be able to pull objects or modules on to your canvas at any second. Along with creating stencils of your individual, many stencils are bundled with OmniGraffle and an unlimited quantity can be found from Graffletopia. These stencils are beautifully helpful for shortly getting your palms soiled with low-fidelity wireframes for prototyping.
At JTech, we’ve made intensive use of bundled stencils, Graffletopia and our personal customized stencils. Specifically, the Konigi wireframe package bundled with OmniGraffle is intensive and prime quality, and makes a superb start line.
As a result of stencils can simply be unbundled and recombined, I’ve created a customized model of the Konigi package that cuts out all the weather I don’t use, personalized others (comparable to a “heavier” picture placeholder) and added nonetheless others — comparable to embedded Google Map widgets — which are commonplace within the work that we do for our purchasers. We’ve additionally created totally customized stencils with icons that symbolize funds gadgets for our flowcharts and assist us constantly monitor venture complexity.
JTech Flowchart Stencil
Above: JTech’s flowchart stencil helps us monitor venture options and complexity.
Utilizing stencils as a sample library in OmniGraffle accelerates wireframing but additionally creates a cornerstone of fashion consistency throughout the totally different pages or screens of your venture. When creating the ultimate model information (which we at JTech name the grasp factor sheet) for the venture, we start with the objects created in OmniGraffle.
Due to this fact, these stencils are vital each for the interface designers, the place there generally is a nice temptation to create novel parts, and for the front-end builders, who might be supplied with reassurance that there’s a complete, constant plan to implement.

4) Templates

Very similar to stencils, templates can help you create a doc with pre-defined types for later use. If stencils are teams and particular person objects in a set, templates are akin to an entire canvas — with none customization but utilized.
JTech Flowchart Sample
Above: A pattern flowchart constructed utilizing our flowchart template.
Helpful for creating constant pages all through your web site or software. At JTech, we use templates particularly to get a head begin creating flowcharts of our net improvement tasks.

5) Good Guides

OmniGraffle gives fairly a little bit of energy and adaptability to make constant spacing simple. Not solely can every canvas have its personal grid, with the choice of snapping objects to grid, but it surely retains monitor of the spacing between present objects on the canvas and gives helpful good guides suggesting tips on how to hold new objects evenly spaced.
When you’re the type of designer who enjoys laying out gutters and margins as guides on high of the grid, no drawback. OmniGraffle additionally means that you can manually create guides to be positioned nonetheless you please.
Defining margins and columns with guides in OmniGraffle.
Above: OmniGraffle’s guides may also help outline columns, gutters and the structure grid.
As an influence consumer, I discover the customizability of OmniGraffle’s grid system significantly helpful for working constantly and shortly. I can outline the “minor grid steps,” after which use the shift-arrow keyboard shortcut to maneuver objects by that increment, preserving them in keeping with my venture’s horizontal and baseline grids.

6) Vector-Based mostly Drawing Instruments

Decision-independent, reasonably than mounted decision. Shapes might be simply resized with out pixellation or stretching your rounded corners (right here’s you, Photoshop), and instruments are supplied to create bezier curves, to regulate commonplace factors comparable to stroke, fill, and opacity, and set alignment guidelines for textual content that’s following a path or embedded inside an object.
Though the toolset will not be as complicated or full as Adobe Illustrator, OmniGraffle provides a stunning quantity of energy and adaptability with its drawing instruments. Extra importantly, it focuses on instruments which are helpful for interface and wireframe design, intentionally leaving out most of the extra complicated options (stay hint, meshes, and so forth) that make Illustrator a powerhouse for digital graphics authoring.
Vector shapes can sometimes be drawn in OmniGraffle.
Above: Easy vector shapes might be drawn in OmniGraffle, however extra sophisticated shapes comparable to these in Yegor Shustov’s icons (high proper) are extra appropriately authored in illustration software program.
Though I favor utilizing Illustrator to attract complicated objects, OmniGraffle’s built-in instruments are very handy for easy objects comparable to rounded rectangles that you just’re prone to be creating utilizing CSS. As a rule of thumb, in case your form is sophisticated sufficient that you just’d need to construct it as an SVG or icon font, it might be simpler to attract it in Illustrator or your vector authoring instrument of selection.

7) Compatibility — Importing and Exporting

OmniGraffle provides export into a lot of codecs, from multi-page PDFs to vector SVGs to layered PSDs. Export a complete doc or simply the canvas you’re engaged on. It may import intact vector imagery from PDFs (which permits it to work with Illustrator) and from Microsoft’s Visio diagramming instrument, in the event you’re working throughout platforms.
At JTech, we export our information into JPGs and PDFs to share our progress with purchasers. We additionally steadily import PDFs created in Illustrator into OmniGraffle to protect the fully-editable vector shapes in OmniGraffle.

8) Scripting Extensibility

OmniGraffle paperwork might be parsed and manipulated by way of AppleScript — for example, we created the jtCount script to take stock of our flowcharts and output a preliminary funds based mostly on the complexity of the venture described.

So, is OmniGraffle the correct instrument for you?

As all the time, the reply is, “it relies upon.” OmniGraffle provides a big, versatile toolset and can be utilized all through your course of, from planning and diagramming the venture’s construction by way of to delivering wireframes of medium to excessive constancy. When you really feel such as you would profit from a instrument that gives higher precision than a sketch, however is sufficiently faraway from the completed product, OmniGraffle is a good instrument for net design.



Please enter your comment!
Please enter your name here