Frode Sandnes, Hua-Li Jian
Sketches and hand-drawn paper prototypes are popular toolsthey are quick to make, inexpensive, and cannot be mistaken for the final product. When drawings take little effort, it is easier to discard them and replace them with new and improved versions. Moreover, during ideation it is important to be able to quickly capture ideas on paper, while they are flowing. Unfortunately, as one's drawing speed increases, the sketches may become unclear and hard to interpret. Here we illustrate how Chinese calligraphy can serve as an inspiration to speed up sketching while maintaining a clear, consistent, and attractive style.
After introducing the basic principles of Chinese calligraphy, we showcase character elements that resemble user interface components and demonstrate how calligraphy techniques can be used to proportion the overall user interface structure.
Written Chinese is the common glue that bridges many spoken languages, including the many Chinese dialects, Japanese, Korean, and old Vietnamese. There are two systems in use, traditional characters and simplified characters. Simplified characters were introduced as stripped-down versions of the traditional characters when the Communists took power in China, whereas the traditional characters are still used in Taiwan and Hong Kong. Here we focus mainly on traditional characters, as they contain details that resemble user interface components.
Chinese calligraphy requires techniques, acquired through practice, that slavishly follow specific rules. These give Chinese characters their unique visual style. In fact, most Westerners are able to produce reasonably good Chinese characters with relatively little trainingall that is needed is to learn the basic rules and to have some practice drawing the basic shapes, called radicals, that are used in the construction of more complex characters. The rules of constructing Chinese characters can be summarized as follows:
- Rule 1: Horizontal stroke first, then vertical stroke.
- Rule 2: Left falling stroke first, then right falling stroke.
- Rule 3: From left to right.
- Rule 4: From top to bottom.
- Rule 5: From outer to inner.
- Rule 6: Outer sealing first, then the inner sealing.
- Rule 7: First the middle, then the two sides if the two sides are small.
Strokes are drawn from left to right or top to bottom. Between each stroke the pen leaves the paper. For example, to draw a simple cross (shi), one first draws the horizontal stroke from left to right, lifts the pen, and then draws the vertical stroke from top to bottom. Figure 1 illustrates these rules, using some basic Chinese characters.
Several of the basic shapes found in Chinese characters resemble common user interface elements. Here we outline some of these shapes and describe the techniques used to draw them correctly. Figure 2 illustrates these shapes, and Figure 3 shows an example of what they might look like in practice.
Rectangles: The rectangle is a versatile shape that can represent buttons, text fields, pull-down menus, user interface views, a portion of a view or image, etc. The kou character (mouth) resembles a rectangle. To render it:
- Draw the left vertical line in one downward stroke.
- Draw the top horizontal line and right vertical lines in one continuous stroke, starting at the top left, ending at the right bottom. It is okay if the stroke has a smooth, arc-like shape, as the three other corners will ensure the rectangular impression.
- Close the rectangle with the bottom vertical line, using one stroke from left to right.
Grids: The character ri (sun) looks like a simple grid with two rectangles stacked on top of each other. Construct it by first drawing the strokes for the surrounding rectangle (rule 5, from outer to inner). Then draw the middle horizontal line and finally the bottom horizontal line.
The character mu (eye) shows three rectangles stacked on top of each other. Render it by first drawing the surrounding lines on the left, top, and right. Then draw the three remaining horizontal lines from top to bottom.
Tian (field) looks like four rectangles stacked in a two-by-two pattern. Again, first draw the left, top, and right lines outlining the frame, and then construct the cross in the middle by first drawing the middle horizontal line, followed by the middle vertical line. Finally, draw the bottom horizontal line that closes the outside rectangle.
Sliders: Zhong (center) looks like a slider, with its vertical line intersected by the rectangle in the middle. First draw the rectangle without the closing seal; then draw the vertical line running through the rectangle; finally, draw the bottom horizontal line to close the rectangle. For long sliders, one may deviate from the rule and start with the vertical lines to ensure the overall structure. Then draw the knob in the desired position.
Arrows: Parts of the two characters tai (platform) and ling (zero) resemble up and down arrows, such as those seen on scrollbars. Use two strokes to draw the top part of tai as an upward arrow. First, draw a diagonal stroke down-left and then horizontally right. Then, draw a diagonal stroke down-right.
Similarly, the bottom part of ling can resemble a downward arrow. First, draw a stroke going horizontally right and then diagonally down-right. Second, draw a diagonal down-left stroke.
Once you learn to correctly draw the basic character shapes that correspond 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):
- Start with the overall structure, and work from no details to increasing level of detail. Go from outer to inner (rule 5) by first drawing the overall frame, then subframes, and so forth. This is similar to Western drawing technique, where the artist focuses on the overall proportions first, then on the increasing level of detail.
- Draw subframes and other components from left to right (rule 3), then from top to bottom (rule 4). Examples of such components include buttons, radio buttons, and form fields.
- Draw the largest components first, then the smaller components. The large components define the overall structure. The smaller components are filled in first on the left, then on the right, top, and bottom, going from outer to inner. Dividing lines are an example of large elements that can divide the various parts of the user interface.
Chinese schoolchildren first practice the simple shapes to learn the correct stroke orders. Drawing each shape just a few hundred times will yield noticeable results. Once the stroke sequence is in the hand, one can practice writing the characters as quickly as possible while maintaining the correct stroke order and a consistent style.
Chinese character practice books come printed with grids of squares. The student writes each character in each square such that all the space of the square is used. The student then also learns to control the sizing and proportions of the characters. It is easy to make such practice sheets oneself. Try starting with grids of 2 x 2 cm squares.
Now You Know
By following the basic stroke order inspired by Chinese calligraphy, you can quickly draw recognizable and consistent sketches of user interfaces with distinct angles and balanced proportions. Several elements from Chinese characters look like user interface components, and with practice these can be jotted down very quickly on paper. Proportions are ensured by starting on the outside with the overall shape and sketching inward toward increased level of detail.
Frode Eika Sandnes is a professor in the Faculty of Technology, Art and Design at Oslo and Akershus University College of Applied Sciences. His research interests include interactive and intelligent technologies. He is the founder of Norway's first master's program in interaction design with a focus on universal access.
Hua-Li Jian is an associate professor in the Faculty of Technology, Art and Design at Oslo and Akershus University College of Applied Sciences. Her research interests include linguistics, with an emphasis on prosody in languages and speech processing.
Figure 3. demonstration of how basic Chinese characters can be used to sketch user interfaces: checkboxes with extended tong and kou (top), sliders with zhong (middle), and scrollbars with arrows, using kou and parts of tai and ling (bottom).
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.
Figure 5. A user interface sketch drawn very quickly, without specific technique (left), and with technique inspired by Chinese calligraphy (right). It takes approximately the same time to complete each sketch.
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.
Figure. 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.
We are taught to draw letters and digits according to certain rules. For example, the digit 5 is drawn by starting with the vertical line, then the half circle, and finally, the horizontal line at the top. The resulting digit will have a sharp 90-degree angle on the top left corner. However, the digit 5 is often drawn in a single, continuous stroke, starting at the top, ending at the bottom. During fast writing, it is hard to achieve the sharp 90-degree angle in the top left part; the resulting character will be indistinguishable from the letter S.
©2012 ACM 1072-5220/12/11 $15.00
Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.
The Digital Library is published by the Association for Computing Machinery. Copyright © 2012 ACM, Inc.