Sketching the UX

Episode IV

A New Sketch

 

Welcome again to our little internet corner! This will be the first entry in a series of posts about designing UX. This series will start with sketching, followed by wireframing and to finish the first trilogy, concluding with prototyping.

 

I will talk about tools of the trade, offer tips and provide plenty of resources for each topic.

This post, as with our previous one, will be an introduction of different topics; offering both a mixture of personal and professional opinions. Our goal is to inspire you to go and experiment and research the different topics mentioned here.

A good deal of links will be posted for those of you who will like a more in-depth information about sketching.

 

A couple of weeks ago Sam Smith, from RMA Consulting, gave a talk about sketching. His presentation slides were viewed more than 70K times within one week. Could this be a sign of a renewed interest for sketching?

New technology has helped to breath life back into this valuable skill as applications, like those developed for the ipad and tablets, has exploded in use.   Sketching applications can be used, using your own fingers or with the help of stylus pen (minus the pressure sensitive function, sadly). Some user are using the applications to fast create different concepts while others may use it to create a basic composition of an idea or to render a thought process. Their are many ways to use sketching program and regardless of which method you use, sketching on an iPad or tablet can be just as fun and maybe easier to carry around -not that carrying a pencil and a sketchbook is boring or difficult at all!.

 

What is a sketch and what it is not.

 

Let’s start with what sketching is not!

It is not drawing. It is not high definition renditions. It does not focus on details.

 

Sam Smith states why sketching is not drawing in two simple words: Execution and Intent.

“It’s easy to look quickly at something and decide whether it’s a sketch or a drawing.

Sketches include mistakes and lack details of a drawing. With sketching only the important parts, what needs to be focused on, has details. The rest is there to create the context.

The intention of a sketch is to produce as many ideas as possible in a short period of time. The sketches have to be simple and easy to understand by others. “However, [one] should be able to explain the sketches and ideas whenever anyone asks.” (‘Sketching User Experience: The workbook,’ Saul Greenberk, Sheetagh Carpendale, Nicolai Marquardt & Bill Buxton)

 

Sketching is a skill that anyone can learn. There is no need to be an artist. As long as the sketches communicate the idea, the job is done.

 

The benefits

Mike Rohde wrote on “A list apart” and article that mentions the benefits of sketching:

 

1- Create a variety of ideas quickly:

The more ideas the better. After leaving behind the surface ideas better concepts will come up.

Get the ideas from previous notes.

Numbering the sketches for future references.

Don’t judge them as good or bad until the sketching session is over.

 

2- Explore the alternatives:

Again, the more ideas, the better. Having different options at the beginning of the project is important so that you will have the opportunity to choose the best option.

Sketching helps in filtering out the concepts that are impossible to produce or impractical.

It is the moment to take into consideration the different problems and limitations that could be encounter in the future.

 

3- Foster better discussions:

Promote comments during the sketching session. Discuss and challenge the every idea.

The “unfinished” look of a sketch can open the door for discussion.

 

Before you start to sketch consider

 

Training is essential. Practice. Warm up. Exercises.

 

Digital or “pen and paper”?

 

There are, as mentioned before, new technologies that makes sketching “more” accessible, easy to share, to develop and well, fun.

IPad applications such as UI SketcherSketchbook Pro and even Skitch are excellent tools. Each one has its own advantages such as, exporting to PSD, sharing on Dropbox or saving directly to iCloud.  UI Sketcher and iPad Sketchbook Pro are paid apps, while Skitch is free, but I find it more oriented to drawing.

 

Sketchbook has many features and is really versatile. It works well with the desktop version (Also a paid app, but there is a free “lite” desktop version).

 

UI Sketcher is focused on iPhone and iPad sketches, providing out of the box  templates.  I have yet to try any of them with a stylus pen, however most are very responsive with fingers.

 

Some of the advantages of digital sketching (on iPad or desktop) mention by Jakub Linowski are:

1- Scaling: a bigger canvas, and easy to resize.

2- Ease of editing: multiple undos, easy to erase and to reorganize the sketch.

3- Legibility: for those that (like me) their hand writing is… more like a sketch than an alphabet.

4- Carelessness: there is more room to experiment. There is no worry of wasting paper.

5- Reuse: why sketch over and over when one can just go and reuse different parts?

 

 

 

…and…. What about pen and paper?

Well, any pen will do!

Here are some recommendations:

H or HB pencil

Blue “no photocopy” pencil

Eraser

Black Pens of various thickness

Markers

-”Pens should be avoided unless you are practiced with them”-Bill Buxton

Scanner

A good sketch book

-”Avoid fancy sketch pads and notebooks if you have a fear of the blank page”- Sam Smith

 

For collaborative sketching sessions, old pen and papers has an advantage over digital sketching.

 

The sketching.

 

It is good to remember that sketching is not drawing. The intention is not to show how pretty and amazing something could be, but to communicate the idea of what could be.

 

Allow yourself to make mistakes. Mistakes are good. They can be covered, but also, they could show future flaws as well as provide inspiration for another idea.  Sketching is fast and free, so recovering from the mistake is not a hard thing to do. This is one of the big differences between sketching and drawing!

 

Jason Mesut and Sam Smith (the guys at RMA) on their presentation at Interaction12 mention the following tips:

 

1- Thicker lines can hide mistakes, as well as lending weight and highlighting.

2- Do all your verticals at the same time, then your horizontals.

3- Start Light and build up weight and thickness as you get more confident in the idea (mistakes/over-drawings are fine, it’s now a policed drawing)

 

They also, across the presentation mention other tips such as:

- Do smooth lines

- Go further if need to

- Use white space

- Sit comfortably. A good working space is important; a good angle to sketch, good light and your tools at hand.

- Using detail to create focus, while leaving the rest “sketchy” to add context.

- Use labels

- They must be readable

- In horizontal view

- Use CAPS

- Don’t write them tiny

- Sketch quick, write slow

- Use signs to denote interaction: arrows, lines, hands.

 

 

It is also recommend to practice parallel lines, intersection lines, squares and squares in squares to warm up.

 

Well folks, that is all for now.

Hope this will serve of inspiration to some of you.

Comments are welcome.

 

And remember to sketch! Carrying a sketch book is a great idea… Instead, I use my iPad.

I will post in the future a little review comparing the 3 different apps mentioned here.

Until then, Good sketching!

Leave a Reply

Your email address will not be published. Required fields are marked *


8 − = two

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>