Managing mock-ups

Written by Verne on June 12th, 2008

The design phase of a website is a fairly standard process for me. I design mock-ups in Photoshop, export them into gif/jpg/png, and send them to the client for approval. Once approved, I slice and dice it and HTMLarize and CSSasize it into an actual webpage. There’s nothing out of the ordinary with this process, and I think it’s what most designers do as well.

I have, however, encountered a few problems with presenting mock-ups to clients. As web-savvy individuals, it’s quite easy to grasp and understand the concept that mock-ups are simply static images that depict what a site would look like. What I’ve found though is that, for everyone else, the idea is incredibly difficult to wrap their mind around.

I always make it as clear as I can that what they are looking at is a static and flat image of their potential site design. Still, I always get questions and comments around:

  • How do I edit the text on this?
  • How come I can’t highlight text?
  • The website is too small (occurs because the browser has shrunken the image by default)!
  • I don’t like the white space that surrounds the site.
  • Can we center the site?

To some extent, I can understand the confusion. They’re looking at something that looks like a website that is inside a browser. But oddly enough… it doesn’t act like a website. What’s going on?!

Today’s appeal to the wisdom of the crowds:

How do you present mock-ups to your clients?

The following thoughts on how to improve my situation have already occurred to me:

  • Place the image on a webpage? People can probably better identify an image when it appears as they normally see them.
  • Use some kind of web-based application to showcase mock-ups? It reinforces the idea that it’s something on ‘display’ and is not a live example.
  • Export mock-ups in PDF? That way they’re not viewing it in a browser, so there’s less expectations for it to function like a website.
  • Skip photoshop and design in HTML? I actually used to do this before I became more comfortable with Photoshop. There are a few debates on this one, and I think it comes down to whatever process best enables your creativity.

Your wisdom on what to do with my troublesome client proved to be so impressive that I wanted to throw this one to you as well. So, how do you manage mock-ups?

Even if you’re not a designer, I’d love to hear about how you present drafts to your clients. Go!

15 Responses

  • Allan Collins

    Try ConceptShare. It’s a web based collaboration tool.

  • Melek

    i generally create an HTML page and place the flattened JPG into it. I also create a full background so they’ll see that the bkgd around the image isn’t actually going to be white. so if it’s a yellow bkgd, i fill the bkgd with yellow, or if it’s a pattern, i use the pattern. that way, they get a feel for a full page look.

    for links and nav not hovering, i create one button in the ON state. Then, when i email the link to the client, i explain that the image they see is a flat JPG and that means the navigation is non-functional right now. but, when i code it, the button “Services” shows what the button will look like when you place your mouse over it. and they seem to get that for the most part.

    must frustrating client i had saw the design in this manner. then, i coded the entire site for them, showing them pages along the way. then, when i finished, i sent it to them so they could test on a test site. they went thru it, checked links, changed things, etc. Then, i said ok, we’re going to launch it and i did. they called and said “oh, i didnt think it was going to look like this. i figured it would be XYZ”… and i was like “well, you’ve been testing on the real site for a week now…what were you thinking was going to happen!???!!” so frustrating. i’m not sure how else to show a client their real true site any better than showing them the real true site. sigh…it’s always something :)

    I’d be very interested in hearing other replies about this.

  • Verne

    @Allan – I’ve tried ConceptShare before and it’s a great tool. However, the problem is that if I’m dealing with a client that doesn’t fully understand the idea of a flat static image representing their site design, then chances are something like ConceptShare would be slightly too complicated for them as well.

    @Melek – I’ve definitely been in your shoes before. I used to make the mock-up into a mock website by adding the background, but I found that it further confused some clients into thinking it was a real website. But I totally feel your pain on the story you shared – the perception of non-tech-savvy people on technology can totally blow my mind sometimes too!

    Thanks for sharing thus far! :)

  • Zinni

    This is why a lot of the time I will send the client a print out of the designs mounted. What you are sending is just a flat representation of what the site will be anyways, so displaying it on a print out is acceptable. Often this extra step also helps reinforce that what you are doing takes time, often times uneducated clients who do not understand that that you are showing them a concept also do not understand the time that goes into designing a websites. The printed mock-up that has been mounted also helps to position your services as a sophisticated process.

    I have had one client who reacted poorly to the printed mock-up however I wrote it off as ignorance and I will stick behind that assumption. This particular client took a very harsh reaction that I felt was in no way rational. I just thought it was worth mentioning as some clients still don’t get the process no matter what you do.

  • C Guilherme Fraenkeç

    I think that´s a common problem that occurs with webdesign, but also with other fields of knowledge such as architecture and engeneering.
    As a engeneering student that became a TI professional focused in web I use different models to develop the various parts of the work.
    Try to construct the navigation of the site first. Use wireframes (pure HTML elements without design) to help your client understand how the elements will work in each page.
    Once the understanding of the navigation and the behavior of the elements in each page is achieved it will be easier to move attention to the design.

  • Renata

    It depends on the client, I think. A tech-savvy client should get a mock up they can play around with. A non-tech-savvy (aka more troublesome) one should get a picture, with a letter that in big, read, CAPITAL letters says “THIS IS A PICTURE”.

    I have a web design client who is a painter. He is about 65 years old, and doesn’t speak English. He used to have requests like “Can we make this a warmer shade of gray?” and “Can you make the snow in this photo whiter? It’s not white enough.” You can train them, as long as you speak with authority, to understand basic things like “There are 256 Web colors. That’s it. Pick out of these.”

  • When Is A Mockup No Longer A Mockup? | Freelancing Online and Blogging Tips from Pro Freelance Blogger

    [...] read a post from Verne Ho at Creative Briefing a few weeks ago in relation to managing mockups. Depending on the client, and the delivery (am I [...]

  • Niki Brown

    I put the jpeg mockup into the background of a webpage and have the design centered and no-repeat. solves that problem!

  • RBeezy

    Verne, I think it’s up to clients to understand what’s going on. A mockup is a facade, it’s not supposed to be the actual thing. If it’s the actual thing, it’s a website. I prefer to “smart-it-up” rather than dumb-it-down for clients. We as designers have to do our homework to understand their history, present and future needs. Why shouldn’t clients have to take a crash course in the language of design?

    It suits their purpose to know their site intimately, that’s the best way for them to finetune their online presence.

    I’m not saying that clients should run around barking hexadecimal colours but they need to get their heads around what a mockup truly is.

    And while we’re on the subject, when’s the last time a designer did a true mockup? Wireframes and thumbnails are what I find truly baffles clients, leaving them in a Scooby-Doo state (Arooo?).

  • 9 of The Best Ways To Present A Website To Clients

    [...] after you present the design, such as the ones Verne Ho of Creating Briefing and many others, have experienced [...]

  • 9 Of The Best Ways To Present A Website To A Client | Rainer's Blog

    [...] after you present the design, such as the ones Verne Ho of Creating Briefing and many others, have experienced [...]

  • Antilogic Media - Design, Technology, SEO, Online Marketing and more… :: Antilogic Media

    [...] after you present the design, such as the ones Verne Ho of Creating Briefing and many others, have experienced [...]

  • JP

    You have to treat them like Dr. House treats his patients. Since you know more than they do, and they are too dim-witted to understand the concept of a jpg, you have to slyly insult them and their intelligence by being witty and condescending in a convincing american accent (it helps if you’re american). They will thank you afterwards and want to have your babies. It happens all the time! To House, that is.

  • codeMYcss – The Blog // Coding your dream website

    [...] after you present the design, such as the ones Verne Ho of Creating Briefing and many others, have experienced [...]

Leave a Reply