To begin the content of the wireframe in omnigraffle, choose elements from the chosen stencil to represent the elements needed on the page. Don't worry about exact size or placement at this moment. Remember that there is no need for real images or textual content. Represent hierarchy it text styles with size and font weight, not fonts or colors.
- View Offline
- Exercise Files
- [Voiceover] We've got the very basics of our wire frame…working and we've chosen the background…as well as the style or stencil that we're gonna use.…The next step is to get some more of the elements…that we plan on using out into the canvas…and out on the playing field, as I like to say.…And, I'm not gonna worry in this lesson…about placing everything, that will come later.…I just want to sort of, throw out there…some of the things that I know we're gonna need…and choose how I'm gonna represent them.…And I know I'm gonna need a heading,…so I'm gonna scroll down to where we've got…some good text elements.…
You can see how, even in the stencil,…things are set up as hierarchies,…such as heading one, two, three and so on.…We're gonna use that but we can also adapt it to our needs.…But always keep in mind, just the way this is working,…that hierarchy is represented in the simplest possible way,…usually using size and font weight but…not different fonts or colors or anything like that.…So go ahead and take heading one out there and…
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.