User interface sketching tips part 1

Hopefully, you find yourself drawing mockup paper prototypes for the software products you are working on. It’s a fast and versatile way of testing your initial ideas. Seeing your UI ideas on paper gives you immediate feedback and thus lets your explore many different approaches in a short time.

Without any formal drawing training, I often found myself drawing elements that looked more like an abstract cubistic painting than actual user interface elements. A few of my co-workers however taught me a few tips that drastically improved my sketches into being recognizable as a user interface. If you are experienced in art and drawing, these techniques might seem basic to you, but if you like me is just learning, they will help you immensely.

Each tip will be presented in a separate blog post, as they each take a fair amount of time to prepare.

First technique: Drawing corners and boxes.

User interfaces is most often a set of boxes aligned in a certain manner making up a user interface. When I first started drawing such boxes, I would draw the entire box in one connected line slowing down the speed of the pencil in each corner. Most often some corners would be half way okay, but the rest would be rounded and the lines would be far from parallel or perpendicular.

First off, stop thinking about the line surrounding the box as one long connected line. Think of the box as four separate lines. Instead of looking at the drawing tool in slow motion, look at the endpoint of your line: fixate the goal and draw the line in a fast movement.

As the movement of the pen slows down in speed, the pen is more likely to change direction and the pressure of the pen on the paper is likely to increase. Some sketchers draw lines a little too long as they will then be as close to straight as possible in its full intended length.

Because of this the corners of my boxes now always have small crosses, which is a compromise I gladly accept in turn of drawing what actually looks like a rectangular box.