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!