The first step in creating wireframes is setting up the background elements. Search for a stencil that has the frame (ie. Browser window graphic) that you want to use. Place this on the canvas. Resize as needed. Also create a title for the page with the text tool. When the background elements are sized and placed correctly, it is a good idea to lock these elements, particularly the browser window, as most of the wireframe work will take place on top of that graphic.
- [Voiceover] It's time to start building our wireframes,…and we're gonna start by setting up our background elements.…As you can see here, I've started a new document…and I've put it in landscape mode.…I've turned off the gridlines.…We've seen all those steps before.…So this is a comfortable starting point.…I'm also in my stencils inspector,…which is the far right on the top tabs here.…Because the next thing we wanna do…is choose a stencil to work with to make our wireframes.…Now it's not 100% necessary that you have a stencil,…but I strongly recommend it.…It saves you a lot of time building individual elements.…
And you can see, built into the program itself,…there's a couple relevant stencils.…iOS is not gonna be relevant for us right now,…but Konigi and Mac OS X could work for us.…So let's take a look and just remember if you don't find…what you like here in the built-in package,…there's more to search for online.…So this one and ones that look like this…I actually really don't like…and recommend that you don't use.…
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.