Watch faces for Android Wear

20 Aug 2015Design7 min read

Since January we've made four watch faces for Android Wear ... simOclock, Chronos, modina and now Digilog.

Digilog is done, the fourth watch face we’ve made for Android Wear this year, after simOclock, Chronos and modina. They’re our own, and I designed all of them.

This was something really new for us, especially me. The first Android Wear watches only came out last year, and Google only opened up watch faces properly in December, with an official way to build them. I started on simOclock in January.

Studying watches

Before anything else I had to study and reference a lot of real watches … Fossil, Skagen, Nixon, Danish Design, Alessi, and a pile of concept watches I found online. I also had to understand the different complications. That’s what watchmakers call anything on the dial besides the hours and minutes, like the date window, the day, or the small subdials on a chronograph. On ours they’re mostly the day, the date and the watch’s battery.

Then I had to create something circular, which needed precision. Everything sits around one centre point. The ticks go round it at the right angles, and each hand has to turn on exactly the right spot.

And there isn’t just one shape. The Moto 360 is round with a flat strip cut off the bottom, the LG G Watch R is a full circle, and the LG G Watch, LG’s first, is square, so every face gets drawn three times. Then each one needs an ambient version, for when the watch dims and you’re not looking at it … mostly black, with only the outlines left.

The Digilog dial for a round watch: a white face with grey ticks, a 12 in a dark tab at the top, the Digilog Mix-Watch name and two empty boxes on the right — Digilog's dial for each screen, before the hands go on.

The same Digilog dial for a square watch, a white rounded square with the ticks along its edges — Digilog's dial for each screen, before the hands go on.

An HTML preview

We test on a Moto 360 and the G Watch, but testing on the watch itself has been challenging, so I made an HTML preview of the clock face. It’s a web page with the face on a Moto 360, a G Watch R and a square watch side by side, built from the same images as the app.

The Chronos face running in a browser on three watch pictures, a Moto 360, an LG G Watch R and a square watch, each showing THU, 7, the battery subdial and the hands — The preview for Chronos, in the browser.

The hands are images rotated with CSS, each turning on its own pivot, and for the round watches the square background is clipped to a circle.

.watchround {
	width: 320px;
	height: 320px;
	background-image: url("img/bg_round.png");
	-webkit-clip-path: circle(160px at center);
}

.hour {
	background-image: url("img/hour.png");
	width: 36px;
	height: 106px;
	-webkit-animation: hour 10s linear infinite;
	-webkit-transform-origin: 50% 84px;
}

.minute {
	background-image: url("img/minute.png");
	width: 30px;
	height: 140px;
	-webkit-animation: minute 7s linear infinite;
	-webkit-transform-origin: 50% 126px;
}

@-webkit-keyframes hour { 100% { -webkit-transform: rotate(360deg); } }

@-webkit-keyframes battery {
  0% { -webkit-transform: rotate(-150deg); }
  25% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(150deg); }
  75% { -webkit-transform: rotate(-0deg); }
  100% { -webkit-transform: rotate(-150deg); }
}

Everything runs fast … the hands spin, the battery needle swings back and forth, the date counts up and the day keeps flipping, so I can see every date, every day and every battery level on all three watches without waiting.

$('.date').jQuerySimpleCounter({
	start: 0,
	end: 31,
	easing: 'linear',
	duration: 31000
});

$(".rotate").textrotator({
	animation: "flipUp",
	separator: ",",
	speed: 2000
});

Once I had the hang of it, the next few faces were easy.

simOclock

simOclock, the simple watch face, was the first. Two hands, the battery on the left, the day and date on the right. It comes with 21 presets for round and square watches, and the phone app lets you make your own … pick the background, the type of hour hand, and the colour of each hand and of the battery text.

simOclock with 21 presets for both round and square faces, beside a grid of nine of them: stripes, dark textures, orange, a galaxy and purple flowers — Some of the 21 presets.

simOclock, customise your own, beside a phone showing the Custom settings: background, hour hand type, hour hand tinting, minute hand tinting, seconds tinting and battery — Making your own in the phone app.

Chronos

Chronos, the Time Master, is a chronograph. The day is on the left, the date on the right, and the battery has its own subdial at the bottom, where a chronograph has its counters. There are 12 accent colours, and the hands come in nine sets, one free and eight you buy in the app. Chronos is the one I made the preview for.

12 accents: twelve small Chronos faces in a grid, each with the 12 and the battery needle in a different colour — The 12 accents.

Nine pairs of hour and minute hands in different shapes on a dark background, each with a red second hand — The hands, one set free and eight to buy.

Digilog

After Chronos came modina, and now Digilog, the mix watch. It’s analogue and digital together … hands on top, the time underneath in a dot-matrix font, and the day, date and battery in two little boxes on the right.

For Digilog I worked out the position, font and size of every element, down to the pixel.

A slide of the Digilog face, white with a dark bezel, with red arrows to the date, battery and digital time labelled with their fonts, sizes and positions, the three hands on the left each marked x center, y 112, and the needle ordering: hour at the bottom, minute in the middle, second on top — The Digilog spec.

In ambient the boxes go, and the day and date, the time and the battery stack up under the hands.

The ambient Digilog spec: a black square face with white ticks and outlined hands, WED 23, 10:10 and the battery stacked under the hands, with the font, size and position of each — Ambient.

It comes in six colours.

Digilog Mix-Watch on a black round watch, with a yellow face, on a yellow background — Digilog in yellow.

Digilog Mix-Watch on a square watch, a white face with red boxes, on a red background — In red, on a square watch.

Digilog Mix-Watch on a white round watch, with a dark blue face, green lettering and a yellow second hand, on a blue background — In blue.