In Omnigraffle, is is easy to build a sitemap that is color coded and has the look of something to present to a client. Stencils provide an efficient way to transition from the simple sitemap to the stylized one. There are no hard and fast rules for how shapes and colors are used on a site map. Download and use the webflow 2.0 stencil on Omnigraffle for this style of sitemap.
- [Voiceover] Now that we've made a simple-looking site map,…and it does serve its purpose in terms…of diagramming the content,…I wanna talk about how to use stencils…to make a site map that's much more attractive.…And that is also important in this work.…Part of what we're doing is taking something…that can be rather complex and making it…feel simple and organized.…So, here's where we left off in terms of diagramming,…and again, it's effective, it works,…but I wanna show you where we're headed here,…which is our finished style map document.…
Now, doesn't that look cleaner and more attractive?…Also, and this will need a legend eventually,…we've replaced the usage of dotted lines…to indicate interactive pages with a color-coding system,…which I think is generally stronger and makes more sense.…So, that's where we started, is here.…And it is doing its job.…And this is where we're headed,…which is the same basic diagram,…but a cleaner, more interesting look.…And to do it, we need stencils,…as well as a new, fresh document.…
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.