Helvetiwatch face

Helvetiwatch face

An Apple watch face that uses natural language to explain the time in a timeless font.

Time, redefined

There's no doubt the Apple Watch is a beautiful product, as their "most personal device ever" it has a fully customisable home screen.

01 Together designwithlove stivenskyrah

Apple watch faces

Apple has put a lot of effort into creating beautiful and familiar watch faces. They've created a range of faces both digital and analouge but it felt like very little of the watchface was really being used for time.

02 Minutes+View designwithlove stivenskyrah
03 Traditional designwithlove stivenskyrah

Analysis

Nearly 50% of the watch face presets provided by apple only use 7% of the screen to tell the time. Text can use more of that space.

Research and inspiration

Beyond the hardware itself there's so much innovation in timekeeping. One thing is crucial, the mechanism of the display is intrinsically linked to the information being displayed. While the sheer choice of faces shows how personal time keeping and wrist watches are.

11 Inspiration helvetiwatch process designwithlove stivenskyrah

Face the typeface

Helvetica remains a timeless typeface and was previously used throughout apples UI across all devices in iOS7.

12 hello+helvetica helvetiwatch process designwithlove stivenskyrah

Brand personality

Inherent in the apple brand is a culture of innovation, Steve Jobs as one of the companies founders is known for having strong opinions on design.

13 Jobs+and+Company helvetiwatch process designwithlove stivenskyrah

Sketch

Connections made, sketch scribbled.

14 sketch helvetiwatch process designwithlove stivenskyrah

Code

Tobie Langel had already built a proof of concept website at helvetictoc.com which I was able to use as a base for my project, using code he had open-sourced on GitHub.

15 code helvetiwatch process designwithlove stivenskyrah

Coding

Using the base code from Tobie Langel on GitHub I was able to build a web prototype storing the HTML, .json and .css files on my website server to host them.

16 design+with+love+coding+helvetiwatch+face helvetiwatch process designwithlove stivenskyrah

Prototypes

I made two in total, the first on the overview tab the prototype makes use of Helvetica, however, the system font on Apple products is now "San Francisco" the prototype below (should at least on a mac / in Safari) be displaying a SF-Pro preview. The main indicators of the font are the slightly slanted ' and a rounded full stop. More info on the San Fransico font can be found on the apple developer website.

Apple Watch Blank
Designed for you  (with love)
Designed for you  (with love) 
Designed for you  (with love)
Designed for you  (with love)
Designed for you  (with love)
Copyright ©Stivenskyrah 2020 all rights reserved. Contact me via twitter, email or linkedin. receptive
Back to top Arrow