Sketches, wireframes and mockups

April 03, 2011

I'm embarrassed to admit, but until now I thought that sketch, wireframe and mockup were more or less the same thing and I was wrong! After I read Sketches and Wireframes and Prototypes! Oh My! Creating Your Own Magical Wizard Experience and Live by the Mockup, Die by the Mockup, I discovered that each word indicates a different and well defined deliverable.

To sum up:

Sketching is only a foundation upon which we can overlay our actual design work.

Think about the sketch of a car.

car sketch

Now think about the structure of a car. This is a wireframe: it represents the structure of our page.

car wireframe

A mockup is both a direct representation of a product experience and a shallow portrayal of an interactive system at the same time.

And finally, think about the bodywork of a car.

car mockup

In conclusion, live and learn.

Photos: EDAG Group, sketch generated through Sporkforge Sketch Generator.


A photo of Elia Contini
Written by
Elia Contini
Sardinian UX engineer and a Front-end web architect based in Ticino, Switzerland. Marathoner, traveller, wannabe nature photographer.