OmniGraffle for UX and Brainstorming

Learn the basics of using OmniGraffle, a Mac-only tool, then explore ways to use it for ideation and brainstorming.

Introduction

• User experience and design thinking with OmniGraffle
• A quick note before starting

1. Diagramming Organizations: Org Charts

• Diagram with shapes and lines
• Use text effectively
• Style shapes
• Style lines
• Style and position text
• Align shapes
• Distribute shapes
• Group objects
• Create a legend

2. Mapping Content

• Organizing content with shapes and text
• Controlling connection points with magnets
• Finding and using stencils
• Using a stencil to create a sitemap
• Editing stencil objects to diagram a group
• Refining sitemap content
• Refining sitemap connections with orthogonal lines
• Finalizing the sitemap
• Creating an index card graphic
• Organizing linear content as virtual index cards

3. Process Flows

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

4. Wireframes

• Choose a wireframe look and stencil
• Wireframe a homepage
• Edit persistent navigation
• Wireframe an advanced search page
• Wireframe a search result or browse page
• Wireframe a content page for different kinds of media

5. Ideation and Brainstorming

• Mind mapping with the Diagram tool
• Style mind maps with document styles and layouts
• Sketching visual design ideas
• Designing a rough logo with stencils

6. Pro Version Highlights

• Creating collapsible subgraphs
• Styling subgraphs
• Convert text to shapes
• Editing details with multiple windows
• Shared layers
• Export Photoshop layers

Conclusion

• Next steps