Join Jason Osder for an in-depth discussion in this video Defining wireframes based on the sitemap, part of OmniGraffle 5: Creating Web Sitemaps and Wireframes.
The sitemap is done and approved.…It's time to move forward into the next stage of development: wireframe.…To move forward, we're actually going to start with this sitemap and use it to…define what wireframes we actually need.…I'm going to show you exactly how that works in this movie.…Here, I have our completed sitemap.…This next step can happen as easily on OmniGraffle as just on a sheet of paper.…Often I just have a printout of this, and the steps that I'm about to do,…I'll just do with a pen. But for right now, I'm going to do the same steps…inside OmniGraffle, just to show you how it works.…
So basically, I need to analyze this sitemap.…I'm going to start from the top with the Homepage.…You always know your homepage is going to need a wireframe.…Every major page on your site is going to need one, and you start with the homepage.…So I usually mark a little 1 next to my first wireframe.…So I'm going to use the Text tool and just make a 1, but that's not really going…to be big enough to stand out and do the job I want it to.…
- 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.