Visual Thinking for Wireframes

Visual Thinking, sketching and fine art

Applying Visual Thinking techniques to sketch wireframes is not about creating fine art. Sketches are much less polished and usually only take a few minutes to create. Sometimes you might spend more time on a sketch, especially if you intend to share with a wider audience who don’t have the context that members of your team might have. In this instance, it’s worth cleaning-up your sketches and adding extra annotations (explanations) as required.

Sketch wireframe concept for a dashboard.

But I can’t draw!

I hear this a lot but I observe in almost every meeting I attend “chalk-talking” where the main speaker(s) feels compelled to draw something while they talk in an attempt to provide more structure, clarity and a shared understanding. In fact, it’s hard to resist drawing on a wipe-board (if you can find a marker that works) or a blank sheet of paper or in my case my trusty Moleskine Sketchbook. I think we all instinctively understand the benefits of communicating visually even Albert Einstein said,  “If I can’t picture it, I can’t understand it”.

There are specific (simple) techniques (I will share some in another post) that will help you sketch better and so communicate better. These techniques are mostly to do with drawing lines of different thickness, drawing simple shapes like circles and squares and a basic understanding of how images are perceived. Knowing these techniques enables you to visually communicate meaning (and not just eye-candy). Even if you think you can’t draw usually any sketch is better than no sketch at all.

Drawing skills are taught to product designers, architects and graphic designers but often they are not taught to UX designers, business analysts, project managers, etc. I think they should be.

Mobile UI sketch for collecting user preferences (personalisation).

Is a sketch a wireframe?

Purists argue a sketch is not a wireframe because wireframes are more constrained, (by size, layout, aspect-ratios, standard UI elements). However, wireframes can be of any fidelity for example basic “low-fidelity” sketches (some examples on this page) through to “medium fidelity” designs to final “high fidelity” pixel-perfect layouts. The point is to communicate and design to a fidelity that is right for your particular needs (low, medium or high) be that a sketch or pre-visualised i.e. realistic solution created in Axure, Sketch ,inVISION or Balsamiq (insert your favourite UX wireframing or prototyping tool here).

Sketch detailing different interaction states.

Sketching helps you brainstorm ideas and concepts

Sketches make your ideas tangible so they can be shared and understood easily. Every idea needs some kind of translation so other people understand exactly what you mean.  When you sketch you translate your thoughts (mental model) into diagrams that can be more easily understood. It’s about visualising concepts and designs in a way that you do the mental heavy lifting for others to understand and so enabling them to provide better feedback and (if you are lucky) will result in that aha! moment where somebody has an epiphany and just gets it.

Sketching for Agile Projects

The speed of change is increasing all the time. Everyone is looking for productivity gains. In Agile projects often Sprint Burndown, Epic (and Release) Burndown and Velocity are used as performance metrics. Any efficiency gains anywhere will have an impact on these metrics. Imagine if you could sketch (some) wireframes quickly using a visual language everyone understood rather than having to use a dedicated UX application and you could do this in minutes rather than hours. For perhaps the simpler UIs this might be all the Product Owners and developers needed to start work. This could potentially save a huge amount of time. I personally worked on several projects where the client and developers have preferred (version controlled) sketches to medium fidelity wireframes simply because they can be created much faster. Any missing information can easily be added and appended and included any new sketches or iterations of previous.

Sketch concept for Asset Management Application.

Isn’t it hard to share a sketch?

These days it’s easy to share your sketches. Just use your mobile device to take a photo or as I prefer, use a dedicated mobile app. like CamScanner. If you want even higher quality scanning but still freedom to sketch anywhere the portability a battery operated hand-held document scanner like Taotronic’s Handheld MobilePortable Document Scanner is also one of my favourites, (there are many more inexpensive scanners to choose from). My typical workflow is to sketch (in my Moleskine), scan using my mobile phone then publish to a shared team document library.

Sketching is “drawing words & writing pictures”

I borrowed “drawing words and writing pictures” from a great book with the same title. Although this book is about storyboards its title is just as appropriate for this topic. It’s really important you annotate you sketches (draw with words) to provide context and better understanding. Your annotations are written explanations of the visuals. Without these explanations, your sketches would be difficult to understand or meaningless. Don’t just use the same text size everywhere but instead communicate a visual hierarchy. Headings are usually larger and bolder sub-headings smaller and paragraph text smaller still. This way you are considering your audience and how they will perceive meaning. You are helping them understand what’s most, less and least important and how your sketches can quickly be scanned and understood. I usually write them in a different colour ink with a thinner nib. This way it’s really easy to see at-a-glance where the wireframe or concept diagrams end and the annotated notes begin. It also makes your sketches appear less busy.

Wireframe sketch with a call out drawing attention to a specific feature.

Wireframe sketch of a planning dashboard with interactions explained using annotations.

Wireframe sketch showing the content source for highlighted application tiles.

A conceptual vision for a new transaction recording system showing key UI components.