Visualise Apple Watch App More Realistically

Xcode 6.2 includes iOS 8.2 SDK coming with WatchKit framework and Apple Watch simulator that allows us to develop Apple Watch app. As its function to simulate how the app will look like and accept user input (touch), the Apple Watch simulator only focuses on the screen. Hey, there’s not even a way to simulate Digital Crown input. When you run your app in simulator, you’ll get something like this:

Apple Watch Simulator

That’s it! A rectangle window is all you get.

I want a real Apple Watch device more than anything now. Not only because I want to use it in my daily life, I also want to test how’s the app I’m developing will look like on Apple Watch, with its bezel and everything.

Thankfully, there’s a free tool named Bezel. As its name, the main function is putting bezel on Apple Watch simulator. More precisely, it projects the screen of Apple Watch simulator into its window. By that, you can see how your app will look like in the context of a device frame surrounding it (the amount of extra black margin that it will have, how the app will match with bezel and strap colour, etc.). The same app above if shown in Bezel, will looks like this:

App in Bezel

So, how can we get it? Super easy.

1. Download Bezel from here. Or find download link from its website.

2. Extract downloaded zip file. You’ll find Bezel app and a readme file.

3. Open Bezel app. If you haven’t launch Apple Watch simulator yet, you’ll get:

Bezel no simulator

4. Now, launch Apple Watch simulator, by running your Apple Watch app from Xcode (like you usually did). You’ll have Apple Watch simulator screen projected into Bezel. The simulator window is still accessible.

Bezel and Simulators

As somehow Bezel remotely mirrors Apple Watch simulator’s screen, you can still interact (by giving touch or force touch, for example) with Bezel like you usually did with simulator. Awesome stuff!

Customise Watch frame

If you want to see how your app will look like on Apple Watch Edition (the one with gold frame) or with different straps, for example, you can change Bezel’s Watch frame. You can create the watch frame image by yourself, but the fastest way is by downloading the watch frame images from here. Unzip the zip file, then drag and drop a desired frame image to Bezel app. Yay! I have Apple Watch Edition!

Watch Edition

 

Right click on the Bezel app window to select available frame or go back to the default one.

Change Bezel app’s watch frame image

If you happen want to invest skill and knowledge around Apple Watch development with WatchKit, you may need to learn iOS development first. You can join a professional training provided by my company. Take a look here: http://edu.dycode.co.id

Or take a look the intro on wearables development: