Sketches, wireframes and mockups
April 03, 2011I'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.
![A sketch of a car car sketch](/static/f435dba70ef29e923988d026a493ff47/41099/car_sketch.jpg)
Now think about the structure of a car. This is a wireframe: it represents the structure of our page.
![A wireframe of a car car wireframe](/static/bbed1ff102097e6cd7d47b5369c4d319/41099/car_wireframe.jpg)
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.
![A mockup of a car car mockup](/static/68e393530d4805a3c9bb53f9dbca37de/41099/car_mockup.jpg)
In conclusion, live and learn.
Photos: EDAG Group, sketch generated through Sporkforge Sketch Generator.