The sitemap that was previously built with omnigraffle is going to be useful to define what wireframes are needed for a site. In general, each type of page, also called a template, needs its own wireframe. Looking at the site map, perhaps printing it out and marking it up will indicate when wireframes are needed. There is no need to wireframe every page, just every type of page. There may be many content pages with different content, but only one content wireframe needed.
- [Voiceover] Before we get started building wire frames,…I wanted to discuss the way that the site map…relates to the wire frames…or specifically relates to how many wire frames you build…for any site…and the idea here is that for every type of page…or template that you have on the site,…you likely need a separate wire frame…for that page.…Not every time, but it is the site map…that gives you a guide for this.…So basically, we figure from looking at this…that we'll need a homepage wire frame.…Generally, home pages don't share the exact layout…of the interior pages.…
Again, sometimes they do.…There's always exceptions to these rules.…What we've defined as content pages…are likely all on the same template…so we probably also need a template…or wire frame that is a content page.…That's a general interior page…and then we have these pink and red ones…that probably need some specific care…to wire frame how a process…such as making an appointment will work.…How will the interactive pages…where you choose things like the time…
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.