Watch Design
horology, design tools

For me, there’s something inherently fascinating about mechanical watches. As a designer, I was drawn to their beautiful forms and curious about 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.

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 more closely with my graphic design background.

I work as a digital product designer so the tools I’m most comfortable with (in this case Sketch and Figma) 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.

Refference and inspiration

Rolex Explorer ref. 1016
Nomos Tangente
Rolex Datejust 41
Raketa Big Zero

Design Process - 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 with and iterate quickly.

Components inside of Figma
Symbols inside of Sketch
Nested components allowed me to create simple controls within a more 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.