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 editor below is the actual product. 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.

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.

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.

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

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.

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.