With all of the needed elements on the omnigraffle canvas, begin to move and massage these elements into place. This will be done with the selection tool. Resize as needed. Use the dynamic alignment and distribution guides to keep everything neat. The decisions come from discussion with the stakeholders as well as your intuition as the user experience designer.
- A wire frame is starting to come together.…We have our background and our…basic elements all on the page.…Now, it's time to start moving them around…and really dividing up that "real estate" on the page.…So there is a lot of positioning here…and also what I call massaging.…Now, remember we're not doing final design work,…but we are now making decisions about…where things will be placed in relationship…to each other on the page.…So, for starters, I know that this image…is going to be really key and I want it to be…full width, whatever we define full width to be.…
And again, at the moment, we're not really measuring pixels.…But what I am doing is keeping things…even between the edges there.…So if it's full width I'm not…going to go edge-to-edge per say.…I'm not going to take it to there.…But I am going to see that I'm sort of defining…again, not the width in terms of a pixel dimension,…but a width in terms of sort of…the percentage of the screen.…That this is going to be roughly 80% of the entire screen…leaving a comfortable margin on each side.…
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.