Using Web Page Mock-Ups as a Design Tool

21 June 2010
Posted in Tools & Services

We build 100's of websites each year here at The Dev Department. Some of the projects go really well and others not as well. Of course we want them all to go well, so we spend a lot of time doing postmortems on projects and evaluating what worked and didn't. In all cases, the projects that did not go so well all lacked planning documents and, in all cases, the designer who delivered the specs did not develop mock-ups.

What are mock-ups?

Mock-ups, or wire frame documents, are nothing more than schematics (think stick-figure drawings) of each key page that will be designed and built. In the web development planning process, this is typically the 4^th step that is completed behind a site outline (establish content and basic function), site map (establishes information architecture and linking) and page inventory (a text-based list of the items to be placed on each page).

By following each step of these, as laid out in our web designer certification program, you will be able to move systematically through the planning and layout of a web site.

What tools can I use?

Mock-ups are done in a variety of mediums. From paper, to PowerPoint and beyond, mock-ups are intended to give you a way to establish page layout and elements without getting bogged down in design. Jason Fried, the founder of 37 signals and developer of Basecamp, mentions in his new book, Rework, that he uses a sharpie for doing mock-ups because it prevents them from focusing too much on detail.

In the same respect, we use a tool called Balsamiq Mock-ups for doing these. In a similar vein to a sharpie, Balsamiq allows for fast prototyping of sites and provides just enough detail to get the creative juices flowing without getting bogged down in specifics.

Here's a quick demonstration:

Once you have learned this relatively simply tool, you can then begin to do some more involved mock-ups. In this video, we show you how mock-ups have translated into a finished page comp.

What is the benefit of using mock-ups?

Great design is all about attention to detail and many designers find themselves spending the bulk of the time and cost on web projects trying to get the button styles or the navigation them nailed down. This is great and is what you should be doing. However, most of our clients have found that they are spending less time in these areas when they first spend time doing mock-ups of the general function, elements and layout.

In fact, just the other day, a designer mentioned that doing wire frames would reduce their margins because they are extra steps, but we asked them to consider the following benefits of doing mock-ups first:

1. When you review mock-ups with the client, you make them think about content and function. They cannot get sidetracked on design.

2. Clients will make changes and it is a lot easier to make changes to function and layout in the mock-ups and only have to worry about actual design changes in the comps.

3. Mock-ups are a great scope document. They can pulled out at any time in the process to reinforce decisions or remind the client.

Here is a quick look at a mock-up alongside the finished Photoshop file:

So, as you can see, using mock-up can actually cut down on costs and errors and helps you guide the client to a better solution and happier experience.

Balsamiq only costs $79 and they have a free online version you can try out here. We feel so strongly that the quality of planning is better using mock-ups that we are going to do a drawing to win a free copy of baslamiq mock-ups to the next 10 people who complete our Web Designer Certification course.

If you want to be entered into the drawing, just sign-up for our Free Web Design Certification Program and be one of the first 10 people to complete the program.