Menu Close

Design/UX Sketching 101

As a long-time instructor of UX and Interactive Design, I suggest that the one thing students and professional designers MUST buy into at the start is that “Sketching is not the same as drawing”. Most students and young professionals get caught up in the self-conscious roadblocks regarding design sketching, as they feel they cannot “draw”. This is not to say that design sketching is void of aesthetics. On the contrary, the beauty of simple line and human annotation has its only elegance. The visualization of human thought can be incredibly beautiful.

The point is that design and UX sketching is more about “thinking” and less about drawing. Visualizing your ideas and thoughts are critical, not only to you as the designer, but for clarity and communication to your design team. For you, sketching helps mold an idea, it allows you to explore different approaches, and even disposable ideas sometimes contain a tiny spark that may trigger a grand concept. This concept may come from further self-ideation or trigger a team member during brainstorming exchanges.

There are many sketching styles out there, but my adopted and most recommended is a sketching style in its most simple and pure form. A simple black pen and paper. Erasing is not allowed. After all, we are exploring. Remember it is more about the idea and process. I prefer a tight line so I use a roller-ball pen, but a simple ball-point pen will suffice. Beyond this, everything else is optional and only if it makes the process more efficient. If no paper or sketchbook is available, a napkin will do just fine. I have sketched many design solutions during lunch meetings using napkins.

A second-level set of tools could include a sketchbook (The UX Sketchbook.com) or journal, gridded or templated sheets, a middle-tone marker or highlighter, and a few additional colored pens. As you can see by my sample sketches, I sometimes prefer to use a secondary pen color or highlighter to organize my thinking.

I practice and teach design sketching in its most simple form. Below are five simple rules. If you apply these rules, with discipline and practice, your design sketching and visualization process will improve exponentially. I have seen this applied and proven with students and professionals alike.

Rule #1 Black Pen

Why a Black pen? What not a pencil? Can I use an erasable Pen? These are the questions I get continuously. The answer: Black pen only. Again, in certain situations, you may only have access to certain tools. In those cases, anything will do. Norman Rockwell (famous American illustrator) painted with the bark of a tree as a replacement for brushes at times. But as a professional practice and as a designer who has the ability to choose their tools – black pens, preferably that do not smear. Simple enough.

Rule #2 No Erasing

In UX and Design Thinking, sketching is typically an early phase application used in brainstorming and low-fidelity development of visual design, information mapping, and user-interface design – basically problem solving. We are exploring ideas and options. We sketch and annotate. The whole premise is to make marks that we cannot erase. We want all thinking documented, good, bad and indifferent. If we are “thinking it”, we sketch it. Remember, sketching is a way we can visualize thinking.

Imagine a design team sitting around a table discussing ideas. Whoever is not speaking is thinking. They may be assessing what is being presented, but many times, they are iterating in real-time within their head. If we do not sketch these thoughts down on paper, they can and in most cases will fall by the wayside and be lost.

When sketching, like in acting, you must throw out any notion of being judged, or of any idea of the ideas being silly or stupid. You must throw caution to the wind and go for it. In most cases, a good design team leader or facilitator can alleviate these issues by inspiring personnel with positive coaching and individualized encouragement, thus bringing out the best in everyone.

Rule #3 No Sketchy-Sketch

The remaining rules are more “technique” related, but they do contribute to the simple and pure sketch approach. So what is sketchy-sketch? This is a very common sketching style used by designers and (fine) artists alike.

It is the formation of line and form by a series of multiple and overlapping marks (see fig). Many times designers will employ this technique as it feels safe to slowly build a line by using a series of smaller lines. It provides a false sense of “crafting” or controlling the mark. In fact, in most cases, it simply exhibits an unwillingness to commit. It displays a lack of confidence in mark-making and worrisome thinking of “am I drawing this correctly?” Plus it slows down the process. We must learn to think and draw as if they are one just as musical virtuosos are one with their instruments.

Rule #4 Learn Two Simple Marks

So how do I become a master at design sketching? I have very goods news. You simply need to learn two simple marks. If you can manage mastering these two marks, you are home free. The two marks consist of a (somewhat) straight line and a simple squiggle.

The straight line is the mainstay that you will use to build most any element. Whether you are indicating a picture, button, or body text, the straight line can do all of these and more. Why do I say a “somewhat” straight line? Because we are not concerned about making pretty drawings. Many people will employ a straight-edge of some kind. This is not necessary. With practice, you will be knocking out beautiful lines.

The squiggle line has a single purpose of indicating display text and establishing a visual hierarchy. You will use this to indicate headlines, feature text, and titling in your layouts. The body text can be indicated with simple horizontal straight lines.

These two lines are all it takes. With practice and discipline, these two marks can be used as the foundation for ideation, low-fidelity concepts and wireframing for any platform – print, mobile, tablet, browser, smart device UIs, dashboards, and more.

In time, you will see, it is less about the marks and more about the discipline and application of the marks that make great sketches.

Rule #5 Annotate Your Sketches

Lastly and most importantly, annotate your sketches. A straight line and squiggle mark can only communicate so much. As you can see by the illustrations provided, the notes, callouts, and directives help in communicating concepts.

Regarding annotation, be aware that even this carries an aesthetic. I recommend that you simply be consistent with your marks. Whether you use a loose cursive or an architect block printing style, do it with discipline and consistency, without sacrificing efficiency. I typically use a block-like print style, using the same straight line mark to form my characters.

Conclusion

When applying the rules as stated, keep in mind, that these become more natural with practice. It may slow you down in the beginning if you are being deliberate or conscious while sketching. But the goal is to get to the point in which this becomes a natural flow and common practice. Once you get to this point, your sketching skills will simply be an ingrained part of the process. It will not slow you down, rather it will speed up the ideation and conceptual development process. You will think less about making great sketches and more about visualizing ideas. Disciplined and consistent marks, visual hierarchy, and descriptive annotation are fundamental principles that will result in great UX and design sketches.