Watch design: What makes a dial legible in a second

A glance at the wrist takes barely longer than a second. In that time, a watch face has to reveal what time it is, and it has to do so in dim light, while walking and out of the corner of your eye. Hardly any other design task has so little space and so little time, and hardly any is so unforgiving.

Watch design is therefore a field of its own, somewhere between product design, typography and interface design. Whoever designs a watch face decides on hand shapes, markers, numerals, colors and spacing on a surface of just a few centimeters. With smartwatches, displays for weather, appointments or steps are added, all sharing the same space.

This guide shows what makes a watch face legible, what you can learn from two classics, which rules apply to digital watch faces and how to build your own watch face in a vector program.

What makes a watch face legible at a glance?

A clear hierarchy: first the hands, then the hour markers, and everything else last. The eye first looks for the angle of the hands and compares it with the markers on the edge. We hardly read numerals in the process; we recognize positions. That is why watch faces work entirely without numbers, as long as the markers at 12, 3, 6 and 9 are bolder than the rest.

Four adjustments determine whether this works:

• Hands: Hour and minute hands must differ clearly in length and width. The minute hand reaches the minute markers, while the hour hand visibly ends before them.
• Contrast: Dark hands on a light background or vice versa. For text on screens, the WCAG web guidelines require a contrast ratio of at least 4.5:1; that is also a useful guideline for watch faces.
• Typography: If numerals, then in a typeface with open forms in which 3, 6, 8 and 9 are clearly distinguishable. Narrow, ornate typefaces blur at small sizes.
• White space: Every additional display, every logo and every line of text takes surface away from the hands. A good watch face deliberately leaves room free.

You can check whether the hierarchy is right with a simple experiment. Print three designs at actual size, hang them side by side on the wall and step back two paces. Have someone show you times and roughly measure with which design you answer fastest. Usually the winner is not the most beautiful one, but the one with the clearest hands and the fewest elements.

What can you learn from the railway clock and from Max Bill?

That reduction improves legibility. The Swiss railway clock was designed in 1944 by the SBB engineer Hans Hilfiker. It does without numerals and works only with bold markers and black, broad hands. In 1953 Hilfiker added the red second hand, whose shape recalls the signal paddle of train staff. The second hand needs about 58.5 seconds for one revolution and pauses briefly at the top for the impulse from the master clock, which makes the minute hand jump forward. In this way a technical process becomes a detail that people remember.

Max Bill, who had studied at the Bauhaus in Dessau, designed a kitchen clock for Junghans in 1956 with students of the Ulm School of Design. From 1961 the watch face came to wristwatches. Typical features are finely separated minute markers, slightly longer markers at the hours, Arabic numerals in Bill's own typography and three easily distinguishable hands. The thinking behind it is functionalist: an object should fulfill its purpose as well as possible, and everything that does not serve legibility is omitted.

Both designs are over 60 years old and still look contemporary today. That is because they do not follow fashion, but answer a question: How does a person in motion read the time fastest?

What is different about digital watch faces?

A digital watch face is both a watch and a user interface. In its design guidelines, Apple describes that people look at their watch several times a day and interact only briefly while doing so. Small additional displays on the watch face, called complications in watchmaking and at Apple, should therefore show important, current information that you take in when raising your wrist. According to Apple's assessment, a display that never reveals anything new is less likely to remain in a prominent spot on the watch face.

Google sets similar principles for Wear OS: clear typefaces, legible symbols, simple structure and a time that is always clearly visible. There is also a technical limit. If the display stays permanently lit in idle mode, at most 15 percent of the pixels may be lit, with black as the main color. For designers this means: every watch face needs two versions, a colorful one for the active glance and a reduced one with outlines instead of filled areas for idle mode.

In addition, all important elements should stay within the edge of the case so that nothing is cut off or covered. On round displays, the corners of a rectangular design are lost entirely. Therefore arrange displays along circular paths or in the inner square, not in the corners.

How do you design watches for children?

For children, the rule "less is more" is partly reversed. Learning clocks deliberately show more information than an adult's watch: the hours are on the inside, the minutes in steps of five in an outer ring, often in two colors that match the hands. This way the child connects the short hand with the inner ring and the long one with the outer ring. Once the child can read the clock, the same abundance seems overloaded, and a calmer watch face is better.

With a kinder smartwatch a second layer is added, because here the watch face becomes the user interface for someone who perhaps cannot read yet. Large, unambiguous symbols replace text, few functions are on the first level, and a function such as the emergency call sits on its own tangible button instead of in a menu. Then there is the case: it must withstand falls, rain and the sandbox and be operable with small fingers.

For designers, this is an instructive task. Whoever designs a watch face so that a six-year-old understands it without explanation usually also designs more clearly for adults.

How do you design your own watch face?

Most cleanly in a vector program, because you will later need the watch face in any size without loss of quality. Here is how to proceed:

1. Create a circle as the watch face and mark the center with guides.
2. Place a minute marker at the top edge and rotate it around the center: 60 copies at intervals of 6 degrees make the minutes, 12 copies at intervals of 30 degrees make the hours.
3. Make the hour markers thicker or longer than the minute markers, and the markers at 12, 3, 6 and 9 bolder still.
4. Draw the hands as simple shapes, the minute hand reaching the minute markers, the hour hand significantly shorter.
5. Set numerals, if desired, in an open typeface and align them on a circular path.
6. For a smartwatch face, create a second, reduced version for idle mode: black background, outlines instead of filled areas.
7. Check the design at actual size on the screen, that is, about 4 centimeters wide, and view it at arm's length.

Rotating with copy around a fixed center point is the most important technique here. How this works is shown in the lesson on rotating and mirroring in Illustrator.

A flat watch face on a white background says little about how it looks on the wrist. So finally, place your design in a photorealistic scene, for example with a mockup template for a smartwatch. Only there can you see whether contrast and sizes also work with reflections and the edge of the case.

What this means for you

Watch design is a good school for anyone who designs interfaces, icons or infographics. The rules are strict, the surface is tiny, and every mistake is immediately noticeable in everyday use. What works on a watch face works almost everywhere.

• Design a watch face without numerals, with only markers and hands, and test whether you can read the time in one second.
• Check every design at actual size and at arm's length, not enlarged on the screen.
• For digital watch faces, create a reduced idle version from the start.
• Design once for a target group that does not read, such as children. It sharpens your eye for symbols and hierarchy.