OmniGraffle for UX and Brainstorming

Course details

In this course, Jason Osder explains what OmniGraffle is, how to create and export projects in it, and how to use OmniGraffle for general design thinking projects, as well as brainstorming, ideation, and collaboration. After briefly introducing OmniGraffle and its interface, Jason dives into org charts, covering topics like how to handle objects on the canvas, creating text elements, grouping objects, and much more. Next, he goes into a variety of techniques you can use to map content, as well techniques for process flows such as creating multiple use case scenarios and diagramming a complex online interaction. Jason discusses wireframes and different ways you can use them. Then he describes how to create mind maps, sketch visual design ideas, and design a rough logo with stencils. Jason concludes by highlighting several useful features that are available in the pro version of OmniGraffle.

Concepts

0. Introduction

01 - User experience and design thinking with OmniGraffle
02 - A quick note before starting

1. Diagramming Organizations - Org Charts

03 - Diagram with shapes and lines
04 - Use text effectively
05 - Style shapes
06 - Style lines
07 - Style and position text
08 - Align shapes
09 - Distribute shapes
10 - Group objects
11 - Create a legend

2. Mapping Content

12 - Organizing content with shapes and text
13 - Controlling connection points with magnets
14 - Finding and using stencils
15 - Using a stencil to create a sitemap
16 - Editing stencil objects to diagram a group
17 - Refining sitemap content
18 - Refining sitemap connections with orthogonal lines
19 - Finalizing the sitemap
20 - Creating an index card graphic
21 - Organizing linear content as virtual index cards

3. Process Flows

22 - Create a process flow diagram with stencils
23 - Edit a process flow based on feedback
24 - Create multiple use case scenarios
25 - Diagram a complex online interaction
26 - Diagram a process that involves real-world and online aspects

4. Wireframes

27 - Choose a wireframe look and stencil
28 - Wireframe a homepage
29 - Edit persistent navigation
30 - Wireframe an advanced search page
31 - Wireframe a search result or browse page
32 - Wireframe a content page for different kinds of media

5. Ideation and Brainstorming

33 - Mind mapping with the Diagram tool
34 - Style mind maps with document styles and layouts
35 - Sketching visual design ideas
36 - Designing a rough logo with stencils

6. Pro Version Highlights

37 - Creating collapsible subgraphs
38 - Styling subgraphs
39 - Convert text to shapes
40 - Editing details with multiple windows
41 - Shared layers
42 - Export Photoshop layers

Conclusion

43 - Next steps