Design Tips For the Pebble Watchface Apps

July 4, 2014

Creating our first app for Pebble smartwatch, we gained useful experience in exploring new platforms and trying new methods of work that we shared in our previous post in which described the development process of Magic Face. This time our Designer Oleg Sheremet will describe in more detail design tricks that will be useful in the Pebble app development. So make yourself comfortable and learn new things with us!

Screen content

Avoid frequent changing of the screen content, as it leads to a higher energy consumption.

Accelerometer data

When designing a watch face for Pebble you can not use the control buttons, but you can control the behavior of the watch face using the accelerometer data, for example by tapping.

Screen color range

Screen color depth is only one bit. It means that in your design you can use either black or white pixels. So to create gray color and its gradients, you should use patterns.

Fonts

It is important to select the font that will look good in small size and without antialiasing. Bitmap fonts work well for this.

Using graphics

If you want to use a photo or a colorful icon you can use Photoshop or other software to convert graphics into two-color images, saving them in PNG. Try different options of Dither to select the most appropriate variant for you.

Evaluation of readability

Pebble screen resolution is 144*168 px and DPI is 176 px. If you need to evaluate the readability of your watch face fonts and Pebble is not at hand, use a device with a similar DPI or twice as big (iPhone 3 or older versions). In the last case you should previously increase watchface design by two times. Also make sure that the resampling method is set to “Set Nearest Neighbor” – so each pixel will turn into 4 pixels and you will avoid gray pixels in your design.

Hope these tips will help you to avoid the pitfalls in Pebble watch face design and make the process of development easygoing!