First, draw a stroke going horizontally right and then diagonally
down-right. Second, draw a diagonal
respond to user interface elements,
you can then compose these shapes
into sketches of full UIs, using some
of the rules listed earlier (see Figures
4 and 5):
1. Start with the overall structure,
and work from no details to increasing level of detail. Go from outer to
SPEED VERSUS PRECISION
Structuring the User Interface
Once you learn to correctly draw
the basic character shapes that cor-
• Grid of rectangles that could resemble a panel of buttons,
drawn very quickly, without specific technique (top), and
with technique inspired by Chinese calligraphy (bottom).
Although it is trivial to draw rectangles, it is difficult to
quickly draw rectangles that look rectangular. Many
people draw rectangles using a single stroke, and
when drawn quickly, the rectangles lose their corners.
The three strokes making up a Chinese calligraphy
rectangle ensure that three of the corners are distinct.
The rectangles therefore appear rectangular even
when drawn quickly.
November + December 2012
• Figure 4. User interface structure and proportion are achieved by beginning with the big picture
and going into detail following the rules of outside and inward, left to right, top to bottom, and
larger to smaller.
• Drawing speed affects our ability to draw 90-degree angles
because of the hand momentum. When drawn at high
speeds, the resulting shapes look more circular than rectangular. When the motion is divided into separate strokes,
the rectangle’s corners become more distinct.