SlideShare a Scribd company logo

Presenting Visual Information(Notes)

•
•
Ben MacNeill
Ben MacNeill

The document discusses best practices for presenting visual information in order to receive useful feedback, such as starting with low-fidelity sketches and wireframes before refining designs, providing context and specifying what feedback is needed, and using tools like Google Presentations that allow sharing designs at full resolution without additional formatting that could distract from the design.

1 of 21
Download to read offline
Presenting Visual Information (in order to get good feedback) Ben MacNeill User Interface Designer, eXtension This version of the presentation includes notes. You can view the presentation without notes at http://www.slideshare.net/ chillnc Slideshare doesn't host Keynote files (this was uploaded as a PDF), but if you'd like a copy, just shoot me an email at ben.macneill@extension.org
Which Tools? attribution: http://flickr.com/photos/eliw/351059702/ You have a toolbox. choose the right tools. Photoshop, Illustrator, Sharpie marker, Skitch... all trade-offs between speed and resolution. The medium determines the type of feedback you are going to get.
Work Rough to Smooth • Sketches • Wireframes • Image Mock-ups attribution: http://flickr.com/photos/grufnik/2391851978/ With new ideas, work rough to smooth. Start with low resolution tool and refine your tool as you get feedback on critical issues. Don't dive straight into Photoshop. It's frustrating if you send out a design and the feedback misses the issue. It probably means you didn't properly frame the issue.
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 Important! The resolution of your design dictates the resolution of your feedback. In these designs no one is going to say quot;The columns don't line up.quot; That's what you want at this stage.
Wireframes • Layout • Elements • Interactions attribution: http://flickr.com/photos/malloy/133630118/ Provides a layout of page elements and interactions. Make decisions about how the elements relate to each other, but not the look and feel of individual elements. The focus is on blocks of content and interface elements.
Blocks and Text blocks of content and interface elements. For example, the article title is going to be important, we don't say how we're going to indicate that importance, only established its hierarchy. Color serves an indicator in this wireframe. Blue text are links. the red text identifies the site page
Image Mock-ups when it's pixel perfect, people will focus on pixels. Don't be surprised by this!
Presentation Tips
Provide a Common Point of Reference Provide a common point of reference. Otherwise, it's hard to tell if someone is confusing the page/slide number with the image number.
Show Comps at 100% your audience needs to see it full-size so they can judge relationships, read the text and see crisp lines. Make sure that you don't scale your images and make sure your presentation tool doesn't either.
Distinguish Edges borders drop shadows Use a drop shadow or border distinguish screenshot from the tool you are using to display. If your design uses a lot of white space, it may be very difficult for someone else to distinguish your design from elements in the medium in which you are presenting. Goes for email especially.
Don’t let Color Distract Color is a big issue for some people. solve this problem by presenting mock-ups in grayscale. It completely takes that issue off the table.
Don’t let Color Distract If you are going to talk about color, try to only focus on the color. A mistake that some people make when presenting a series of mock-ups is changing too many variables across a series of mock-ups. Focus on one variable. Highlight the differences in your mock-ups. It's too hard to objectively juggle multiple changes without resorting quot;well, I just like this one betterquot;. the problem you are probably trying to solve an interaction or layout issue. Save the color for last. Get the sign-off on the layout, element relationships, hierarchy and interaction first.
How to Share? • Email • Wiki/blog • Google Presentations attribution: http://flickr.com/photos/hrossvt/127105038/ send files, email attachments may get shrunk down, stacked up next to each other wikis and blog have extra chrome - the navigation and interface of the wiki and blog itself Google Presentation lets you share online at 100%.
Google Presentations Letter labels. 100%. A little information for context. Bookmarkable.
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
This is the better tool. If you have a mac, you should be using skitch
Jing does 80% of what skitch does, but also does video.
Thanks! • Ben MacNeill • ben.macneill@extension.org

More Related Content

Presenting Visual Information(Notes)

  • 1. Presenting Visual Information (in order to get good feedback) Ben MacNeill User Interface Designer, eXtension This version of the presentation includes notes. You can view the presentation without notes at http://www.slideshare.net/ chillnc Slideshare doesn't host Keynote files (this was uploaded as a PDF), but if you'd like a copy, just shoot me an email at ben.macneill@extension.org
  • 2. Which Tools? attribution: http://flickr.com/photos/eliw/351059702/ You have a toolbox. choose the right tools. Photoshop, Illustrator, Sharpie marker, Skitch... all trade-offs between speed and resolution. The medium determines the type of feedback you are going to get.
  • 3. Work Rough to Smooth • Sketches • Wireframes • Image Mock-ups attribution: http://flickr.com/photos/grufnik/2391851978/ With new ideas, work rough to smooth. Start with low resolution tool and refine your tool as you get feedback on critical issues. Don't dive straight into Photoshop. It's frustrating if you send out a design and the feedback misses the issue. It probably means you didn't properly frame the issue.
  • 4. 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 Important! The resolution of your design dictates the resolution of your feedback. In these designs no one is going to say quot;The columns don't line up.quot; That's what you want at this stage.
  • 5. Wireframes • Layout • Elements • Interactions attribution: http://flickr.com/photos/malloy/133630118/ Provides a layout of page elements and interactions. Make decisions about how the elements relate to each other, but not the look and feel of individual elements. The focus is on blocks of content and interface elements.
  • 6. Blocks and Text blocks of content and interface elements. For example, the article title is going to be important, we don't say how we're going to indicate that importance, only established its hierarchy. Color serves an indicator in this wireframe. Blue text are links. the red text identifies the site page
  • 7. Image Mock-ups when it's pixel perfect, people will focus on pixels. Don't be surprised by this!
  • 9. Provide a Common Point of Reference Provide a common point of reference. Otherwise, it's hard to tell if someone is confusing the page/slide number with the image number.
  • 10. Show Comps at 100% your audience needs to see it full-size so they can judge relationships, read the text and see crisp lines. Make sure that you don't scale your images and make sure your presentation tool doesn't either.
  • 11. Distinguish Edges borders drop shadows Use a drop shadow or border distinguish screenshot from the tool you are using to display. If your design uses a lot of white space, it may be very difficult for someone else to distinguish your design from elements in the medium in which you are presenting. Goes for email especially.
  • 12. Don’t let Color Distract Color is a big issue for some people. solve this problem by presenting mock-ups in grayscale. It completely takes that issue off the table.
  • 13. Don’t let Color Distract If you are going to talk about color, try to only focus on the color. A mistake that some people make when presenting a series of mock-ups is changing too many variables across a series of mock-ups. Focus on one variable. Highlight the differences in your mock-ups. It's too hard to objectively juggle multiple changes without resorting quot;well, I just like this one betterquot;. the problem you are probably trying to solve an interaction or layout issue. Save the color for last. Get the sign-off on the layout, element relationships, hierarchy and interaction first.
  • 14. How to Share? • Email • Wiki/blog • Google Presentations attribution: http://flickr.com/photos/hrossvt/127105038/ send files, email attachments may get shrunk down, stacked up next to each other wikis and blog have extra chrome - the navigation and interface of the wiki and blog itself Google Presentation lets you share online at 100%.
  • 15. Google Presentations Letter labels. 100%. A little information for context. Bookmarkable.
  • 16. Be Specific attribution: http://flickr.com/photos/jasoneppink/14838876/
  • 17. Define the Design Problem • Be clear • Tell your audience what feedback is needed • Describe the elements being examined • Use arrows, circle things
  • 19. This is the better tool. If you have a mac, you should be using skitch
  • 20. Jing does 80% of what skitch does, but also does video.
  • 21. Thanks! • Ben MacNeill • ben.macneill@extension.org