Sitemaps are one of the fundamental document types of user experience design. Sometimes called a bird’s eye view document, sitemaps serve the purpose of putting all of the content of a site on one page. However, sitemaps are not very granular. In order to visualize all of a site on one page, many details may need to be eliminated.
- [Voiceover] Sitemaps are one of the major UX or information architecture documents that we'll be dealing with. These are often referred to as sitemaps, sometimes also as bird's eye view drawings, which is also informative. I wanted to take a moment to look at where we're headed, our finished sitemap document, and just talk about what the goals for this type of diagram are. So that's what we're looking at here. This is what we're going to build slowly over the next few chapters, but I wanted to start at the end here and just talk about our goals.
So what you have in a sitemap is a diagram that covers the extent of the content across an entire website. It's content not on a single page, and it's also not very granular content, about everything that goes on a page. It's a way to look at all of the content that's going to be covered in a website, and see it all together on one page. And, necessarily, that means some of the details that will ultimately live in a final website will not go on a sitemap.
That's the real trick with sitemaps. How do you describe the full scope and extent of your content, and put the right amount of detail so that you can continue the process into wireframing and design and content development, and quite literally get everyone on the same page. So as we look at our finished document here, you see there's a home page, you see each major page of the site is indicated on that middle layer here, and then in the tertiary layer, you have things like the details of the education portion of the site and the details around making an appointment.
We also have a legend here in the bottom left that indicates how the color coding is working in the site, and we'll look at how to make a legend like that. The point here is that the goal of a sitemap or a bird's eye view is to, in fact, provide that bird's eye view, to provide the big picture and show, on one page, all of the content. And the trick is, how much detail to worry about, how much can really fit in this type of document, and what needs to be pushed aside.
Like all of these UX or architecture diagrams, this will be a living document. It is rare that you just make one in isolation, deliver it to the team, and it's done. So one of the benefits of OmniGraffle is it's so easy to edit things that you can make a lot of changes, and that's good; it's not supposed to be quickly finalized. It's a piece for discussion; all UX documents are a piece for discussion, but particularly a sitemap, which happens early in the process, you are pulling the whole team together, getting everyone to talk together about questions around content and organization.
So just take a moment to take a look at what's going on here, and also, like any of these courses, think about your own content and what you're trying to do in this context. It's unlikely that you're making a site for a veterinary office, but in thinking about how the needs of this site play out in a sitemap, you should be able to extrapolate and think about your own content in this way. So that's just an overview of sitemapping and the goals. Now we can really dig into the OmniGraffle techniques to build a document 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