Designing a wrist watch

A different kind of UI design

Ian Cox
3 min readNov 19, 2017

For me, there’s something inherently fascinating about mechanical watches. As a designer I was drawn to their beautiful forms and made curious by the technical complexity hidden inside them. They have a rich history rooted in design, technology and culture that I’ve found to be oddly similar to the world of typography.

L951.6 movement found inside the Datograph Up / Down watch by A. Lange & Söhne

The centuries of technical achievements and unmatched craftsmanship seen in high end watchmaking is astounding. I’m in no position to design the mechanical components, but I was interested to try my hand at the visual side which aligned much better with my graphic design background.

I work as a digital product designer so the the tools I’m most comfortable with (in this case Sketch) are tailored towards interface and systems design. I found that many of the modular design principles and techniques that I use in digital design have been useful in my watch design experiment.

Sketch Artboard

A radial design system

I tried to keep everything as modular as possible. I wanted to create a library of interchangeable parts so that I could use to experiment and quickly iterate with.

Nested symbols allowed me to create simple controls within a complex system. The different hour markers can be adjusted in a radial pattern based on one simple slider.

Finding efficiencies

Watch hands in many cases are symmetrical so mirrored symbols allow for easier modification. A half pixel nudge was given to the bottom left point of the hand shape pushing it just outside of the artboard. This helped ensure that the two halves fit together without showing a seam. Without this hack, a fine line is visible due to sub-pixel rounding errors when the two halves of the hand are rotated together.

Editing one half of the seconds hand symbol provides real time feedback for how it will look on the dial.
The library of re-usable parts also helps to keep things consistent.

Symbol override logic

Similar symbols share the same dimensions allowing them to be swapped out interchangeably. I’ve intentionally made certain groups of symbols different sizes so that they only* show up in the symbol overrides dropdown when it makes sense.

*mostly

Here you can customize the hour markers.
Dots, lines, or dashes distributed in a radial pattern and grouped by type for easier selection.
A not so smooth animation of me manually adjusting the rotation attribute of the second hand. The typeface on the date window is Forza Medium.

Hopefully this is just the beginning. I’ve built an intricate design system and now I have to put it to work. I’d be curious to hear from others who are interested in watch design! Let me know in the comments.

--

--