Although wireframe documents do not use actual visual elements from a site, one exception is logos. Place a logo on the site by importing a graphic through drag and drop. Once the graphic is on the canvas resize and place it using the selection tool. Images, once imported function like any other shape object in omnigraffle.
- [Voiceover] The next step is to further customize…or brand this wireframe by adding…the company's real logo to it.…Now I know we've talked about how wireframes…don't generally use the real images,…photographs, or graphics that the site will use.…For me the logo is just one exception…and it's really a question of branding…and selling your work.…Presumably you're working for this company…and their logo is something they're attached to,…so seeing it on this page…it's when it starts to seem real to them…and there's no exact purpose for it.…
Right now it's represented…by just one of these generic blocks,…but we're gonna put in the real logo…just so they can sort of associate…with how that's gonna work and look.…For me anyway it's one exception…to that rule about using real graphics.…And the tool we wanna use in OmniGraffle…is pretty straightforward as well.…It's just importing an image…and manipulating that image inside the interface,…which is not difficult at all.…In fact there's a number of methods…and you can always refer to the essential training…
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.