Web Design: Creating a Mockup

As some of you may well know there has recently been quite a bit of discussion concerning the use of Photoshop or any other design tool for that matter to create a mock-up of a proposed site or application before development begins. The article which sparked the discussion “Why we skip Photoshop” by 37 Signals and Jeff Croft’s “Why we don’t skip Photoshop”. This is not a follow up to either one of those articles, but let me point out something that is mentioned several times both in the articles the comments. Both articles start out by stating “why we”. People work using different work flows, what might work for the development of one product in one particular shop may not work for the next. The products in question may be all together different and the type of client or end user may be no where near the same. Find what works best for you and stick with it, no one is forcing anything on anyone here, nor are they saing that you are any less of a designer, developer, coder etc by not doing it a certain way. Having read both of the articles I was a bit hesitant to actually release this article that I had left sitting in que for several weeks now. I am no where near as talented or knowledgeable on the subject as the two mentioned above and I did not want it to seem like this article was in response to either. However I have decided to proceed as it was originally intended to provide some insight to my particular process an education to my potential clients so to speak.This is the process I have found to work best for me.

I have designed and developed sites in the past using several different methods. For some of my own such as Viral Thinking I have gone straight from idea to development. For others I have used both Illustrator and Photoshop to mock up an idea and then cut out visual elements as needed and turned them into CSS. I will note here that although I do find the slice tool and programs such as Image Ready and Fireworks useful in some cases, it is very hard for me to slice an entire site and translate it into CSS and XHTML. Guess it is just the way I work, but what I try to do is visualize the code as I am creating the mock-up. This way I get a feel for my limitations and can figure what will translate into a valid cross browser website. It is a process that I am still learning and I do often make mistakes but that is part of developing your skills.

Going beyond what works for me, I have come to realize that the mockup, in some cases can be crucial to moving forward with the client. Often times what you might visualize or quickly sketch out in the form of a wireframe is not quite so easy for the client to visualize and giving them a rough idea of how the site will look and act is both necessary and requested. I personally have found that good communication paired with a decent mock-up saves you a lot of time and headache in the long run. If you are able to effectively communicate the look and feel, allowing the client to critique before development begins, you may be able to avoid a lot of unnecessary backtracking and changes. It is important that I mention here that the designer needs to be aware of limitations. What may look great on “paper” so to speak will not necessarily translate well to the web or make sense for a particular project and it’s proposed budget. Having a client say “but we like it how it is shown in the mock-up” and then having to explain why it can not be done that way is a situation you want to avoid. Remember your client may not fully understand the why behind it nor do they want to, so know your limitations going into the project and create your mockup accordingly.

Secondly and perhaps more important than understanding your own limitations, is the need to help the client to understand the limitations. Explain to the client what the mock-up entails and how it is to be used. The mock-up is not functional, it is not a working website, it is model for how things might translate to the web, it is the “look and feel”. It is not set in stone and can be changed in fact that is part of why you are creating the mock-up. Photos and text the designer might use are not exactly what the client had envisioned but they are necessary for the client to understand the layout, typography, structure and so on. Again these elements can be tweaked and replaced with those deemed more suitable. Lastly, attempt to provide an education for your client. Not all of us are in the position to be unquestioned in our work. We don’t have a handful of clients that are willing to hand us a project and say here is our budget, here is what we are looking to accomplish and here are our ideas so get to work. Often times clients may question why they should pay you this price, when the guy down the street or the advertisement on the web says they can do it for this much. Provide value through education. Help the client to understand your proposed solution and why it is being presented in such a way.

The mockup for myself and my particular client falls somewhere in between a blueprint and an artists rendering, it does not mean that the building is almost finished or that ground has been broken, but it does give us a way to agree on how things might look and function in the end. Like a blueprint, elements can be tweaked and fixed to provide a sound structure. For me the blueprint is a necessary step in the process of illustrating that structure.