Wireframing for mobile devices is becoming necessary for nearly every website. Many of the conventions for mobile wireframes are the same as for browser-based sites. Stencils are particularly useful for wireframing mobile sites. Start with a background look that is appropriate and then browser for more stencil elements that work in this context.
- [Voiceover] I wanna spend a little bit of time…talking about something…that's coming up more and more frequently,…and give some tips on wireframing for mobile devices.…A lot of the principles are the same,…but there's some different tools and especially stencils…that can be really useful for this type of work.…I've got no exercise file on this one,…I actually wanna start by launching the program,…just to give some reminders about how you would do this.…So, really the point is that I would likely start Portrait…rather than Letter if I'm doing a detailed wireframe…for a mobile device.…
I may do Landscape if I wanna put two iPhones side by side,…or two mobile wireframes side by side,…but if I wanna do one large one…that's gonna fit better on a Portrait layout.…So let's go ahead and start with a Portrait layout.…And I don't need my sidebar at the moment,…and I'm personally distracted by the gridlines,…so we'll get rid of those,…and now we're working in Portrait mode,…which is what we want.…We're seeing almost all of our window…
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.