Top
How to Avoid Client Chaos With Effective Screenshots - Colorburned
fade
7658
single,single-post,postid-7658,single-format-standard,eltd-core-1.0,flow-ver-1.0.1,eltd-smooth-scroll,eltd-smooth-page-transitions,ajax,eltd-blog-installed,page-template-blog-standard,eltd-header-vertical,eltd-fixed-on-scroll,eltd-default-mobile-header,eltd-sticky-up-mobile-header,eltd-menu-item-first-level-bg-color,eltd-dropdown-default,wpb-js-composer js-comp-ver-4.9.2,vc_responsive
avoid-client-chaos

How to Avoid Client Chaos With Effective Screenshots

Some days, it seems like clients are just trying to be impossible. You ask them to click a screen shot image to see it at full size, and they continue talking about how the font in the thumbnail is too small to read. Or, you explain to them that the color calibration on their monitor is clearly off if they’re seeing everything in black and white, and they continue to ask you to add some color to the site.

But, the truth is (save a few, very rare exceptions), clients aren’t stupid. It’s just that this process of working with a web designer is one that they’re not used to. And because it’s what you do all day, it can be easy to lose sight of the way they approach the process.

Fortunately, there are some really easy ways to approach the design process that will smooth things over for both you and them. Here’s how you can handle screen shots so that clients are better able to imagine their new website.

Don’t Email Screen Shots to Your Client.

Working with a lawyer on a site design, he asked if I could email the designs to his assistant instead of posting them to our client area. He thought it would be more secure, and I figured there’d be no harm.

But, when all was said and done, it turned out the client was looking at the designs I sent at 200% zoom instead of at full size, so there were parts of the finished product that were “way too small.” (Turned out, they wanted the body text at 20px, not the much-more-normal-looking 10px.)

You never have complete control over what the client is looking at on their monitor. From color to resolution, to buggy IE vs Firefox differences, there’s a lot that’s beyond your control. But, you can exercise a bit more control by doing two things:

  1. Asking what the clients’ resolution is before beginning work. It’s a big time saver to always make sure your screen shots will fit well within the boundaries of the client’s monitor. and;
  2. Never uploading an image bigger than their monitor. That way, IE won’t shrink the image down without their knowledge; and;
  3. Sticking with your client area to show them designs.

Don’t do Anything Fancy.

I’d seen another designer deliver screen shots with “fancy” effects about five years ago (in this case, a drop shadow and one pixel border). I thought it looked nice and made the site seem more real.

In fact, it simply confused the client who called me on the phone and spent fifteen minutes explaining that her boss hated drop shadows and could I please, please, please remove it before he saw it.

Stay away from fancy. Just keep ’em plain. In your portfolio, sure, decorate away. But, when you’re showing it to the client, anything extraneous will only distract.

fancy

Set the Background Color.

I used to always display screen shots on a white background and just explain to the client that the background would extend.

They never quite understood, and when I’d post the final code, they’d say, “But we thought it was going to have that white border all around it. We liked the white border.”

This one’s not the end of the world, certainly. You can always add a “white border” to the finished product. But, it’s far better to simply set the graphic on a background that’s the right color so that there’s no room for confusion.

If you’re displaying multiple design options, crop them into thumbnails, don’t shrink them into thumbnails.

I like to give clients a full page where they can see everything we’ve done so far so they can scroll back. But, I used to simply shrink the full size mockups down into smaller-sized images.

Don’t do it that way. Even though I told clients to click on an image to see it full size, they would still talk about how the shrunken image was too small. So, instead, crop it so that it is an unmistakable thumbnail, and your clients will understand that they need to click to see the full size version.

thumbnails

Ask lots of questions before making changes.

Sometimes, clients really do say things that are nonessential. (Like the client who wanted the logo to be “the only thing people saw when they arrived at the site.”) But, more often than not, they’re just not explaining themselves in the way you’d explain the same thing.

So, if the client says, “The flow’s all wrong” instead of assuming they mean the flow of the body text, ask more questions to pinpoint what they mean. It’s always okay to say, “I’m not sure I understand, can you tell me more?” or even a simple, “Tell me what you mean by that.”

As long as you’re open to their input, clients will be happy to elaborate. They want you to understand, so let them explain it in a different way.

Conclusion

By following these guidelines for screen shots, you’ll smooth the way to a much more productive, easy design process with your clients.

Jessica Albon

Jessica Albon specializes in <a href="http://www.thriveyourtribe.com">WordPress Design</a> and is teaching an upcoming class on <a href="http://www.thriveyourtribe.com/30daycall">Emergency Client Attraction for Web Designers</a>. For more information on Jessica you can visit her <a href="http://www.thriveyourtribe.com/blog">blog</a> or follow her on <a href="http://www.twitter.com/thriveyourtribe">Twitter</a>.

  • http://relativelyfixed.com Matt

    Great post with great advice!
    [rq=625258,0,blog][/rq]10 Great & Interesting Band Websites

  • http://www.webgrafismo.com Pedro Magalhães

    Clients sometimes can give us so many headaches!
    Thanks 4 the tips! Certainly they will help many of us.
    [rq=625367,0,blog][/rq]16 Vídeos Tutoriais para Aprender PHP

  • http://casseylim.com Casseylim

    Good advice! thank you for sharing
    [rq=626361,0,blog][/rq]Facebook introduces ‘@’ name tagging

  • http://www.bkarp.com Brett

    lol yeah I’ve had similar feedback about white borders before. Great post!

  • http://hbuchel.tumblr.com Heather

    Agreed on the white borders! haha. Even if you explain they won’t be there, that sometimes goes in one ear and out the other…
    [rq=633397,0,blog][/rq]The new Year 200X website

  • http://www.thedesignmag.com Thomson – The Design Mag

    Very useful advice.
    I also come across problems like this with clients. Sticking with your client area to show them design is the best tip.

  • Pingback: The week in links 18/09/09 - Craig Baldwin's Blog()

  • http://mysite.verizon.net/versak/ versak

    i always give 20 questions before showing anything to eliminate any confusion. as well as asking for screen resolution, i find out what browser and whether they use a mac or a pc.

  • http://www.anistock.com brian o’connell

    excellent design tips on the creative process

  • http://www.d-lists.co.uk Michael Wilson

    Who would have thought so many issues could be created just by sending screenshots?

    There’s some nice tips here to remember.
    [rq=682025,0,blog][/rq]Awesome Designer Showcase – Meka

  • http://www.marketingmutt.com/mutts Stan

    The thumbnail tip is priceless, I will start using it today. “The image is too small” quip drives me nuts…
    [rq=697530,0,blog][/rq]6 Invoicing Services That Make You Look Like a Pro

  • http://www.bytal.com.ar Agustin Ruiz

    I usually just put my mockups in an html so they wont shrink, with the expandible background and everything like it was the real site, but only jpg.

    It works just fine, and the client never sees a smaller or bigger site. I just upload it and give my client the web address so they can seet

    Try it, it’s simpler! :D

  • http://www.dai-media.com DAI Media

    good advice.

    I always send to my client a flash clip with the image and no escale for view at 100% and no deforming the proyect who design is at 1680 x 1200 but with the principal content in 900 x 600 the rest only visuals efect and design.
    [rq=992780,0,blog][/rq]Valencia – Agora