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 2019 all rights reserved. Contact me via twitteremail or linkedin
Support me with brave. View my bookcase or gift guide.