Fireworks template for Android

Are you starting with interaction design for Android – like we are – then there are a number of useful resources to help you out. We couldn’t yet find a Fireworks template, so we have made one ourselves and want to share it here. In this Fireworks  template the Android user interface elements have been redrawn as vector images. In the folders the elements have been mostly labeled according to the Android vocabulary.

Download the Fireworks Android template (version 2, Fri december 4 2009)

Are you looking for other templates, here’s a few we found that might be helpful:

Google Android Omnigraffle stencil (BinarySheep)
Android GUI PSD Vector Kit (Pavel Maček for Smashing Magazine)
Android GUI prototyping stencil for Visio (ArtfulBits)

For visual design Android offers the Android icon template pack

Even though the design guidelines for icons are very specific, interaction design guidelines are limited. Android offers User Interface Guidelines that give some information on various menu options for example, but it is far from the extensive design guidelines Apple has published for iPhone. This means there is a lot of room for interpretation by Android application designers and developers. It will be interesting to see what best practices in interaction design for Android will emerge in the near future.

We hope you find the template useful!

Prototyping for the iPhone using Fireworks

Update: This article is also available on the Adobe Developer Connection. The article is edited and therefore a better version of what you read here. Of course you are welcome to continue reading this page, result is the same!

Update: We are working with the patched version of Fireworks CS4 for a few weeks now and most of the problems are fixed. I removed the negative comments in this article on the bugs in CS4.

So, you are a designer. A concept-, interaction- or visual designer and you use Adobe Fireworks for sketching, wireframing, visual design and of course prototyping. Great choice. I have been working with this program for many years.  I think it is the most efficient tool for creating anything based on pixels and consisting of more than one screen. In this post I use Fireworks CS3, but you won’t have any problems creating something simular using CS4.

Lately we are working on quite some iPhone applications. We always aim to see the design we make on the device it is made for as soon as possible. For web design this is easy. Use the “preview in browser” function in FW. But for iPhone it is a bit harder. We created 320*480 png’s and synced these “photos” with the iPhone so we could get a bit of a feel of how it looks on the handheld. But we wanted more. Lees verder »