In Omnigraffle, canvases work much like pages, allowing one document to hold different separate diagrams. Canvases are controlled in the sidebar with is accessed via a button on the left side of the toolbar. Use the button on the toolbar to create a new canvas. Layers that are marked as persistent will automatically appear on the new canvas. Name each canvas according to its purpose. Create or paste in the content that goes on the new canvas to wireframe a content page.
- [Voiceover] We've built a couple of wireframes…and in the case of the Home page,…we've divided it into layers,…but as we've also seen, wireframes rarely…exist in isolation.…Most websites require a set of wireframes…that is defined by the sitemap.…Now we've talked about all that.…What I wanna do now is combine our existing wireframes…into a single document using canvases.…So here we are on the Home page,…divided up into layers like we just did…and the canvas is just called Canvas 1…and I wanna start by changing this to Home…because when we add more, they'll all have names…and this is the Home page wireframe.…
Now we wanna go ahead and make a new canvas…and you'll remember that we set the background…as a persistent layer so when we make a new canvas,…it's already gonna have our background elements.…So here we are in Canvas 2 and we'll call that Content…'cause this is gonna be the wireframe…for our content that we've already built…and we'll go ahead and change the…new Layer 1 that automatically comes in…above the background and call this Wire…
Join Jason Osder as he demonstrates how to use OmniGraffle 6. He shows you how to use basic features, like adding lines, shapes, and text, to create diagrams of page layouts, or wireframes, in addition to advanced features, like working with stencils and templates. He lets you know when he is showing a pro-version feature, like presentation mode and subgraphs, so you can adjust accordingly. Along the way, you'll learn how to improve your documentation by eliminating unnecessary elements to help readers visualize all of a site on one page. As an object-based diagramming program, OmniGraffle has features for executing UX and IA documents. Creating other documents, like use case scenarios, content maps, and models, is also covered.
- Setting up document files
- Aligning and distributing lines, shapes, and text
- Using canvases, templates, layers, and stencils
- Making sitemaps to organize information
- Creating wireframes to diagram page layouts
- Designing for mobile
- Building content maps and conceptual models
Skill Level Intermediate
1. Commonly Used UX Techniques
2. Create a Sitemap
3. Advanced Sitemap Techniques
4. Wireframe the Homepage
5. Complete the Wireframe Process
6. Additional UX Documents
7. Presentation and Export
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.