Seeing our design in real life

Here’s the thing—there’s only so much you can do in Photoshop. To truly understand a platform as a designer, you really need to use (and ideally live with) a real device, and see your work on that device. Only then can you fully evaluate the complexity of your flows, the size of your touch targets, or the legibility of your text.

Luckily, Timothy and I both had test devices—I sported an LG G Watch prototype and Timothy carried a Moto 360 prototype. We then needed a way to quickly send screens to our devices so we could iterate on the design. A few years ago I’d published theAndroid Design Preview tool that lets you mirror a part of your screen to a connected Android device. Much to our delight, the tool worked great with Android Wear! After seeing our mocks show up on my LG G Watch, we made a few small tweaks and felt much more confident that the overall idea “felt right” on the wrist.

Android Design Preview mirrors a part of your computer screen to an Android device. It’s especially awesome seeing your UI running on an LG G Watch prototype.

Designing for round devices

We’d never designed round UIs before, so we weren’t sure what this new adventure would be like. Quite frankly, it ended up being unbelievably easy: tweaking all 8 of our screen mocks for round took under an hour. When you’re only showing the most important 2 or 3 pieces of information on screen at a time, that’s only 2 or 3 pieces of information you need to optimize for round devices. All in all, there were only a few types of minor tweaks we made:

Scaled up backgrounds to 160x160 dp (320x320 px @ XHDPI)

Bumped up content margins from 12dp on square to 26dp on round; this means content was 116x116 dp on square and only a little smaller at 108x108 dp on round

Pushed down circular actions like “Continue tour” to better vertically center with the watch frame

Center-aligned certain short snippets of text on round devices as opposed to left-aligning on square

Dropped the side padding for context stream cards (the platform automatically does this for notifications, so there isn’t any actual work to do here)

These weren’t completely different layouts—rather, the same layout with slightly tweaked metrics.

It’s hard to articulate the excitement we felt when we mirrored the mocks to Timothy’s Moto 360 prototype with Android Design Preview. To put it lightly, our minds were blown.

There’s something special and awe-inspiring about seeing one of your UIs running on a round screen.

And that was it—with round and square mocks complete, and mirrored on our devices, we’d gotten our first glimpse at designing apps for this exciting new platform. Below are our completed mocks for the tour discovery and engagement flows, not a grid of app icons in sight. You can download the full PSDs here.