On Wireframing

Last weekend I was invited to give a (very) short talk at the Singapore iOS Hackathon about wire framing mobile apps. Instead of going into a “how-to”, I decided to talk about “why”. I was going to hang around all day, so I thought if someone needed help on how to get started, I could always talk to them one-on-one.

These are the slides from my talk:

In Frank Chimero’sThe Shape of Design”, he gives a great analogy to the creative process of a painter:

Imagine an artist working on a painting in his studio. You probably see him at his easel, maulstick in hand, beret on head, diligently mixing colors on his palette or gingerly applying paint to the canvas, working from dark to light to recreate what is before him. You may see him judging the light, or speaking to his model, or loading his brush with a slated green to block in the leaves in his muse’s hair.

But, if you have ever painted, you know that this image is not a full picture of the process. There is a second part where the artist steps back from the easel to gain a new perspective on the work. Painting is equal parts near and far: when near, the artist works to make his mark; when far, he assesses the work in order to analyze its qualities.

Painting’s near and far states are akin to How and Why: the artist, when close to the canvas, is asking How questions related to craft; when he steps back, he raises Why questions concerned with the whole of the work and its purpose.

If the development (coding) is the “how”, I see wire framing phase as being the “why”. It’s important to think of your product from a holistic perspective. It’s easy to get lost into achieving technical wins, but it’s equally important to think about why those are necessary at the same time.

Wire framing should be treated as a process where you explore all the possibilities – of a product, as well as an interface. Thinking of the “how” (be it coding or the specifics of interface design) can sometimes be too restrictive.

This is close to the thoughts I had in mind when I designed Sketchkit – a wire framing tool meant to help you create quick wireframes (so you have more time to iterate and explore) in Keynote. Right now it’s only available for wire framing iPhone apps.

Of course there are quite a few “keynote based” wire framing tools out there, but they all try too hard to look like the actual UI. This distracts you as a UX researcher and misleads the client.

My slides also contained wireframes to an app that I had been working on last year with a few other friends from Singapore – these were available for anyone who needed an “idea” to start their hacking with.

It’s essential to step back and think about the “why”, it can reveal quite a few insights and uncover startling surprises – as made evident in the last few slides ;-)

Fun fact: the slides are based on a grid inspired by the Marber Grid (designed in 1961) which is used as the base grid for the covers of all Pengiun Books.