July 25th, 2007
Save Time and Money With Web Site Mock-Ups
In a previous post I discussed getting customer feedback throughout the development process. In my opinion, the most important aspect of this is creating a mock up of what the fully functional site will look like before you do any HTML or CSS work. (I believe in the print world, this is called a comp.)
I often find that customers aren’t exactly sure what they want. If I explain design and layout concepts to them in words, they’ll often just nod and say that sounds fine without really understanding what they’re agreeing to. Now at this point I could go ahead and flesh out the entire site – after all they did agree to my plan. Even if they weren’t happy with the finished product, I could point out that it was exactly what I had described, and they had approved. Technically, I would be right. Of course, being right isn’t always the best business model.
When you are building a site, I hope that you don’t just dive into your IDE of choice and start throwing DIV tags around. That was how I worked when I first started out, but I quickly discovered the value of creating an image of how I wanted the site to look. I use Photoshop, but you can use MS Paint if that’s what works for you. The important element is that you come up with a visual objective for the site before you get bogged down in the code.
Aside: You may be thinking, What if I create a design and discover later that I don’t know enough HTML and CSS to make that design a reality? My first response is the only way your skills will improve is by creating designs that will force you to experiment and learn more about your craft. I realize that may be a little harsh, but you’ve got to hear it from somebody. Every few months I seem to come across a freelancer who is still using table-based layouts and inline styling because they are unwilling to learn about absolute positioning and style sheets. Their work looks 10 years out of date, is expensive to maintain, and will soon find them out of business. Don’t let that happen to you!
Once you’ve created a visual plan for the site, is it really any extra work to save it as a JPEG and let the customer have a look? No, you’re potentially saving yourself a lot of work. When the customer tells you that a few items needs to be moved around, it’s still early enough to make those changes without any major headaches.
Are you worried that the customer is going to want changes that mean a lot more work? Explain that you can definitely do those changes, but it is outside the original scope of work. You are perfectly willing to do that work, but it will cost ‘x’ additional dollars. Pick a value for ‘x’ that’s fair. If the customer really wants the time consuming changes, then you just increased your profitability.
It’s important to note that I am not talking about wireframes. A wire frame applies the same principle to the functionality and navigation of a site. Those have great value, but as a general rule of thumb freelancers are usually dealing with sites that are not so complex as to require very complicated wire frames. (If you are doing a complex site, by all means create a wire frame.) Your clients are more likely, though, to have opinions about the appearance of the site.



