Lynda.COM OmniGraffle 5: Creating Web Sitemaps and Wireframes

Author:
Jason Osder

Duration:
02h 15m

Released on:
8/17/2010

Exercise files:
Yes

Software works on:
Mac only


In OmniGraffle 5: Creating Web Sitemaps and Wireframes, Jason Osder explores OmniGraffle, the premier visual diagramming program on the Mac platform and a frequent choice for developing wireframes and sitemaps. This course covers using OmniGraffle's drawing and layout tools, information architecture best practices, and advanced techniques such as creating custom stencils and enhancing diagrams with interactivity. This course also includes sample take-home projects as well as stencil documents and templates to streamline future work. Exercise files accompany the course.
Topics include:

    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



Introduction
Welcome           01m 20s
Understanding the interactive development process           01m 16s
Using the exercise files           00m 51s

1. Using OmniGraffle for Wireframes and Sitemaps
Understanding OmniGraffle's strengths           01m 29s
Using best practices in a sitemap           02m 00s
Using best practices in a wireframe           02m 12s

2. Common Techniques for Wireframes and Sitemaps
Using shapes           02m 38s
Using lines           02m 18s
Working with text           02m 51s
Using stencils           02m 03s
Finding Stencils           04m 01s
Aligning and distributing           03m 12s
Grouping and locking objects           02m 59s

3. Building a Sitemap
Building your first sitemap           03m 19s
Quickly building a sitemap with a stencil           04m 39s
Customizing stencil shapes           03m 30s
Aligning and grouping for sitemaps           03m 26s
Using automatic layouts for sitemaps           03m 17s
Using visual design for excess content           06m 08s
Using subgraphs for excess content           02m 35s
Making a legend           05m 26s
Presenting sitemaps           03m 15s

4. Building a Homepage Wireframe
Defining wireframes based on the sitemap           04m 15s
Setting wireframe background elements           04m 04s
Choosing wireframe content styles           05m 07s
Wireframing a navigation bar           04m 01s
Positioning content elements           05m 14s
Iterating a wireframe based on feedback           04m 56s
Adding comments           03m 01s

5. Completing the Wireframing Process
Converting a homepage wireframe into a template           02m 43s
Using layers to organize your wireframe           03m 28s
Using canvases for multiple related wireframes           03m 37s
Adding pixel dimensions           04m 21s
Wireframing a multistep process           04m 46s
Wireframing for mobile devices           04m 59s
Presenting wireframes           03m 06s

6. Advanced Techniques
Enhancing diagrams with interactivity           04m 27s
Creating a custom wireframing stencil           02m 41s
Creating a custom sitemap document style           05m 30s

Conclusion
Goodbye           00m 33s