November 29, 2007 in Design Process, Misc

Design Mock-ups Dont Work?


In the early stages of a web design project most designers I know offer 3 different designs for the client to pick from, the client picks which is their favorite of the three mock ups and this design is used for the project. I think this design process is unproductive for the project, and worse it wastes time.

Creating mock-ups usually involves opening up a blank Photoshop of Illustrator document and laying out 2 or 3 different themes as to how the website will look, the mock-ups are often greatly detailed and take up a lot of time to produce. Each Mock-up usually contains a fairly accurate layout structure, a color theme, some even have an initial logo concept.

Mock-up Problems

If each Mock-up takes 2 or 3 days to complete that’s a lot of time wasted that could be spent in other areas, I also think the designer is sub consciously laying out the design in the fashion that best suits the theme they are creating and not a layout designed for the websites users.

I also believe the more choices you give clients the harder it is for them to choose and you will end up with a mish mash of design elements from each mock-up – don’t get me wrong the client should have some design control but they are paying you to be an expert in design.

What you are really doing in these initial 3 mock ups is proving your design skills by showing off a fashion show to the client – surely that’s the job of your portfolio.

My Mock-up Approach

I waste no time making three different mock ups, I don’t create a load of different styles and I do not make my initial mock-ups detailed at all. I use a three step process to collate specific data and create just one mock-up that represents my proposed design ideas:

1. Color and Feeling Chart

Instead of wasting my time creating a fashion show I use color theory and any existing companies branding to pick great contrasting colors to make the backbone of the companies brand. I show the client this in the form of a swatch with a description and the color chart that explains my color choices.

It also outlines what emotional reactions the colors provoke to the user and what characteristics the colors are associated with and why they are right for the company. I usually use Adobe Illustrator for this and export it as PDF to print off or email. I also discuss this with the client and get the client to sign this off.

2. Sitemap

I create a site map of the website from the data initially gathered from the client and represent this as a black and white chart that outlines the navigational structure and also how each page inter connects -I usually use Microsoft’s Visio for this and then export it as a PDF to print off or email. This is also signed off by the client.

3. Website Reviews

I will hand pick from the clients leading competitors websites and ask the client what he likes about different parts of their websites, do you like the curves here? does this sidebar look better on the left or the right? I will also throw in a few websites that I know will answer some questions for instance do you like a minimalistic website like Designbit or a curvy website like some other website?. Do you like straight angles or curly lines? Do you like the type on this website? etc

I collect this information and this will help determine the clients taste and how they want there website to be themed. After all they are the people paying the bills. I also take what I feel their chosen demographic likes also – but usually find user identification happens a little further along the design path. I outline my findings in a document and get the client to sign off on this too.

Its Mock-up Time

Now I will open up Illustrator and create one mock-up from the data gathered from the three steps above and this is a quick mock-up that showcases the colors we have picked the navigational structure and the theme that the client likes as well as the layout and typography.

I explain that until we delve deeper into the data gathering process we cannot possibly define the exact functionality and therefore most page elements position and importance cannot be calculated properly yet. I will show off how some elements will look but the mock-up concentrates on representing the findings so far plus a little bit of my design flare.

The great thing about working with mock-ups in this way is that the client is talked through the whole process and also makes the design choices themselves – they are kept in the loop throughout the whole process and will feel like they have contributed to the design of the mock-up. When you show them the complete mock-up they are happy with it because they are well aware why you used those colors, why you used that theme and why the navigation structure is presented in that way.

This process of creating one mock up is really trying to get the message across that if you take more time accessing the clients needs with well planned data gathering / analysis you will get the mock up that’s a good fit for the company first time. I also find I can complete this whole process in a day or two, and then you have already got some great supporting information to take into the next development phase , the planning.

Your Thoughts?

Please share your thoughts on design mock-ups and what process of mocking up do you use?, am I the only designer in the world who creates one mock-up?


About Anthony

Anthony Brewitt is Design Bit, has been for years - he's an experienced WordPress Designer, and Muggle-born Marketing Philosopher. Let’s talk about your website; your marketing, blog design, and that cool new mobile web thingy. Contact Anthony

47 Responses to Design Mock-ups Dont Work?

  1. Jason Wise

    I am a freelance designer, and I loved this article. I have forever hated the process of coming up with the “fashion show” for the client. Can you possibly send me an example PDF of your color swatch that you give the client? And a sample flowchart?

    Thank you ever so much!!!

  2. Great article, I also create 3 mock-ups for each client. Sometimes this works and other times I find that if for some reason the client doesn’t like these three the project can fall flat on its’ face. I do gather a lot of information up front in hopes of nailing things down exactly how the client would like them to be. This is done in the form of a questionnaire and is long enough to weed out the people who are serious about getting a web site and those just window shopping. I agree with a lot of what your article states and plan to give it an honest go. Now I must get back to my mock-ups : )

  3. @ Jason

    I am going to post on a case study soon and will include this information with the case study – I’ll send you an example when its ready.

    @ Brandon

    It’s very difficult to break a pattern that has existed in our industry for years – but I believe this will be beneficial to us all and by creating one tailored mock-up this will help other industries take the web design profession more seriously.

  4. Sorry, but I have to say I disagree.

    The process of doing 3 mockups didn’t just crop up because us designers like to waste time, there is a very good reason for doing this.

    Firstly, every good designer will do initial fact finding, R&D and (where there’s time) things like mood boards. That’s nothing new.

    However, there’s a VERY good reason that the 3 mockups “standard” evolved – and it’s not web design specific.

    If you show a client a single mock up the question HAS to be “what do you think?”, or similar.

    In certain circumstances, you’ll get a useful answer. Perhaps the small business owner who’s paying for the site says “I like it, but I’d like to see the logo a little bigger”. Fantastic, now you can move on.

    In others, you might get a more negative response. “I don’t like it”, for example. Annoying, but you just go back and try again. No big deal.

    However, you try this approach with a multinational client with 28 different stake-holders and see where it gets you!

    Each will have a different opinion, each will have conflicting views and you’ll spend hours, days, weeks and months going round in circles, trying to please everyone and compromise before .. finally .. you end up with an end result that’s muddy, ugly, compromised and ineffective.

    You get design by committee.

    Now, if you do 3 designs, you can still ask the question “What do you think?” .. if you’re an idiot.

    Or you can ask the question “Which one do you like?”

    Then, the client focusses on CHOOSING a design not CHANGING a design.

    This works well for small clients but it’s the ONLY way to work efficiently for larger clients.

    12 people liked design 1
    11 people liked design 2
    5 people liked design 3

    The MD was among the people who liked design 2 best as was the head of marketing, so lets go with that one.

    The client chooses the design, but each and every stake-holder doesn’t get an input on the minutia of the layout. So you get a design that’s still got integrity.

    Doing 1 mock up is occasionally fine for a smaller client .. but for larger clients it’s simply not an option.

    Finally, there’s often more than 1 way to crack a nut. Sometimes, doing 3 designs forces you as a designer to think harder and often the third design can be the best.

  5. Great points Richard; You are right that design by commitee doesnt work – simply because design is a very personal to each individual. No matter how many mock-ups clients view be it 1 or 3, each commitee member will still decide upon which parts they hate and love and the mish mash design will previl every time and the often its the stronger characters in the room that design tastes will previal – not nessarsarily the correct views or design choices.

    I guess you could call what I propose a one day mock up, not graphically detailed. I am trying to cut out over thinking a design until a proper analysis can be undetaken and by just getting the design out there with the clients feedback throughout the phase i dont need to ask “which do you like?” as the client has already agreed to most design preferences and the single design mockup can be customised for the users, not the clients.

    I admit my clients range is SME’s and individuals, maybe larger projects do require more mock-up options to forfill their needs.

    I strongly believe that If we inform clients of the benefits of designing for their users and not to the clients personal tastes from the start we can ease this transtition and create better user centric mockups in less time.

  6. I prefer to only mock up if asked specifically… I like to create a concept UI design to start, to get it laid out without the hassle of “prettying it up”. Usually after finalising the layout, its much easier to style to the clients tastes, and usually just a case of picking some colours that suit the product.
    Although I suppose it really depends on the project…

  7. @ Mike Jolley, I think Mikes approach is interesting, creating the presentation separate from the functionality in the mock-up phase, mocking up the same way we build designs with XHTML / CSS.

    “get it laid out without the hassle of “prettying it up” ” – this is exactly what I am trying to accomplish! 🙂

  8. i love this article,
    thx for the tips
    will use them on my website

  9. wow, this blog is a page rank 6 blog
    good job, i will recommand this blog to my friend

  10. As with various others who have provided a comment, i to am a freelance web designer. I all honesty i don’t tend to get that many clients who don’t already own a website so for me redesign is the main process. For this the issues such as colour scheme aren’t quite as difficult as i try to main some consistancy from the old design (hence return visitors won’t think they have reached a completely different website). In terms of mock ups again, i don’t go for the 3 design strategy but concentrate on gaining an understand of what ideas and features the client is looking for – this usually takes the direction of looking at competitors. If one is required however nothing can beat a quick pencil and paper sketch, quickly scan and then emailed to the client!

  11. i really like this article becauase I have found also using a 3 design strategy works most of th time but i have also found some people really have a set design in mind or a corperate ID.

    really informative, love this article its now bookmarked well done!

  12. I’m just starting out as a freelance web designer and found this article very useful. I can certainly see the benefit of creating three mock-ups for larger clients but agree with the idea of just one mock-up for smaller clients.

    I have already exerienced the problem of asking a client if they like the mock-up I have created rather than asking which of the mock-ups they prefer (as posted by Richard) and I would recommend to anyone that they take the advice on board – it will save you a lot of time.

  13. Great read. You touched on many interesting points. The handful of freelance jobs I’ve been seem to have taken a combined approach to the methods you mentioned.

    I guess it is all about find what works best for yourself and your clients… but as they (unfortunately) say, “the client is always right”…

  14. I think there is any easy answer as to which is the best approach. Lower budget clients can only afford the 1 concept approach, cot in for 2/3 and you will not get the contract. larger clients those that normally have a larger budget then I would cost in for multiple concepts.

  15. Great article. I truly appreciate information such as this.

    I will check back in the future for similar information.

  16. I think the point everyone is missing here, is that every client is different…!

    If a client wants to see a few mock-ups then do a few, if they have the idea already – work with it, or maybe you have the budget website that doesn’t warrant the time spent mocking up different designs.

    I have found that from researching the client and asking key questions, you can pretty much put a design together that they will love.

    Great article and one that obviously has different opinions.

  17. Thats a good point,

    At our studio we simply design one homepage for approval. If that homepage isn’t quite right, we go back and do another one, although that rarely happens.

    I think as long as you are confident with your design, and it looks great, appropriate and suitable for you customer then there is no need for additional designs, because what can happen is that they like parts from each of the three that you show them.

    I think in today’s competatively priced web design world, designers can’t afford the time to make several designs for a client, unless they are a large, blue-chip customer, and the income backs this up.

  18. Mat

    I completely agree, mock-ups in that fashion only serve to show off your design skill, a more involved and active appraoch I’ve found definately sits well with clients.

  19. Great article. I do all my initial mockups on paper to give the client an idea, it much quicker, and then produce a graphical mockup once I have worked out what the client wants.

  20. Tom

    Some good points, we often create two visual mock-ups for client web sites. Quite often I (as a web developer) will design one and a graphic designer will do another option.

    I like design to actual size, the resolution that the website will be displayed at on screen. I try to encourage the designers do the same but often end up with the problem of not being able to read font sizes or see images properly due to the higher resolutions designers like to use because ‘it looks better when printed’

  21. Mostly I have worked for one individual who is the sole decision maker, so the 1 mock-up works well, but I see that for a larger company multiple mock-ups makes sense, of course, the bid should include the time and effort to create those mock-ups.

  22. I agree – you need to find the balance between providing options for the client & steering them in the right direction.

  23. Great post and so true! mock designs take time and money and are not always effective.

  24. Great Article! We have a system where a client doesn’t get more than three designs, we start with one only, if the clients totally not happy with the design only then will we design a second shell. I totally agree that we get paid for our expertise and our input should be valued more by clients. In essence we should have final say, not saying that the clients input should be discarded but listened to and reasons why it would be a bad idea should be discussed. Also to make things run smoother we have broken up the design into 3-4 phases. I st phase – Shell design (Basic look and feel). 2nd phase Content. 3rd phase Development. etc. Each phase gets approved by the client and signed off on to avoid going back and forth with new changes coming in and changing the original brief. Also to cut down time spent, we also use a mix of screen shots and css to do changes. Basically briefing the client on every stage and signing of on every stage helps keeping the project focused and on the original track.

  25. Great article. It is very true that a lot of time is wasted on creating mock-ups , we really dont count the time wasted, which should ought to be done. I will soon send you the procedure we follow in making a single mock-up.

  26. Really Gud Article.. But as Hatch Media said.. every client is different. Mock-ups work well with some clients.. but mostly its a waste of time and money.. speaking from my experience

  27. This is a really good way of working. Most of the time when designers and their clients spend time going backwards and forwards with mock-ups, it’s because the brief isn’t clear. And this often isn’t the fault of the client but the web designer. Most of the time clients don’t know what to ask and it’s the designers responsibility to explain and lead. All good web designers and those that wish to be good web designers should use methods as written by Anthony. Evan

  28. Wow great comments. I agree with richard. Doing 3 mock ups does work better.

    However if you have with an underlying concept eg a brand eperience it will generally lead you in one dirrection. Doing multiple layouts will just be reorganising the content

  29. The “3 design concept” does seem to work best, sometimes the client doesn’t really know what they want, so the 3 options give them something to think about. We try and make each of the designs as different as possible.

  30. Pingback: 9 of The Best Ways To Present A Website To A Client

  31. I think there is room for both ways. As Richard Quick has pointed out – it depends on who you are pitching too.

  32. Rob

    Really good article.

    I would love to spend more time creating more mockups for the client but this often proves expensive in time & budget terms – eating in the time to actually develop the website.

    Pen & Paper mockups and finding out exactly what the client whats before doing any mockup are quick and easy ways to find out prehand what the client wants to ensure that when you do your single mockup – it is exactly what the client wants.

  33. I think that the client meeting and brief play a far more important role in establishing the design criteria than people give credit.
    If you work closely with a client and really put in the effort to look at designs they hate/ love and the reasons why, then you can get an understanding of exactly the sort of design they will like.
    If you can do this and the basis of a design can be created the first time you can save hours of frustration working on several different designs.
    The more choices you give them the more decisions they have to make.

  34. I am not sure I agree. We take a brief from our clients but will always give them more than one option. It might take more time but I think it means you give a higher level of service and usually end up with the best design for your client possible.

  35. I agree and have never created more than one design for the client. We ask for to list a few websites that they like the layout of, colours, overall look etc.

    Being a web designer is also about interpreting what the client wants which is not an exact science. Creating just one design gives them the best idea you can possibly come up with rather than diluting your ideas into three designs. In our experience this first idea is usually 98% correct and a few tweaks are needed.

  36. I agree with you. I only do one mock up, I’ve found clients get confused if they see more than one at a time. If they don’t like the first one, we talk about it and usually they go for the second design. I’ve only had one client who didn’t like anything, but then it turned out he wanted the exact same website as his competitor, so that’s what I gave him. His competitor then had a redesign.

  37. Pingback: Getting Design Approval: The Single Mockup Theory

  38. i would like to link to your site if you would link to mine

  39. Thanks for posting this article. I found it very useful. I think that working with colour theory is a great approach. I usually tend to judge these things by eye, and whilst I don’t generally speak directly to the client in the initial stages of design I can see that having something solid like colour theory would be really helpful for the client to see the thoughts behind the design.

  40. Mark

    Excellent article extremely insightful. Mood boards are an great tool for focusing the mind to help with the creation process. We often see mood boards used within interior design (see article http://www.soeasyblinds.co.uk/news/19639464), but there is certainly no reason why they cannot be used in any design process.

  41. Well written article. I agree that three web design mock-ups are too many but I don’t agree with your process.

    I believe once you’ve got past the initial ‘getting to know each other’ meeting, touting your proficiencies in web design and web knowledge, and having won the business, you need to get straight down to brass tacks. An in-depth Q and A session of their web presence requirements, business model, their client habits and behaviors and an analysis of what will make their new web design work for their business is critical. ‘What design they might like’ shouldn’t be at the forefront of their minds no matter how important ‘colour’ is to them… ‘blue is my favourite colour can you design our new website arsenal.com’. It really does come down to making it work for their clients rather then pandering to their personal likes and dislikes.

    I use this approach for designing sites for small one-man-bands through to SMEs. I have found that customers much prefer to get down to the bottom line ‘what web design and web functionality is going to get me the amount of customers I need to meet and exceed my targets’.

    However blue chips are a different matter. But, when you have that kind of budget 3 mock-ups is hardly a chore. You start out knowing that the final solution will be further from the initial designs then you would have ever hoped.

    Mood boards are for interior designers that can’t figure out what their client likes or dislikes.

  42. Its refreshing to hear from other people that just concentrate on one idea or concept. Although, I can see the benefit of providing three layouts, I often find that the budget does not stretch to this and that design time is simply stretched over producing three different designs rather than concentrating on making one look really good.

  43. totalbs

    Guys,

    Forgive me if I am wrong, but isnt the process discribed missing a stage that could probably solve alot of time issues.

    Wireframing?

    This is something that I use regularly using visio and some hand styled eliments. Its a fantastic way of gettting the look right for the UI/UX of a site before you even put colours onto the page.

    This also means that the customer (client… whoever) gets a quick representation of how the site might work / function with the changes that you want to impliment.

    Does anyone else use the wireframing technique?

  44. Great to hear other people focus on producing one, quality design.

    Our studio puts a lot of work into the wireframing, content layout and other stages before even thinking about the theme so 9 times out of 10 we produce a layout that works well and the client loves; important to note a pretty design doesn’t denote a good, usable design with great IA, so pushing out a couple of extra designs can sometimes deviate from the most productive outcome.

    Obviously different rules apply to MNC’s and the higher budget corporations who expect to have an array of choices.

  45. Hey i love your blog, found it while randomly surving a couple days ago, will keep checking up. Btw yesterday i was having troubles opening the site. Bye…

  46. I actually wanting to remark your website and state that i honestly savored reading your blog article here. It was incredibly enlightening. Continue the good work and I’ll come back to read more soon

  47. I tend to build an initial first page that is flexible enough for the client to change.

    Once they can actually see a layout on screen this helps with what the clients wants.

Leave a Reply