When creating a stylized sitemap in omnigraffle, it is a good idea to make a legend because there are no universal conventions for how to use colors and sizes. Tools that we have already learning, such as shapes, text, and alignment, can be used to make a legend. Using option-drag to duplicate and using the style brush are also helpful for legends on user experience design documents in omnigraffle.
- I want to add a legend to our site map…and there's a really good reason for doing this.…It's that the colors we've chosen…and the ways we've signified the different types of pages,…they're not absolutes.…It's not that everyone uses red for an interactive page…and blue for a home page, that's not the case.…So if we want these colors to have any meaning behind them…we really ought to provide a legend for our user.…And granted this is not the most complicated of websites…so the more complex and large your site map gets,…the more the need for a legend grows.…
Also this is a nice cumulative lesson…in that there's not that much new here,…maybe nothing at all, but it's using a lot…of tools and techniques that we've talked about already…and bringing them together to do something new.…So I want to just create my legend down here…in this area, and I want to start by…making a box for it to go in.…So I click my shape tool and I get my regular rectangle up…which is great, just remember if you don't see…what you need here in your favorites list,…
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.