2016
Lynda
Jason Osder
2:42
English

If you've spent much time designing for user experience, you've probably come to appreciate the importance of planning. Having a flexible solution that helps you create design documents as part of your workflow is essential. OmniGraffle is a UX design tool that allows you to create wireframes, sitemaps, flowcharts, and more, to help you organize your site and build an intuitive user experience.
Join Jason Osder as he demonstrates how to use OmniGraffle 6. He shows you how to use basic features, like adding lines, shapes, and text, to create diagrams of page layouts, or wireframes, in addition to advanced features, like working with stencils and templates. He lets you know when he is showing a pro-version feature, like presentation mode and subgraphs, so you can adjust accordingly. Along the way, you'll learn how to improve your documentation by eliminating unnecessary elements to help readers visualize all of a site on one page. As an object-based diagramming program, OmniGraffle has features for executing UX and IA documents. Creating other documents, like use case scenarios, content maps, and models, is also covered.

Introduction
5m 42s
Welcome
52s
OmniGraffle and the UX design process
1m 53s
Pro vs. regular version
1m 51s
Using the exercise files
1m 6s
1. Commonly Used UX Techniques
26m 22s
Set up document files
3m 30s
Shapes
2m 16s
Lines
3m 44s
Text
2m 24s
Alignment and distribution
3m 27s
Group and lock objects
2m 33s
Use canvases and layers
2m 1s
Find and use stencils
6m 27s
2. Create a Sitemap
17m 5s
What is a sitemap?
3m 33s
Build a simple sitemap
5m 24s
Build a stylized sitemap with stencils
4m 34s
Align and group elements
3m 34s
3. Advanced Sitemap Techniques
17m 22s
Customize stencil shapes
3m 51s
Make a legend
6m 39s
Visual design for excess content
4m 4s
Subgraphs for excess content
2m 48s
4. Wireframe the Homepage
32m 49s
What is a wireframe?
1m 19s
Define wireframes based on the sitemap
2m 30s
Set up wireframe background elements
5m 12s
Choose wireframe content styles
4m 19s
Wireframe a navigation bar
5m 29s
Position elements
3m 58s
Add a logo
2m 44s
Make changes to the wireframe
3m 54s
Add comments
3m 24s
5. Complete the Wireframe Process
35m 7s
Wireframe additional pages
3m 22s
Convert the wireframe into a template
3m 30s
Use layers to organize the wireframe
4m 45s
Use canvases for multiple wireframes
2m 39s
Wireframe a process
8m 35s
Add pixel dimensions
7m 6s
Mobile wireframes
5m 10s
6. Additional UX Documents
10m 26s
Use case scenarios
5m 20s
Content maps and models
5m 6s
7. Presentation and Export
16m 58s
Print
3m 15s
Export
5m 51s
Presentation mode
2m 34s
Add interactivity
5m 18s
Conclusion
31s
Goodbye
31s


lynda.com/OmniGraffle-tutorials/UX-Design-Tools-OmniGraffle-6/471660-2.html

Download File Size:400.33 MB

---