A basic sitemap can be built in Omnigraffle using the fundamental tools that have already been covered, such as shapes, lines, and text. Using the alignment and distribution tools as the document is being build is a good way to keep the document organized and clean looking. Use shape to represent pages and lines to indicate connections.
- [Voiceover] Continuing in the process…of understanding and building sitemaps…I wanted to next make what I call a basic sitemap.…Not worry too much about the styles…or the colors or the presentation,…and just work through the basics of what needs…to be on a sitemap…and how to execute against the goals…of a particular website.…So what we're starting with is basically…where we left off when we were talking about tools.…Everything we've covered before.…We've got some shapes…and we're using some text…and they're connected with some lines.…
We haven't paid much attention…to what actually goes in the boxes,…'cause we were just playing with the tools.…And that's what I wanna do now,…just use these basic shapes and lines…to actually fill in the content for the website…that we're diagramming,…which is for a veterinary medicine clinic,…which I think makes a nice example of content…that you can extrapolate to the website…you're actually building.…So here we're looking at this…and it doesn't have enough content yet…and how do I know that?…
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.