Lynda - OmniGraffle 5 Creating Web Sitemaps and Wireframes

Course Summary

Description

Course name:

OmniGraffle 5: Creating Web Sitemaps and Wireframes

Author:

Jason Osder

Duration (hr:min):

02:15

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           01:20

Understanding the interactive development process           01:16

Using the exercise files           00:51

05:41 1. Using OmniGraffle for Wireframes and Sitemaps

Understanding OmniGraffle's strengths           01:29

Using best practices in a sitemap           02:00

Using best practices in a wireframe           02:12

20:02 2. Common Techniques for Wireframes and Sitemaps

Using shapes           02:38

Using lines           02:18

Working with text           02:51

Using stencils           02:03

Finding Stencils           04:01

Aligning and distributing           03:12

Grouping and locking objects           02:59

35:35 3. Building a Sitemap

Building your first sitemap           03:19

Quickly building a sitemap with a stencil           04:39

Customizing stencil shapes           03:30

Aligning and grouping for sitemaps           03:26

Using automatic layouts for sitemaps           03:17

Using visual design for excess content           06:08

Using subgraphs for excess content           02:35

Making a legend           05:26

Presenting sitemaps           03:15

30:38 4. Building a Homepage Wireframe

Defining wireframes based on the sitemap           04:15

Setting wireframe background elements           04:04

Choosing wireframe content styles           05:07

Wireframing a navigation bar           04:01

Positioning content elements           05:14

Iterating a wireframe based on feedback           04:56

Adding comments           03:01

27:00 5. Completing the Wireframing Process

Converting a homepage wireframe into a template           02:43

Using layers to organize your wireframe           03:28

Using canvases for multiple related wireframes           03:37

Adding pixel dimensions           04:21

Wireframing a multistep process           04:46

Wireframing for mobile devices           04:59

Presenting wireframes           03:06

12:38 6. Advanced Techniques

Enhancing diagrams with interactivity           04:27

Creating a custom wireframing stencil           02:41

Creating a custom sitemap document style           05:30

00:33 Conclusion

Goodbye           00:33