In user experience design, one place to always pay special attention to is when there is a process for the user, such as an online sale or making an appointment. Use a wireframe to map out in detail how all of the interactive element will manifest on one or more pages. Stencils can be useful in this regard as they may already contain complex elements needed for the process.
- [Voiceover] One area bears special attention…when you're wireframing,…and that's any time you have an online process.…Often this is something like making an online purchase…where you have a shopping cart, confirmation,…credit cards, things of that nature.…In our case, it's requesting an appointment…for your pet at this veterinary clinic.…And you may remember on the sitemap…that we designated this with a red color…and we have several pages designated on the sitemap…about how this will work.…So now's the time to get more granular…and actually do the thinking about what choices…are necessary, and also how they'll manifest…on a page.…
So we want to set that up as a wireframe in OmniGraffle,…but as we work through this in discussion with the team,…we realize it actually deviates a little bit…from the sitemap, and that's okay, and we may,…in time, want to edit that sitemap.…We're not going to do that in this lesson,…but we use the sitemap for a guide,…and then at the wireframing stages,…if changes are necessary, then so be it,…
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.