Join Jason Osder for an in-depth discussion in this video Wireframing a multistep process, part of OmniGraffle 5: Creating Web Sitemaps and Wireframes.
These days a lot of web sites have multi-step processes that require a user to…go through a set of steps.…Clear examples would be signing up for a new account, or making an online…purchase. When faced with a challenge like this in wireframing, it's often a…good idea to sketch out each step in the process so that other team members…will have a really clear guide as to how this is going to look and work for the end user.…In this movie, we will see how to do just that.…
The idea here is we are now in the process of buying a flower…arrangement online.…This wireframe indicates step 1, and the canvas is called Online Purchase 1.…Step 1 is selecting the arrangement, and down here I have wireframe elements that…indicate there will be a picture of each arrangement and a short description.…The next step is I often find that the user benefits from knowing where they…are in the process.…
So I am going to wireframe the steps themselves for the user to know where…they are in the process.…For the wireframe, I am just going to do this with text, even though there will…
- 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.