A wireframe is a user experience design document that comes after the sitemap in the UX process. The purpose of a wireframe is to layout what objects are needed on each type of page in a site and where the will go. Wireframes are related to but separate from visual design. Wireframes should use simple representational visuals. Real photos, graphics, fonts, and colors should not be used. Rather, placement, special relationships and hierarchy should be emphasized.
- View Offline
- [Voiceover] Now that our site map is complete, the next type of UX document that we want to work on is a wireframe. If you're not familiar with wireframes, the idea is that these are a diagram of page layouts, and some of the keys to wireframing are to indicate the layout of elements, how the real estate on the webpage is going to be allotted, but not do actual design work. Now, it's a given that these things are related, but you don't wanna use, for instance, the real images on a wireframe.
You don't wanna use real pictures. You just wanna use represent them with boxes. You don't wanna use real fonts or colors. You do wanna indicate hierarchy in the text types. So it is meaningful that this is the top level headline, the biggest thing on the page. The navigation bar in this text, I would probably call it deck text, is smaller, and that this is smaller still. But it's about hierarchy, not the actual size, and not the font or the color.
So these are some of the principles of wireframing, and as we go through and build this wireframe that you're seeing here, you'll get more indications of why OmniGraffle is such a powerful program for doing this type of UX design work.
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