Building Better Mockups

A mockup or simple prototype is the first chance stakeholders have to get a grasp of a designer's vision. First impressions are everything, so you wanna do this right.

Here are some tips I've learned (the hard way) over the years:

1. JavaScript is your friend.

As a designer, half of your job is to convey an Experience. Don't be afraid to spice up your work with interactivity; leverage a framework such as Prototype, Script.aculo.us, or jQuery. If your design involves an expanding or collapsing component, then hard-code the animation. If your design involves an AJAX call, "fake" the call by displaying a spinner for 2 seconds.

A modern mockup should involve HTML, Images, JavaScript and CSS.

2. Widgets Suck.

When writing fake copy text, avoid the term "Widgets" like the plague. Everybody has, sells or needs widgets. I suggest using Cats or Weasels.

3. It's OK to write imperfect code.

The mockups I build typically work in only one browser. The lifespan of a set of mockups is so short that you don't need to stress about too many inline styles, HTML tables, un-namespaced JavaScript functions, etc.

And, you know those custom CSS directives, like -moz-border-radius? Use'em!

The goal of a mockup is simply to convey a design and degree of usability; the code driving it will be scrapped and rewritten when the project begins.

4. Copy Text is more important than you think.

What's wrong with "[ blah blah copy text here blah blah ]"?

The answer is two-fold. One, it fails to convey a level of usability. If copy text is required in order for the user to understand how the page works, this forces your design reviewers to conceptualize what that copy text should say before they can accurately review your design.

Second, and more importantly, mistakes happen. Sometimes placeholder copy is unknowingly pushed to production without being rewritten. This makes your company look like amateurs. Amateurs, dude.

Ultimately, you want your stakeholders to understand your design as fast as possible. Fake or unclear copy text inhibits this process.

5. Jettison your ego.

It's inevitable that people will disagree with you; you're not a Design Princess. Know when to take criticism with a grain of salt, and know when to listen and react.

And above all, be able to rationally justify your ideas.