Join Jason Osder for an in-depth discussion in this video Using best practices in a wireframe, part of OmniGraffle 5: Creating Web Sitemaps and Wireframes.
Wireframes are a representation of the layout of a web page, rendered with…structural clarity and without design elements that will distract.…The idea is to denote how content and navigation are going to manifest on an…individual web page.…If we use a comparison to regular architecture, wireframes are a lot like floor plans.…That's the really big picture.…Here are some practical things to keep in mind as you design wireframes.…
First, there are certain things you really need to avoid in wireframes for…clarity and top of the list is colors.…Color denotes style and design, whether you want it to or not;…you can't tell someone to ignore the red.…It's just not possible.…So while color coding is acceptable on a sitemap, you really need to avoid it on a wireframe.…Special fonts work pretty much the same way.…Stick to a really basic palette of fonts and just use different font weights and…sizes to denote the conceptual weight of different headings.…
Avoid any special fonts.…Generally you need to make a wireframe for each major template, or page type, in your site.…
- Developing for interactive media
- Using shapes and lines for information architecture
- Working with text
- Using and customizing stencils
- Aligning, grouping, and locking objects
- Using automatic layouts for sitemaps
- Positioning content elements
- Iterating wireframes based on feedback
- Wireframing for mobile devices
Skill Level Beginner
1. Using OmniGraffle for Wireframes and Sitemaps
2. Common Techniques for Wireframes and Sitemaps
3. Building a Sitemap
4. Building a Homepage Wireframe
5. Completing the Wireframing Process
6. Advanced Techniques
- 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.