Sketches, wireframes and mockups

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.

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

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.

In conclusion, live and learn.

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