Are graphic mock-ups necessary?

I published an article over the weekend on creating graphic mock-ups. This is really a tutorial meant for beginners who may not have attempted to do this before. I do think that creating a graphic mock-up is an important part of the design process. I find that it helps me to come up with a more coherent, creative design.

Today sj at 37 signals posted an interesting counterpoint to my position. They don’t create mock-ups because, in short, they feel that it slows things down too much and just doesn’t make sense. I think this really depends on the context. If you’re creating something highly interactive then, sure, maybe it doesn’t make sense to do a static proof. On the other hand, if you’re creating a static web site then maybe creating a visual proof and getting your ideas together first is a good idea.

sj writes:

Photoshop puts the focus on production, not productivity. Photoshop is about building something to look at, but about building something you can use. When you’re just worried about how it’s going to look, you spend too much time on production value. HTML/CSS lets you be productive. You’re constantly moving forward towards something more and more real with every change.

Reasons why I like graphic mock-ups:

1. It helps to enhance creativity. I can play with a variety of ideas without committing to anything. I can quickly throw some things together (some colours, a grid, some shapes, a typeface) and get an impression of what the site will feel like.
2. Everything is more coherent. I’ve developed pages in the past that were added to iteratively over time. One thing gets added, then another, then something gets taken away. It always feels less coherent than something that had a graphic proof to work from.
3. It’s faster and easier to arrange page elements without constantly having to fuss with CSS. This is why I like vector programs for my mock-ups. Easy to draw boxes and push them around.
4. The design isn’t dictated by what’s easier to do in HTML/CSS.
5. Details are good. Good design is in the details. How big should the margins be? Should these rounded corners be 4px or 6px? Will this little gradient enhance the design? That’s certainly not the first thing I do but I do build those things in before the proof is finished.
6. Tools are available to apply and adjust grids. I know there are some browser plugins available to do some gridding but graphic design programs were built with this in mind.
7. You know what you need to build. sj says that a mock-up is wasted time because you have to build things twice. But how do you know what to build? I think if I were to start without a mock-up I would spend as much time or more writing and re-writing CSS. Sounds frustrating.

Some of the downsides mentioned in the 37 Signals post and the commenters aren’t all that serious. I dont’ know about you, but I understand that the real version isn’t going to look exactly like the mock-up. Sure, the fonts are going to look a bit different, some elements may need to be changed based on CSS limitations. That’s okay. It’s a mock-up, not a contract.

This blog may be the only site I’ve ever done without a graphic proof, at least since my very early days and that was only because I had a solid mental picture of what I wanted it to look like and I knew the layout would be simple. But then again, maybe I could have come up with something better if I did.

What about you? Do you feel that graphic mock-ups are important? Do you always do them or do you work directly in HTML/CSS right away? Can you think of any other benefits of creating mock-ups?

Posted in Design Post a comment

Comments RSS