Overview
-
Learn how to create UX design documents using OmniGraffle 6. Jason Osder explains how to create sitemaps, diagrams, wireframes for desktop and mobile, content maps, and models.
Syllabus
-
Introduction
- Welcome
- OmniGraffle and the UX design process
- Pro vs. regular version
- Using the exercise files
- Set up document files
- Shapes
- Lines
- Text
- Alignment and distribution
- Group and lock objects
- Use canvases and layers
- Find and use stencils
- What is a sitemap?
- Build a simple sitemap
- Build a stylized sitemap with stencils
- Align and group elements
- Customize stencil shapes
- Make a legend
- Visual design for excess content
- Subgraphs for excess content
- 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
- 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
- Use case scenarios
- Content maps and models
- Export
- Presentation mode
- Add interactivity
- Goodbye
