Presenting Visual Information

Ben MacNeillUser Interface Designer, eXtension

(in order to get good feedback)

WhichTools?

attribution: http://flickr.com/photos/eliw/351059702/

Work Rough to Smooth• Sketches

• Wireframes

• Image Mock-ups

attribution: http://flickr.com/photos/grufnik/2391851978/

Sketch Rough“When you sketch with a thin tip you tend to draw at a higher resolution and worry a bit too much about making things look good. Sharpies encourage you to ignore details early on.”

37signals

Wireframes

attribution: http://flickr.com/photos/malloy/133630118/

• Layout

• Elements

• Interactions

Blocks and Text

Image Mock-ups

Presentation Tips

Provide a CommonPoint of

Reference

100%Show Comps at

Distinguish Edges

borders drop shadows

Don’t let Color Distract

Don’t let Color Distract

How to Share? • Email

• Wiki/blog

• Google Presentations

attribution: http://flickr.com/photos/hrossvt/127105038/

Google Presentations

Be Specific

attribution: http://flickr.com/photos/jasoneppink/14838876/

Define the Design Problem

• Be clear

• Tell your audience what feedback is needed

• Describe the elements being examined

• Use arrows, circle things

Other Sharing Tools

Thanks!

• Ben MacNeill

• ben.macneill@extension.org

• Notes for this presentation are available on Slideshare:http://www.slideshare.net/chillnc/presenting-visual-informationnotes-presentation