Photoshop mockups vs. Client Expectations

21 Apr

Posted by tjmapes under General

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

What is the best way to present a site design to a client? I have no idea. The way (at least in my mind) that most design shops do this is by presenting the client with a photoshop mockup of how their site’s design will layout on screen.

Is this a good thing? I think, absolutley not. However, how else can you portray your design for a client and have them understand the visual aspects for each design element properly?

You really can’t. Photoshop mockups (being necessary or not) have their pros and cons.

The Pros:

1. PS mockups visually show exactly how the client’s site will appear on screen.

2. Gives the designer a better understanding of how he will lay the page out when it comes time to code it.

3. Give the client a chance for revisions and comments on certain likes and dislikes.

The Cons: (Not under ALL circumstances)

1. Unless you are building the site using tables (probably with spacer images for separation etc.) most of the time, when you show a client a design from an image file created from photoshop, it will usually never look 100% the same when it comes time to lay that out in html. (Thats why I stress using xhtml/css for layouts but what do I know.)

1a. Once a client see’s their new site all mocked up from an image created from photoshop, they expect it to look, exactly like that. Which is obviously what I would think too if I were the client in this particular situation.

I believe Photoshop mockups are the biggest catch 22s that designers have to deal with when trying to present something to the client for these reasons (especially if thats how they are expected to do things at their place of work).

But, is there another way to show someone who, lets say doesn’t know squat about html and laying out a page? Or doesn’t know anything about design? Or has never used photoshop or any wysiwyg html editors before? Once again, I’d like to know.

If I were to put myself in the novice client’s shoes, no. I’d want to see a ‘picture’ of how my site that I’m paying someone else to build me, is going to look. So I can make revisions, comments etc. This I totally understand especially because that’s where the first impression really seems to come from anyways, the design, the look and feel of the site, and that is very important.

Once again, for MOST clients, this usually isn’t a problem, EVEN if the mockup and coded layout differ a bit from one to the other. Some clients however, expect it to look EXACTLY the same.
I see the need for Photoshop mockups, but I think they are a waste of time honestly.

If a client came to DESIGN SHOP A and said, ‘I want a site that has these particular elements, and this functionality, and this is where I want both to be placed on the page,’ wouldn’t it be nice to just go with all the client’s requests and visions, and design their site and lay it all out at the same time? Skipping that extra step of revisions and comments etc, at least before you even had the chance to lay it out. (which adds on another x amount of hours and another x amount of dollar $$$ from the client’s pocket)

Another argument I have against this process is the fact that, somedays, I just flat out don’t have it. Meaning, I get assigned a new project and I do the design yadda yadda, great right? Also while designing, I TRY to think how this will all layout on the screen when certain areas have more content, or the font size is increased etc etc. But like I said, somedays I just don’t ‘have it’.

So that is why, in a perfect world, I like to design AS I lay out/build the site. Then you would know instantly what pitfalls you’d come across and be able to change them on the fly between the design and the layout.
Maybe I’m no longer making any sense, and if so I appoligize.

I guess what I’m really trying to get from this post is some understanding of how others deal with this process. The proecss of getting a project, learning about the client’s needs and wants, designing their site, taking revisions and suggestions, and laying it all out (and then content integration on top of that).

What is the magical (best) experience from conception to completion? Can someone comment on thier experiences and their processes when it comes to situations like these? All I wanted is to share a little, and get some valuable information back from readers, so if you have any insights, please feel free to share!

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.

If you enjoyed this post, make sure you subscribe to my RSS feed!

Get GetANewBrowser delivered to your inbox

No related posts, you should check out...

April 20, 2006 -- .NET can play too
October 11, 2007 -- On Google and Jaiku
March 8, 2007 -- I want this job
November 3, 2008 -- Highlight Midwest 2008 Rocked
December 10, 2008 -- Brian Duffy - A Victim of Gannett Layoffs

9 Responses

Kuswanto

April 22nd, 2006 at 12:17 am
1

I don’t get much web design project.
But most of my web design project started creating mockups how the “face” of the website gonna look like. My client mostly aware of xHTML and css, they are devs too.

So if i stumblo on broswer bugs (mostly IE) when i translate the mockup to xHTML and CSS, they can understand why the differences beetween these browser arise.

Actually this is not how we create the mockup, but how we communicate our ideas to clients, and vice versa. Understanding what the client needs will be speeding up the work process, and get pay fast too :)

cheers,
tj

April 22nd, 2006 at 11:16 am
2

I like the way you think. I think with just some group discussions and a little extra communication, I think we can eliminate the ‘finished product’ mockup we are all so used to.
Andy

April 22nd, 2006 at 1:55 pm
3

At the company I work at now, we do Photoshop and Fireworks mockups to present to clients.

Usually, we don’t get any comments like “how come it looks different from the screenshots you present to us?” When I put together the design mockup in Photoshop, I try to make it to where I will be able to code it into a XHTML/CSS layout afterwards. If I can’t do something into XHTML/CSS, then I won’t do it or show it in the mockup.

There are always alternatives you can do and still present almost the same idea to the client.
Harmony

April 25th, 2006 at 5:25 pm
4

Like Andy I’ve always stuck with Photoshop for design mockups and have never had a problem with clients seeing differences between the mockup and the html prototype. I think this mainly has to do with just spending extra time in the mockup phase thinking in ‘html mode’ so that you know the working version will be very similar, if not exactly similar, to the static design.

Also with CSS now we can pretty much place things anywhere we want on the page and still have it standards-compliant and cross-browser compatible, so matching the mockup to the prototype is even less of a challenge than it used to be.

Regarding other mockup options, the only thing I’ve seen which was vaguely useful was a Java app which let you drag and drop form and page elements but it was mainly for usability and functionality purposes, not design, so not very useful in the mockup stage but particularly useful for nutting out how screens are going to work with clients which is usually my biggest challenge.

I think at the end of the day, because most mockups have to be hand-crafted to suit the individual needs of each client, we’re stuck with Photoshop mockups. Building a small working prototype for the client would be ideal, but considering the time involved in that I can’t see it happening as part of the quote, and you’d also be opening a whole can of worms there if you were allowing changes on a working prototype the way re-designs were allowed on a mockup.
Danny Foo

April 26th, 2006 at 8:17 pm
5

Over here in Malaysia it’s a necessity to produce a mockup because all the clients just need to look at something. The worst of the lot are the ones that demand a full working prototype rather a 2-3 page one. In other words, we’re creating a BETA but the idea isn’t finalized.

The other thing is that we’re not so lucky to charge clients by the hour here so half the time it’s done with a quoted ballpark figure based on an hourly fee.

But I definetely understand what you’re getting at in this entry. :)
TJ

April 27th, 2006 at 11:18 am
6

Harmony: I totally understand where your coming from. I agree with you. Sometimes photoshop mockups are just annoying road blocks. And when it comes to the design looking the same when html’ized’, I usually don’t have a problem this this, unless I’m getting a design from a designer who doesn’t do html, therefore creates things without thinking about how the layout will work.

Danny: Thanks for your comments, I really appreciate hearing what others have to say about this topic, and thanks for including your experiences too. I think demanding a full working prototype is absolutley rediculous unless that client really wants to get in deep with hours and time..
bingo

March 7th, 2007 at 3:26 am
7

bingo
buy hydrocodone

March 8th, 2007 at 9:11 pm
8

buy hydrocodone
Chary

September 11th, 2008 at 6:13 am
9

I agree with u,
Most of the clients expects the same design which shown as Mockup, they will argue if we miss little extra space also, to overcome this problem it’s better to design mockups in such a way that how they will appear after coding. My concern is just be aware of design elements must be added in consideration of how they will appear in HTML and avoid unwanted elements, which are not necessary for that.