Sitemap elements can be grouped for ease in moving them around in Omnigraffle. Once a section of the sitemap is complete and the shapes will stay in the same special relationship, select them all and group with the group button on the toolbar. Alignment can be done throughout the site mapping process in Omnigraffle. Use the dynamic guides for site mapping as well as the alignment inspector.
- [Voiceover] Our stylized site map is looking pretty good.…I just wanted to talk a little more about the finer points…of grouping and aligning elements on a sitemap.…This already looks pretty good but I wanted to consider…one or two things before we move on.…So first is the issue of grouping.…As you can see we added a tertiary layer here and there may…be some more of that type of content to come and it's just…the idea that if you have to make an appointment,…there's gonna be several places to input information.…So we've got some choices here but in particular…often these tertiary groups or the content groups can be…literally grouped together in OmniGraffle.…
So by grouping these, they now operate as a block and can…move around in different ways.…It seems likely to me that we're gonna need some more room…to do some more work in this area so they can move to the…side a little bit and if anything starts to move like this…line in a way you don't want, you can always manually…reconnect it to the proper magnet like this.…
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.