Designing By Hand in the Digital Age
Pencil first. Pixel later. The tools and tips for great sketches.
There are those in the digital design community who don’t start in pixels, but instead start with pencils. I am one of those. In fact, the digital design tools (Sketch, Photoshop, Fireworks, Marvel, InDesign, et al) don’t make much of an appearance in my process at all. Certainly when there are new visual styles to be developed or production assets to be made, those are the tools to turn to. But in the design process, they take a back seat to a bunch of analog tools.
If this appeals to you, if you’ve always wanted to try exploring ideas by hand, or you’ve tried a little bit but would love to try some more, then this post is for you.
Why
It may just have started as a quirk for me, but it has become the bedrock of my design process. Partly because for me there are, for every step along the way, two sides to every decision: the articulation of the idea and the communication of the idea. And partly because, just like writing longhand, drawing by hand accesses different parts of the brain and mind than similar activities on the computer. Having both the envisioning and analytical portions of the mind working together leads to greater creativity.
And as we get more into the how of my sketching practice we will see that these two sides are honored by first sketching in pencil and second inking that sketch in.
The two sides to every decision: the articulation of the idea and the communication of the idea.
These two activities, exploring the unseen opportunities of a blank page and selecting the bright line of a good idea, mirror closely Bill Buxton’s thought on the creative process of design:
Design is choice, and there are two places where there is room for creativity:
1. the creativity that you bring to enumerating meaningfully distinct options from which to choose
2. the creativity that you bring to defining the criteria, or heuristics, according to which you make your choices.
— Bill Buxton in Sketching User Experiences
What
When a new designer starts at Tradesy, I get them a kit of design tools. Even those designers who are super proficient at sketching in code or knocking out killer mocks in Sketch or Photoshop are encouraged to first articulate their ideas, for themselves at least, by hand.
The kit includes:
- Pentel .05 Graphgear 500 Mechanical Pencil
- 6-piece Micron Pen Set
- Prismacolor 12-piece Warm Grey Art Marker Set
- Staedtler Mars Latex-Free Eraser
- Pocket Engineer’s Scale
- A Draftsman’s Dusting Brush
- Gel Roller Ball Red Pens
- Artbin
- 8" x 11" Grid Paper
- 11" x 17" Grid Paper
- Some Prismacolor color art markers
How
It doesn’t really matter for me if it is a thumbnail sketch to capture some ideas about the silhouette of a feature or a set of meticulously annotated working schematics, it always starts with a blank page and a pencil.
Here is an important part for me. Designers don’t come to blank pages with blank minds. In fact we most often are brimming over with ideas. It is the selecting the lines to draw that begins the first step towards decision making.
Are we exploring a whole structure or a system or just a small element of a bigger, already established ecology? Do we draw the borders of the screen we are designing for first and then fill in the blank interior, like drawing a circular face, ready for our dots for eyes and expressive arc for a smile?
A lot of the craft of design is understanding how to approach the problem, and the blank page requires we do just that.
While there are great efficiencies in tools like Bohemian Coding’s Sketch, the fact that there are preset art board templates means that we rely on those default frameworks to solve the problem.
UI explorations float in an unsketched continuum like architectural section drawings. Interaction flows line up silhouettes of content units in sequences and alternates. Page layouts hint at the devices displaying them.
The first line you lay down anchors the exploration. The first line is always the hardest.
This is the work of the designer: drawing closer to a decision.
I start by roughly sketching out in pencil. Then picking the items that suit the design solution we’re looking for, I ink over with the micron pens. It is then that the eraser comes into play (and the draftsman’s dusting brush!), removing the lines that were not chosen and the good idea emerges. It creates a cleaner look and forces a built-in revision process.
While in pencil I often use the straight edge of the engineer’s scale for a quick straight line, when it comes to inking, all the lines are freehand. This keeps the focus not on the precision of the drawing but instead focuses everyone’s attention on the accuracy of the vision it portrays.
Keep the focus not on the precision of the drawing but instead focus everyone’s attention on the accuracy of the vision it portrays.
It is now articulated enough to be evaluated by more than just the person who had the idea.
I have certainly seen designers who can code up something pretty similar to that drawing above in less time. Fantastic stuff really, but in the process they will have to make decisions that aren’t really salient to evaluating this idea: decisions about color, font and pixel dimensions, spacing and iconography. All those decisions need to be made, but first things first.
Many a good idea has been killed because of the font chosen in the mockup.
Adding colors and particularly the shading really helps increase the sense of hierarchy and clarity for communicating the ideas. One of the great advantages of sketches for communicating the design is that they are a representation of the design decisions rather than a demonstration of them. This distinction helps everyone who is evaluating focus on the concept, structure, mechanics and dynamics of the feature and its display.
Sketches are a representation of the design decisions rather than a demonstration of them.
And then with the aid of the red pen, it comes to annotation. A lot of the power of the sketch as a communication tool lies in this separate layer of content specifying behavior, structure and goals.
Like every part of every process, it isn’t a mechanism that guarantees results, it is a way to look at the same problem in different ways.
Other sketching resources
Books & Sites
Articles
Downloadables
