When it comes to developing an application for the iPhone, for instance, you mostly start with user research and brain storming to answer the two essential questions:

1. Who are the users?
2. What do they want to do with the system?

After this initial step, you’ll probably (or hopefully) start prototyping on various levels.

At first, a paper prototype is a good start, where you just need pencil and paper. For some support here, you can use Notepod (via) or App sketchbook (via).

If you got your sketches and your first user feedback about the conecpt, you may want to mock up your interface, so that it looks more like a real app. Suitable for this purpose is either the Yahoo design stencil kit for the iPhone or, even more advanced, a iPhone GUI template for Photoshop.

In this and the following posts I will try to build an iPhone prototype that is easy to customize. In doing so, I want to demonstrate, how Adobe Flex can be used for mobile app prototyping. At first, I will cover basic UI component skinning.

Customized buttons

In order to design your Flex GUI similar to that of an iPhone, you can use the Style tag, which works similar to CSS:

<mx:Style>      

 .buttonBack    {
    upSkin: Embed("img/buttonBlack.png");
    overSkin: Embed("img/buttonBlack.png");
    downSkin: Embed("img/buttonBlackDown.png");
 }
</mx:Style>
 

Additionally, you need to add the style definition to the respective button:

<mx:Button
label="Contacts"
click="handleClick(events);"
styleName="buttonBack"
/>
 

The graphics I use are shown below (1: normal button, 2: button pressed)

In the next post, I will have a look at the application structure to show how to organize the prototype and breaking it down into several components.