In Omnigraffle, start with the homepage wireframe that is already made and use it as a temple to wireframe the other needed page templates. Selects and delete the elements that are unique to the home page. In this example, the navigation bar needs to be resized and moved. Place additional elements according to the team discussions and needs of the content.
- [Voiceover] We've wireframed a homepage so far,…but as we discussed we likely need wireframes…for each type of page we have on the site,…according to the site map.…So what we wanna do now, is use the base looks…that we've established doing the homepage wireframe…and adapt it into one of the content page templates.…So this is first done through discussion…and analysis of the content and then ultimately through…manipulating and massaging the elements in OmniGraffle.…So that's what we're gonna do now…and again, we've discussed this with the team,…and the biggest change we wanna do…is everywhere but the homepage.…
We wanna take the navigation bar…and make it smaller and place it in the top right corner,…which is a little more traditional.…And I actually argued for this for all of the pages,…but the compromise was that these elements would be central…in the middle of the page, on the homepage only,…and then they'd move up to the top right.…There's some other related adjustments,…but let's start moving things around.…
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.