Layers can also allow you to change interactions for a certain button depending on whether a user has completed a particular task. For example, if you want to create a page where you want users to sign up for an application, each field can be set up so that when clicked it fills in on that page instead of jumping to another page where that field has been filled out.
This method allows you to mock up multiple interactions which do not depend on each other in order to work. I find that this is the best way to mock up a prototype if you want to include multiple interactions on one page. When I prototype, I create one canvas for each page of the application, while placing all of the objects on the page (and the different states of these objects) into different layers. It helps you keep the number of canvases to a minimum while increasing the interactions on each page. If you want to make the prototype interactive in OmniGraffle, layers are a great tool. In a screen such as this, the top bar containing the home and profile dropdown should be in a shared layer with all canvases in the application ensuring that all of them are updated when it is changed. This is useful for navigation bars since you won’t have to add the same interaction for each screen.įigure 3.
#Omnigraffle subscript update
With shared layers all changes you make or interactions you add will automatically update in all Canvases which contain that layer. Use Shared Layersįor any object that is the exact same (in size, shape, colour, location etc.) in more than one canvas, create a shared layer. For example, if you have a layer for a pop-up, you need it to be the top layer, since it should appear on top of everything else. For layers, it will not only make it easier to find objects, but it determines how layers stack on top of one another. For a canvas, this will allow you to easily find pages you are looking for.
You should also order the canvases/layers as you go. These labels should describe in detail what the canvas/layer contains. All canvases and layers should be clearly labeled. It also helps you manage your project as it grows.įigure 2. This is very useful when you go in to add interactions or make changes. Each canvas and layer should be appropriately named you should be able to read the name and know exactly what the canvas/layer contains. Organize the Documentįrom the start of the project, it is important to keep the document organized. This article covers tips on how you would create a prototype if you wanted it to be interactive in OmniGraffle, either for testing or a walkthrough. If you are making an interactive prototype in OmniGraffle, you will have different limitations than you would if you wanted to make it interactive in another application or if you just wanted screens for a slideshow.
They don’t have to be good as long as you can understand it.Īside from planning out the wireframes, it is important to know what the wireframe will be used for when you are done. This type of sketching is just a process to get ideas on paper and work through a concept. I usually sketch out my screens and annotate these drawings to plan what I want to be included on the screen, what each item on the page does, and what features on the application I can use to create them.įigure 1. It is faster and easier than if you were to plan it as you go. Before starting on your wireframes you should always sketch out a plan of what you want to create. This point may seem a bit obvious, but it is the most important. While going through this process, I learned a few tricks which I thought I could share. I recently completed a project where I had to prototype with a high level of interaction on OmniGraffle.