Cyril Mottier

“It’s the little details that are vital. Little things make big things happen.” – John Wooden

Android Wear Flat Device Frame

As some of you may know, I recently release my first publicly available Android Wear application: Capitaine Train Android Wear1. As part of the design and development process I had to create some mockups and wireframes. All of these prototypes were made thanks to Photoshop CS6 and based on a 280x280 document. This square document represents the actual screen resolution of one of the currently available Android Wear watches: the LGE G Watch.

Working on full-frame screenshots is usually enough in the design and development phases of a mobile app. But when it comes to marketing, communication and promotion, device-frame screenshots should be favored over full-frame ones because they give life to your product. Indeed, device-frame screenshots have the advantage of bringing your application to the real world by associating it with the objects/devices it will be running on.

Because I recently had to give some Android Wear-related presentations, I wanted to have a nice and simple way to integrate my screenshots into actual device frames. I had a look on the Internet but was quite disappointed about the resources currently available2. As a consequence, I made my own device frame and would like to share it with you so that you can use it in your presentations or simply when promoting your Android Wear app.

I have also worked on reproducing the two choices of colors of the LGE G Watch you can find out there: Black Titan and White Gold. This can be particularly helpful when using several watches at the same time or simply to choose the model that best fits your background (light over dark vs dark over light):

As I always do when releasing graphic assets, I ensured the PSD respects a certain hygiene: made only of vector-based elements, sensibly layered, named and grouped, etc. The PSD is using an LGE G Watch form-factor (280x280 pixels, hdpi, etc.) and have been created with Photoshop CS6 but should work properly with all recent versions of CS. Also note the following resources are licensed under the CC BY 3.0:

I really hope you’ll find this PSD useful to create stunning applications and amazing presentations.

  • 1 More details are available on a dedicated article on the Capitaine Train’s blog. The article contains several screenshots to help you understand the different features integrated into the app.
  • 2 Most of the resources available on Dribbble, for instance, are based on round screens and don’t respect the current devices and reality.