How to present site mock-ups on paper

December 8, 2006

Woah there! You’ve found yourself on an old article. Take note of the date before reading.

I’ve noticed that when pitching an idea, some web design firms still print their designs off as posters and stick them on mounting board. If you think you’re client is going to really like this, then go ahead, but you should do the following things to ensure that you are accurately setting your client’s expectations of what the site will look and feel like.

  1. After you have done your design, export it as a bitmap image with the exact pixel width the website will be.
  2. Clearly mark where the fold will appear on the page, for an XGA screen. The jury is out on the exact height since you can’t be sure how much toolbar cruft a user has on screen (e.g. bookmarks bar, Google toolbar, or neither?). Some sites are more daring than others, and feel free to show a range (two lines), but either way, make sure you show something.
  3. Now, look at your design closely. Is important information below the fold? Are some of your fonts or images barely legible or comprehensible? If so, go back and adjust your design.
  4. Now, take your bitmap and print our your poster. You will notice that the fonts are jagged, and you may baulk. Tough – this is what it will look like in reality. This way you are accurately setting your client’s expectations of what the site will look like.

By doing this, you will avoid some embarrassing situations. For example, when your first prototype gets put into a web browser and shown to users, you avoid having feedback like “I can’t read the text” or “What do I have to click on to get to the next page?… Oh I didn’t realize I had to scroll down.” This is exactly what happened when I was recently doing some user testing on some mock-ups another firm had produced. It was embarrassing for them and didn’t get them off to a great start with our mutual client.

Or, of course, you could forget about printing out a poster, which is both easier and more realistic. Put your mock-up into a browser and show it to your client on a data projector.