Your SlideShare is downloading. ×
  • Like
Presenting Visual Information(Notes)
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Presenting Visual Information(Notes)



Published in Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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 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
  • 2. Which Tools? attribution: 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: 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: 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!
  • 8. Presentation Tips
  • 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: 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:
  • 17. Define the Design Problem • Be clear • Tell your audience what feedback is needed • Describe the elements being examined • Use arrows, circle things
  • 18. Other Sharing Tools
  • 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 •