Spoon 2.0 — Color and More

Material All the Things!

Spoon was finally updated to work with the Pebble Time and it’s now colorful screen. As I brought Spoon over the Pebble Time I took the opportunity to re-write many parts of the app. I’ve added pretty animations and some custom elements that make it’s design stand out among other apps. As I approached the design I went through a few different iterations trying to take advantage of the colors now available. I also used Google’s Material Design as a guide for interaction design and styling.

Evolution the design from Pebble Classic to Pebble Time

Color Explorations

I started a little crazy with a background texture and tons of color, it was a bit much. I entertained using images from Foursquare, which I abandoned, but may revisit later. During part of the design process I realized that the colors don’t always look good. The screen’s limited color palette changes from the emulator to an actual device. I found a few color combinations that I liked and stuck with the green/pink for the first release.

Circle Animation

Animation

I added some animations for transitioning from screen to screen. Figuring out this part of the framework took some time, but I’m happy with the results.

Transitions

Nothing too fancy, the animations have been slowed down, but look MUCH better on a real device. :)

Spoon — Check-in Demo

Pebble Classic

With the release of SDK3, Pebble made it sooo much easier to support the legacy Pebble watches. The new SDK obviously didn’t increase the watch’s available memory, processing power or add color, it does however allow a unified set if APIs that are compatible across devices. If there are features that aren’t supported they can be turned off or excluded from the code for those platforms.

Spoon — Pebble Classic

I was able to adjust my color palette to work with just 3 colors, yes SDK3 added a new color, gray, which is 50% black/white which creates the appearance of gray. I ran into a few issues with memory consumption, and had to lower the amount of venues being returned and make sure I wasn’t overloading the `appmessage` in/outboxes on the APLITE platform.

Pebble Time Round

…and after all of that I had to do some more work to make it look good on the Time Round, which was a different kind of fun. Mostly it involved using relative sizes instead of absolutes for my positioning, which in turn made my code cleaner for the square platforms. I adjusted the UI a bit due to the round nature of the watch. Pebble has some APIs that help adapt to the rounded screen and display text that follows the contour of the watch. This area is ripe for experimentation and I will probably push the Round interface a bit farther as I continue developing it.

Spoon — Pebble Time Round

In addition to the Round Screen design, new interface, color and speed enhancements, I also added Spanish translations. This presented a different set of problems, which I won’t get into here, localization is hard.

Enjoy the new Spoon experience and keep exploring your world!