The goal of a wireframe is to visually show the layout of elements on a page, but sometimes there are things that are not totally clear with only visuals. The solution in this case is to use a comment or note. When making comments or notes, use a style and clearly differentiates this from the content. Some stencils have objects for this but they can also be made with stylized shapes.
- [Voiceover] We understand at this point…that, much like an architectural drawing,…the purpose of the wireframe is to map out where things…are gonna go on the page,…but all of this is about communications,…and there's definitely times where there are relevant things…that you need to add,…but they don't really fit into this schema,…so it's perfectly acceptable to use notes,…just little blocks of text to indicate something…that's not gonna be perfectly clear just from the diagram.…The trick here is you don't want these notes…to be confused with your actual content,…and the way that you design and place these matters.…
So, if we look at our stencil again at Konigi,…he's got some of these types of,…like these sticky notes,…this is kind of what we're talking about,…that, just like we don't use any color…on the wireframe itself,…that if you do use a blue or a yellow and a drop shadow…they kind of stick out a little bit.…That's kind of what we want.…I'm actually gonna design my own style,…keep it a little simpler,…and just start by making shape for our notes,…
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.