Helvetiwatch - Process

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

Time redefined.

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 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.

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.

Reserach & inspiration.

Research & inspiration.

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

Beyond the hardware itself there's so much innovation in timekeeping. One thing is crucial, the mechanism of 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 typography.

Face the typography.

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

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

12 hello+helvetica helvetiwatch process designwithlove stivenskyrah

Brand personality.

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.

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.

Sketch.

Connections made, sketch drawn up

Connections made, sketch drawn up

14 sketch helvetiwatch process designwithlove stivenskyrah

Code.

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 to github

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 to github

15 code helvetiwatch process designwithlove stivenskyrah

Coding.

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.

Prototype.

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 preview. The main indicators of the font are the slightly slanted ' and a round full stop. More info on the San Fransico font can be found on the apple developer website.

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 preview. The main indicators of the font are the slightly slanted ' and a round 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.
Extra links
Extra links


Designer bookcase All the books in my collection, a worthy reading list, if you have an idea for an addition let me know. 
Designer bookcase All the books in my collection, a worthy reading list, if you have an idea for an addition let me know.  


Amazon gift guide A deepening directory of things I love. I've curated the everything store so that you don't have to. 
Amazon gift guide A deepening directory of things I love. I've curated the everything store so that you don't have to.  


Friends, discounts & bonuses When I have a referral link to a tried and tested service or product I put it on this page. 
Friends, discounts & bonuses When I have a referral link to a tried and tested service or product I put it on this page. 


Brave To make your internet a little less... messy. A browser that cares about privacy and blocks ads by default.