OmniGraffle 6 for UX Design

Introduction

• Welcome
• OmniGraffle and the UX design process
• Pro vs. regular version
• Using the exercise files

1. Commonly Used UX Techniques

• Set up document files
• Shapes
• Lines
• Text
• Alignment and distribution
• Group and lock objects
• Use canvases and layers
• Find and use stencils

2. Create a Sitemap

• What is a sitemap?
• Build a simple sitemap
• Build a stylized sitemap with stencils
• Align and group elements

3. Advanced Sitemap Techniques

• Customize stencil shapes
• Make a legend
• Visual design for excess content
• Subgraphs for excess content

4. Wireframe the Homepage

• What is a wireframe?
• Define wireframes based on the sitemap
• Set up wireframe background elements
• Choose wireframe content styles
• Wireframe a navigation bar
• Position elements
• Add a logo
• Make changes to the wireframe
• Add comments

5. Complete the Wireframe Process

• Wireframe additional pages
• Convert the wireframe into a template
• Use layers to organize the wireframe
• Use canvases for multiple wireframes
• Wireframe a process
• Add pixel dimensions
• Mobile wireframes

6. Additional UX Documents

• Use case scenarios
• Content maps and models

7. Presentation and Export

• Print
• Export
• Presentation mode
• Add interactivity

Conclusion

• Goodbye