Omnigraffle has layers that work much like layers in other drawing programs such as Photoshop. When making wireframes, it is useful to isolate elements that go in conceptual layers onto real layers in omnigraffle. Often, these area background layer, a wireframe layer, and a notes layer. All control of layers is found in the sidebar.
- [Voiceover] Similar to a lot of drawing programs,…OmniGraffle supports what are called layers,…and they're just like what they sound like.…There's a verticality, a layered system within your document…if you care to use it.…And in the case of wireframes, I recommend that you do,…because as they get more complicated,…you really do have different layers of information.…And dividing them out on layers can be very effective…in terms of how you edit them, export them,…and things of that nature.…So we're looking at our completed home page wireframe here,…and we wanna look in a section…we haven't spent much or any time on and it's the sidebar.…
So I'm gonna go ahead and open the sidebar.…And what you see is a display of your canvases,…and we only have one, canvases are like pages.…And then also down below are layers.…You also see the layers associated with the canvas…if you twirl this down.…But here's the detail of our layers,…or in this case, just Layer 1.…What we wanna do is start to create layers…that are a little more informative…
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.