Depending on the exact user experience design process being used, sometimes there is the need for a wireframe to indicate pixel dimensions. In this case, provide these measurements using lines with a specific end cap. Use line labels to indicate the pixel measurement. Create a new layer for these indicators. The wireframe itself does not need to be accurate to the pixel, it is more about special relationships.
- [Voiceover] We've talked a lot about how the purpose…of the wireframe is to plot out how the real estate…on the page is gonna work,…the physical space that we're working with.…And, depending on exactly the process in the shop…you're working, sometimes this is pixel-accurate,…and sometimes it's not.…That is, how much is really decided at the wireframe stage,…and how much detail is added at the design phase?…In the event that your job as the UX designer…is to get pixel-accurate, it's often a good idea…to make those important notes about pixel dimensions…right on the wireframe, so that's what we wanna do here.…
I'm starting with our fairly built-out wireframe…with multiple layers and canvases,…but we're just gonna work on the home page canvas…for this exercise, and we're gonna do an example of this,…and then you would know on your own wireframe…exactly how much detail to put in…in terms of these pixel dimensions.…So here we are, and I'm gonna actually turn off…the notes layer, because I think that will be in our way,…
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.