Navigation is one of the important elements of a wireframe. Omnigraffle Pro’s table tool is an efficient way to make a navigation bar. Start with making a simple shape. Add to it the longest text from any of the buttons and size for that text. Select this image and use the menu to create new table. Once the table is created, special handles on the edges will allow you to pull out as many cells as needed. Now fill in the names of the other buttons.
- [Voiceover] We're starting to establish…the elements that we need for our wire frame…and the next one I want to design…is the navigation bar.…To do that, we could go to our template,…and there are some different buttons…and bars, various things that we can work with…to create one of these navigation bars,…but I want to make a custom one,…and want to use one of the tools…that's in OmniGraffle Pro called tables.…So let me show you how tables can be really useful…in making a navigation bar and also make…it easy to adjust that navigation bar…once it's created.…
So, I'm gonna start with the shape tool…and what I want is a rectangle or maybe…a rectangle with the rounded corners.…And when you do this, you're not really implying…that you're gonna have rounded corner buttons…on your final navigation bar.…Remember that wire framing is not about final design…so much as the layout or the real estate of the page.…So, in doing this, I just want to create something…that sets it off, and makes it look a little bit…different as navigation makes that clear…
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?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.