#Omnigraffle wireframes stencil how to
#Omnigraffle wireframes stencil full

Since Omnigraffle is a design tool, it also makes things like leading, kerning, and margins very easy to handle as well. There’s also plenty of the typical tools to get your text in shape. Besides your standard use, this also comes in handy for shapes when you need multiple bits of text positioned within the shape. That text then acts as a property of the shape and moves in tandem with that shape. You can add text within a shape and align it within a shape. Just select the shape you want and then select Add Current Selection to Favorite Styles from the Shapes menu. This comes in handy when you have a shape that has particular properties which you use over and over. You can also add shapes to your favorite shapes.

The Actual Shape & The Outline (color, stroke size, etc.) There are several properties you can change regarding a shape. Other than iconography you rarely need anything outside of basic shapes and text for your wireframes. Creating a page layout in basic shapes can help you get a decent idea of how the page will feel and flow. I typically keep mine pretty basic with rectangles, circles, and triangles. Shapes are your most crucial tool when creating wireframes. If that’s a problem then use Shared Objects that are described later in the article. Keep in mind, though, that it needs to retain the same position across all canvases. It also allows you to easily change that layer and have those changes cascade across all the canvases in which the shared layer is used. This allows you to easily reuse a layer across multiple canvases. Shifting layers up and down will help create a manageable page structure that displays the way you need it to.ĭo you have something like a navigation bar, background, or footer that spans multiple pages without changing? Then use a shared layer. Within layers you can organize and move around individual elements. If you are familiar with Photoshop or Illustrator then it works the same way in Omnigraffle. Layers are used to organize within a canvas. I usually start with a cover page, some flow diagrams, and some information about the users and problem I’m trying to solve. They can house any sort of content you need. They show both what the content is and its hierarchical structure to help you manage and organize very easily.Ĭanvases are how you set up your pages.

#Omnigraffle wireframes stencil full

The Canvas and Layers sidebars are used to see the organization of your full document and its content. If you have questions or other elements you want further information about then leave a comment and I’ll do my best to provide that information. The following elements are the ones we’ll look at in this tutorial.

Let’s run through the program, examine how powerful Omnigraffle is and how we can use it to put together stellar wireframes. However, despite its few shortcomings, it’s a fantastic wireframing tool. You can do things like show/hide layers, but those really only work within Omnigraffle. You can produce clickable prototypes but that’s about as far as it can go. The biggest thing it doesn’t have is great interactivity for prototyping. I’ve used all kinds of applications for wireframing and, while it’s not perfect, Omnigraffle has the best combination of capabilities and efficiency for my workflow.

#Omnigraffle wireframes stencil how to

Omnigraffle is a tool that can be use for many purposes, but today we’ll explore how to use it for wireframing.