House Made of Web (numero cuatro)
December 21, 2008

House Made of Web is a series of posts explaining the web design process. Many seem to think it's a kind of arcane, magical process ... but it really shouldn't feel like some secret thing. This series of posts should help the non-designer and non-coder understand the process by which a website comes to life without getting too terribly techincal.
The previous posts in this series are:
House Made of Web - the backstory
House Made of Web (part dos) - Information Organization
House Made of Web (chapter tres) - Beginning Mockups

House Made of Web (numero cuatro) - The Problem with Mockups

In my last post, I spoke about creating two mockups for my client, Sherry K. I had planned to spend this post talking about some of the drawbacks of submitting two mockups (which I alluded to in the last post) ... and then I got a tweet from the delightful Mike Rohde, who was pointing out a fantastic article on Fadtastic about the perils of the industry standard (submitting 2-3 mockups).

Despite the fact that the industry standard is to offer clients multiple mockups in order to better allow them to make choices ... it often doesn't work very well. As Darren Hoyt (in this Fadtastic article) states, allowing the client to pick bits and pieces of your designs can mean that the client "settle[s] on a mishmash Frankenstein product" and that they get "bogged down with a maze of choices" rather than the unified design you intended.

In my case, I've worked with clients who were single entities - a website for one person. Generally speaking, offering a single client two to three mockups and asking them to choose or to mix-and-match is often not quite as dangerous as when dealing with a larger entity with multiple people who will be making the final decision.

The few times I've worked with large e-commerce companies, my fellow designers and I generally pitched only a single design at a time - or two variations of essentially the same design. Design by committee - the default when you have multiple people making the final decision based on several mockups - almost universally yields a Frankenstein design.

The key in both the case of a single-person site and a company's website is listening to the client BEFORE the design process begins so that you really understand what they're looking for. If they can't tell you, it's your job to elicit responses from them before you begin the mockup process. Darren states they show clients "select sites from CSS Beauty or Most Inspired or Best Web Gallery" and they pay close attention to aspects of various sites (colour, layouts, mood, etc) that the client responds to.

Basically, I'm saying you've got to adjust your process to your client and know the pitfalls of working with a group approval (as well as the benefits) and the same for single clients. The key to both is to spend a fair amount of time in the beginning really getting the feeling for them, who they are and what they want.

In the case of my working with Sherry K, for the first mockup I spent a tremendous amount of time creating a workable e-commerce style site for her. I then spent some time working on a second mockup which worked with her personality a bit more and played with color. I was pretty sure that neither mockup in their entirety was precisely what she was looking for. Even with as much time as we'd spent going over her needs, I'd not been able to get a good sense of what she wanted in terms of look - and we ran out of time before we could look at a site like CSS Zen Garden or Most Inspired. That fact, combined with the fact that I was working with a single person led me to offer her two mockups - I needed a better idea of what she wanted and since she couldn't spare the time at that moment, I took the time that I would have spent discussing design with her and made a second mockup.

Flexible. Particularly as a freelancer, you've got to remember that there is no one, right way to go through the design process of a website.

So, last time, I showed the two mockups - both of them quite rough. Sherry loved the use of colour inherent in the second design, but liked the layout of the first ... but she didn't want either design as it was. That's okay, neither did I. From having her look at those designs and answer some very specific questions, I got a much better feel for what she wanted.

First off, a better green was fine with her. She wanted some colour and didn't mind the green. If I hadn't been so fearful about using my favourite colour on her website, I might have nailed the look and the layout with the first mockup. D'oh!

The next version changed up the look in some places, adding accents and refining ideas. For one, I swiped the nav bar from the second mockup and included it in the tweaked version of the first mockup. I changed up the backgrounds of the major elements ...

... and I decided to use a splash of lime for real.

No thumbnail this time, but the full image will pop up in a new window (or tab, depending on your preference set). Mockup 1c

This version energized the client. She really liked the splash of lime (and I still need to work in a shaker of salt somewhere). Her favourite part, I think, was the bright green gloss button in the promo area.

Next time ... an overview of how the mockup was concepted and created.

Posted by Red Monkey at December 21, 2008 7:54 AM | Blog | Design | | StumbleUpon Toolbar Stumble |


john said:
Red Monkey says: First of all, have you read the article? the blog? I AM a web designer, so your "ad" is completely unappreciated here. Second of all, how professional is your business if you say things like "If you are want a Professional new Website Design"?

If you are want a Professional new Website Design for your business or a re-design of your current website we will be happy to help, we also produce professional eCommerce website systems and custom web developments. our eCommerce Web Design Service is custom coded online stores in PHP, HTML & CSS at affordable prices. Create Your Own Custom Website, 5-Page Site has All You Need.
Very low payment, mail us For a Free Quote.

December 22, 2008 7:19 AM
Free Pixel Advertisement for your blog