Sketching As a Design Tool

In the Interaction Design industry there is a lot of talk about the value of Sketching. Sketching is the art of creating rough concepts for potential interfaces prior to moving forward with designing on the computer.

We believe that creating sketches in the early stages of projects before ever really diving in with the computer as a design tool is a must. So what is Sketching really about? Read on to learn:

• What sketching is
• The real benefit
• The value to the client
• How much time should be spent on them

What is Sketching?

Interaction Design Sketches are quick concept drawings to capture interface ideas and to demonstrate these ideas for others to digest and understand. Sketches aren’t inherently that much different then traditional drawing except that the focus here is on interaction and interface designs.

The details captured in a sketch can range from very simplistic to elaborate, detailed drawings. It’s really up to the designer to determine how much detail needs to be conveyed. However, in the beginning of a project the goal should be to get quick ideas down on paper so that you can get a sense for what may be needed and what may be possible. As sketches are being created you are continually formulating decisions about the interface’s requirements.

Sketches can be captured in any number of ways, from pencil and paper to whiteboards and beyond. This choice is purely up to the designer and is based on what tools may be needed to convey the concept. It’s a good idea to try different types until you find the formats that work best for your needs.

The above example is a quick sketch captured on a 5 x 8 index card. We could have used standard paper for the purposes of this sketch, however this size of index cards provides a great format for capturing iPad (or other tablet-sized) design ideas.

 

This example shows quick concepts for possible iPhone or mobile interface elements captured on blank index cards. Using this size card provides a much more accurate estimation of the proportion of the actual screen area of the device we were designing for. This is a big help when you need to pay attention to the size of objects and how their visual nature influences their interaction ability.

Drawing ideas on paper requires a certain level of visual thinking that not all folks are comfortable with. Someone well-suited for sketching can quickly define ideas in his or her head and can picture how something may work or what might be needed to make the interaction logical. Even so, everyone can still participate in the sketching process. The act of sketching is a form of communication and as you continue to create, you are fostering better and better ideas. Don’t be afraid to jump in and share ideas; you’ll soon realize that even if you don’t have a formal audience to show your creations to, sketching can be a great way to organize the ideas you’re formulating.

Benefits of sketching

We’ve all seen sketching done on whiteboards. This method of communication has been around for a very long time and has proven to be an invaluable tool in the modern office.

How many times have you walked by a conference room without seeing something drawn on the whiteboard? And for that matter, how many times have you see the words “DO NOT ERASE” written next to a drawing?

The real benefit to sketching is getting ideas out in the open quickly so that concepts can be formulated and decisions can be made. When working in a group environment it can be a huge benefit to jot something down so that others can understand your frame of reference. We often struggle with the idea that you have to be an artist in order to draw something, especially when drawing in front of others.

Sketching is meant to be messy and informal. It’s quick and dirty, which is the real beauty of it. You don’t have to worry about being a phenomenal artist; you just need to communicate an idea, however simple or complex that idea is. That complexity then determines how much definition is required within the sketch.

Sketches typically take minutes or less (depending on the complexity) versus potential hours when capturing details using a computer design tool. This doesn’t mean there isn’t any need for the latter; it just means you can potentially formulate your ideas much faster in a sketch than jumping into the computer design realm.

Sketching’s real value

I’m often asked whether any of my sketches get used to communicate directly with clients. This depends on the particular project and the nature of what is desired by the client. However, more often then not, sketches are used mostly for internal purposes as pre-cursors to the more elaborate wireframe designs we show to the client.

Sometimes I like to have clients sketch their own ideas to get all team members thinking about all of the components of the design and how they should come together. This is an invaluable method to get the team members in the mindset of thinking about concepts and working through what could be possible.

Ultimately, how we use sketching really depends on the project requirements and the client. I often try to encourage sketching at the client level as a means to push ideas through and to form a good frame of understanding for what functionality and requirements are really needed. As I mentioned above, it can be a real challenge to be able to picture how interaction and functionality visually comes together. Often times, folks struggle with not being able to visualize an idea in their minds. That’s when sketching comes in handy; it communicates visually what words can’t express and — like anything else — the more you practice, the better you become.

How much effort should be given

Sketching shouldn’t really take much time. The whole idea is to create quick concepts to help you move through the thought process with some visual guidance. For most projects, we typically spend about a day creating sketches. This will vary depending on the project requirements and the overall complexity. The more complex a project is, the longer we may spend sketching out various ideas.

In the overall scheme of things, the time spent sketching actually ends up speeding up the definition process and can help get the whole team on the same page much faster than spending a lot of time creating initial detailed schematics. Our process typically starts with organizational design and the creation of high-level organizational structures. From there we move quickly into sketching out ideas for how this organization can be configured from an interface standpoint and what possible methods can be used to guide the user in navigating this structure.

This example demonstrates again the use of 5 x 8 blank index cards for the creation of concepts for an iPad tablet interface. The goal of this sketch is to capture a possible structure of information and the visual elements needed in order to convey action and state. Multiple sketches together can be used to convey a progression of action or a flow of how things could be grouped together.

The biggest gripe that we hear when doing multiple sketches to show flows or state changes is that you often need to redraw the same material several times. Instead of starting from scratch each time, you can make several copies of your base sketch and then draw the elements that change on top. This tip can save a lot of time, but sometimes redrawing your screen introduces new subtle nuances that you may have missed in a previous sketch.

The two examples above demonstrate sketches that were created using UI Stencil browser pads. These are 8.5” x 11” pads that contain a browser window graphic for placeholder purposes. I really like these. And since my original purchase, UI Stencils has updated them to include iPhone versions with much darker placeholder images. The weight of the paper is just right for use with Gel style pens – my tool of choice.

The goal of these sketches was to simply capture some content hierarchy ideas. I used multiple colors to make clear distinctions between notes and actual interface elements. All-in-all, I probably spent a total of one hour putting together 4 different sketches, which would translate into several hours of computer wireframing and prototyping time.

So give it a shot…try your hand at sketching the next time you’re introduced to a project that requires something visual for a person to interact with, or even if you just need to come up with an organizational structure. Sketching words and capturing relationships is a great way to think about possible organizational schemas. Once you feel good about your ideas, you can then move to the computer to add detail.