Balsamiq 2.2 has been released with a stylish look & feel, some bug fixing and a new feature to choice how your mock-up will look-like either as an sketch or as a wireframe. But, is it the skin the only thing that matters?
There are some differences between these three terms commonly wrongly used between designers, although it’s also true that there are some overlap which may be the reason of such confusion.
In the context of design, sketching is rapid, freehand drawing that we do with no intention of its becoming a finished product.
… sketching is a tool that supports the process of making, not the actual design itself.
A wireframe’s purpose is to communicate and explore the concepts that come out of sketching
So what’s the difference? Probably there’s no difference except the fidelity degree or the formalism of the idea. Anyhow, I think it’s a good practice really making a distinction and below I’ve listed some thoughts about it:
- While wireframes is a tool to think, communicate and explore, sketches are a tool to expose hypothesis, to let ideas born quickly and easily.
- As Balsamiq suggests, sketches look more hand-made suggesting also that the level of details is less than when using wireframes – I know you’re a great drawer but I mean with details not a fashion of art but a specification.
- Sketches suggests ideas to oneself, wireframes propose ideas to others.
- Sketches doesn’t need to specify concepts, interactions or navigation very strictly, but wireframes requires a good presentation of the visual language – ui elements, alignment, content design, navigation, and workflows.
- Sketches are forced to die after the exploration, wireframes could be our first deliverable in the design process.
What about prototypes?
Prototypes doesn’t need to be the evolution of a wireframe but a proof of concept of one of the many proposals designed it as wireframes. The goal is to test and validate an idea, and as sketches and wireframes, it will require to be polish up.
This is only a brief about the differences about sketches, wireframes and prototypes, if you are interested in this topic I suggest you to read the article “Sketches and Wireframes and Prototypes! Oh My! Creating Your Own Magical Wizard Experience” as an starting point.
Other recommended links: