Watch Form

Overview

Watch Form is a browser based studio for designing Garmin watch face backgrounds. It gives you a real device canvas for composing type, colour, gradients, stickers, shapes and live metric fields, then exports the finished design at the exact resolution required by your watch.

There is no account, backend or build step. The studio runs entirely in the browser.

The studio is the actual product, not a prototype of it. Add a layer, restyle it, move it on the canvas, change the device or open the colour editor. What you see is what gets exported.

Why it exists

Garmin Face It lets users apply a custom background image while the watch itself renders live information such as time, date, heart rate and steps.

That creates an important constraint. Custom typography, gradients, graphics and decoration cannot simply replace Garmin’s live interface. They need to become part of the background while leaving enough space for the watch to render its own information clearly.

Watch Form is built around that constraint. Instead of treating a watch face as a collection of settings, it treats it as a composition. You design directly on the device, then export artwork that already accounts for its dimensions, shape and live data areas.

One document model

The editor needed to work across watches with different resolutions and proportions without creating a separate version of every design.

I built the document model in a normalized 0 to 1000 coordinate space. Every layer is positioned and sized against that shared space, then translated to the resolution of the selected device.

The editor and exporter use the same rendering logic. This keeps the canvas, preview and final export aligned, rather than maintaining separate approximations of the same design. One model drives every output.

Position is normalized per axis, so a layer sits at the same relative point on a 240 pixel panel and a 454 pixel one. Size and letter-spacing use a single uniform scale taken from the shorter edge, which is the part that matters: normalize type per axis and it stretches the moment a display is not square.

The editor and the exporter are not two renderers that agree. They are one function called twice — once a frame for the canvas you are working on, once more at panel resolution when you export. “What you see is what gets exported” is not a claim about how carefully the two were matched; there is only one of them.

Designing on the canvas

A simpler version of Watch Form could have been a settings panel where users choose a font, colour and layout. I wanted the interaction to feel closer to a small design tool.

Text, images, stickers, shapes and live metric placeholders can be placed directly on the watch face, moved, resized and layered. Multiple objects can be selected and aligned together. Typography, fills and gradients are edited in context rather than through a fixed template.

A metric field is a layer bound to a key rather than to a string — time, date, weekday, heart rate, steps, calories, distance. On the canvas it draws sample values that drift gently while you work, because a design judged against a frozen zero is judged against a number that will never appear on the watch.

Type needed one unglamorous guard. A canvas asked to draw a webfont that has not finished parsing does not wait and does not complain — it silently substitutes a system font, and the export comes out in the wrong typeface. Every draw waits for the font first.

The goal was to make composition the primary interaction, not configuration.

Designing for the device

The exported image has to fit the physical watch precisely. Each supported model carries its own resolution, shape and display information, and Watch Form uses that data to adapt the canvas and export automatically.

Round and rectangular displays are handled differently, and the editor exposes the areas needed by Garmin’s live information so that decorative elements can be composed around them instead of competing with them.

Twenty-six models are described in the studio — fēnix and epix, Forerunner, Venu and the rest — from 240 pixel memory-in-pixel panels to 454 pixel AMOLED ones, round and rectangular. Each carries its own resolution, shape and display type, and those are the numbers the canvas and the export are built from.

The device is therefore part of the design system, not simply the final destination.

What comes out

Two exports, because there are two things a person might want. Face It artwork is the background alone, sized for the panel, with the areas Garmin draws time and data into left to Garmin. A flattened export bakes the whole composition in, type and numbers included, for use as a static wallpaper.

Round watches export a square image. Garmin crops it to the circle itself, so the file has to carry corners nobody will see — and the studio can mask to the panel shape instead when the image is going somewhere that will not crop it.

Making it behave like a tool

Once direct manipulation worked, the remaining work was making the editor dependable enough to use. Undo and redo make experimentation reversible. Autosave keeps the current document intact. Designs can be stored as structured JSON rather than flattened images. Multi selection supports alignment and matching sizes. A live three dimensional preview puts the composition onto a watch case before export. Light and dark studio modes keep the interface usable around very different artwork.

The three dimensional preview replaces the design canvas in place rather than opening over it, at the same size and in orthographic projection, so nothing about the composition is distorted by perspective while you turn it. The face is a live texture re-rendered from the document, which means the clock keeps running while the watch rotates in your hand.

None of those features changes the core idea. They support it. The product should feel like designing, and the exported result should match what was designed.

Source

The source lives in a private repository. I am happy to walk through the product architecture and build on request.

Watch Form is an independent design tool and is not affiliated with Garmin.