Design Mock-ups Dont Work?

single blog entry

Design Mock-ups Dont Work?

November 29th, 2007, By Anthony

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?

33 comments Leave a comment





Trackback URI