Kindle Fire OmniGraffle Stencil

Download Kindle Fire Stencil v1.0

Make sure to download the Droid Font so everything looks accurate.

According to estimates the Kindle Fire has sold around five million units. If you already have an Android app it might be a good time to start thinking about moving it over to the Kindle.

To help you (and myself) start wireframing and prototyping your next Kindle Fire app I created this OmniGraffle stencil. Most of the UI elements I picked are just ones I used when working on apps for the Fire and some I though you might find useful. Please let me know if there are UI elements missing that you think I should add.

Kindle Fire Showing

Kindle Fire Stencil Preview

Using the Stencil at 340 Pixels Wide

If you’ve installed the stencil you’ll notice that the mockups are setup for a screen size of 340×580 instead of 600×1024. I picked 340×580 so that the kindle would be life size on my monitor. Why? Because the most finite thing about designing for multi-touch displays is the finger. I wanted to be able to mockup a button at 100% on the screen and use my finger to see if the button is big enough. Plus this way I can see, without zooming out all the time, how a font will look to the eye. For wireframing this is an acceptable usage, but when you get into the visual design portion you’ll want to make sure to mock everything up based on the 600×1024 screen size. Awesome Giant has provided a 600×1024 Kindle Fire GUI PSD for free on their site.

Kindle Fire Template Next to Device

I settled on 340×580 size by using the following math.

  1. A computer monitor is generally about 96 ppi and the kindle fire is 169 ppi.
  2. 169/96 = 1.76041666666667
  3. 600/1.76041666666667 = 340-ish
  4. 1024/1.76041666666667 = 580-ish

If you’re in an agile (FTW) environment like I am then the developers will start building the application while you’re still wireframing and working on the visual design. In these case if they need you to provide them with a size for something. Just multiple the size of the element by 1.765 (600/340 = 1.76470588235294). For example, if you lay out an element using the stencils and it’s 180px wide by 24px tall with a font-size of 18px then you can do the math and tell the developer to build that button as 318px wide by 42px tall with a font-size of 32px. (To be super anal, Android size uses dp not pixels.) If you’re designing with a grid-systems, as you should be, then you’ll probably be doing a bit more rounding after you multiple by 1.765 so that conforms with your grid better.

Add Your Comments

Your email is never published nor shared.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <ol> <ul> <li> <strong>