graphics, process, ui, Uncategorized, web design

On Mockups & Prototypes

It is generally a good idea to show your client what an app or site will look like before you actually build the thing.

And one typically does that through the use of mockups or prototypes.

Mockups vs. Prototypes

I think of mockups as the simplest possible sketches, while prototypes fill in many of the details (colors, logos, fonts, etc.).

Both represent a balancing act — They need to be polished enough to convey your ideas to clients, but you don’t want to spend a lot of time making them.

There are tons of ways to make them — pencil & paper, Balsamiq, etc.

How I Do It

I have a habit of skimming over the mockup stage and just making prototypes — For anything more polished than a line-drawn sketch, it’s usually faster for me to code the HTML/CSS, render it in a browser, and then save a screen shot than to monkey with PhotoShop, etc. Plus, a lot of that code can be reused as the project goes forward.

But this skipping-the-early-mockup-stage approach usually assumes that I have a good idea of a way forward — what if I want to present several different ideas for a project?

Rapid Prototyping

My Stanford – Coursera MOOC course on Human-Computer Interaction has me thinking more about rapid prototyping. In this course, our professor Scott Klemmer makes a strong, research-backed case that it is better to develop multiple ideas in parallel. There are many reasons for this — the designer/developer doesn’t get “married” to any one design (“separating ego from artifact”), and having multiple ideas allows for better group dynamics as these projects go forward. (The real mind-blowing stuff from Professor Klemmer is that the mockups don’t matter nearly as much as the FEEDBACK that you get from your users.)

Get Your Free Browser Line Drawing Here!

So in order to produce more ideas more quickly, I’m back to sketching…. I need some structure for this, so I produced my own little line-drawn template of a browser window:

Browser Template for Mockups


(Note that the file is in .zip format b/c WP doesn’t like .SVG for security reasons.)

(And, yes. Yes, I am a fan of Firefox. Why do you ask?)

Now I can print out a handful of these and sketch designs very quickly.

The next stage of my experiment will be to edit this SVG template into an actual prototype (I hesitate to do this, because I still think it would be quicker to do via HTML/CSS.)


%d bloggers like this: