Prototyping for the Apple iPhone using Fireworks

The best way to evaluate any design is to see it on the device for which it is made—the sooner in the process, the better. For designing web pages, this is easy: use the "preview in browser" function in Fireworks or create a clickable prototype of the pages you have set up. But when you design for the Apple iPhone, it is a bit harder. This tutorial shows you how to use a few scripts to make your Fireworks prototype work for the Apple iPhone.

This method I describe in this article is most suitable for iPhone app design; it's less useful for mobile web application design.

The idea behind the method

Maybe you have already tried to open an HTML prototype on your iPhone that you created with Fireworks. It does not look nice. There are margins you don't want, the zoom cannot be controlled, loading between pages takes too long. Of course, you could ask a developer to help you out, but there is an alternative: building your prototype in Fireworks!

The method I demonstrate in this tutorial combines Fireworks with some jQuery and PHP to give you a prototype you can not only view, but interact with, directly on your iPhone, just as if it's a live app (see Figure 1).

Before you learn how to set up your Fireworks prototype, it is important to understand the principles of this concept, what you can achieve, and why you want this.

Using this technique to build your iPhone prototype in Fireworks gives you a number of advantages that can help you, your stakeholders, and potential users of your app to get the best possible preview of how it's going to work. Using Fireworks, your prototype gains the following benefits:

• Click through the screens the way you normally do with a Fireworks mockup
• Make use of the full screen (no Safari buttons)
• Export directly from Fireworks without the need to change CSS or HTML afterwards
• Open the app from the iPhone home screen
• Disable the zoom
• Send links to every iPhone without even being an official iPhone developer

On the other hand, you don't want to have to learn highly technical programming skills or put your users through unnecessary hoops just to view your prototype. Here are some of pain points of prototyping that this method avoids:

• Learning Objective-C or depending on someone who does know the language
• Taking many actions before you can actually see the screens on the device
• Waiting for a new screen to load every time you click a button

Demoing the method

The best way to get the idea is to see a little demo. I've posted the sample prototype on my own web server for you to access. To see the demo:

1. Make sure your iPhone is on a fast network (Wi-Fi or 3G).
2. Open this link in Safari on your iPhone: http://www.unitid.nl/iprototype/demo (I usually e-mail links to myself and then open them on the iPhone.)
3. Follow the instructions (adding the page to your home screen).

This demo is made with Fireworks, with the help of PHP and jQuery. jQuery is a JavaScript library; PHP is a scripting language for building dynamic websites. My colleagues at UNITiD and I tried using several different other prototyping tools as well, but none of them were nearly as easy to use.

Note: Learn more about PHP in the article, Setting up a PHP development environment for Dreamweaver. Find out more about jQuery in the article, JavaScript for web designers.

How does it work?

How would you create a prototype like this? Here's a quick overview of the steps involved; I explain more in detail later on:

1. Download the ZIP file for this article, which contains some folders with PHP and jQuery files.
2. Create the screens with Fireworks as you would normally. Start with a 320 × 480 canvas and call the first page index (no capitals, please!).
3. Use hotspots instead of slices for creating links to the different pages.
4. Export the mockup to HTML and images as you would normally to test the prototype in a browser.
5. Once you're satisfied that it works in your local browser, export the file in Dreamweaver Library (.lbi) format to the Library folder.
6. Upload your complete set of prototype files to a server that can execute PHP.
7. Get your iPhone and visit the index page for your prototype: http://www.yourwebsite.com/path_to_iprototype/iprototype

But how does it really work?

Behind the scenes, jQuery and PHP work together to provide a seamless prototyping experience. Here's how (if you are not interested, skip to the section, Create the Fireworks PNG):

1. When you open the prototype's URL on the iPhone, jQuery will check the height of the screen so it'll know if you are on an iPhone and if you already have added the link to your home screen.
2. If you've not done so already (screen height is under 480 pixels), it alerts you to add the link to your home screen.
3. If you enter the site from the home screen, the height of your window is 480 pixels, so jQuery gets the content of the mockup using PHP.
4. All .lbi files are loaded and changed a bit by PHP to provide correct paths to images, remove unnecessary tags, and change the links so that jQuery can work with them. Also, <div> tags are wrapped around the images and the div's id attribute is set to the name of the file.
5. jQuery hides all divs found in the generated HTML but makes the screen (page) named "index" visible. (That's why you need this page in your PNG file; otherwise, your prototype will start blank.)
6. Clicking an image map (which you created as a hotspot) on this image shows the div to which the URL links.

Take a look at the source code of the files for more details. The code contains some useful documentation. (I figured that most of you are designers who are not so much interested in code most of the time, like myself.)

Setting up your prototype

To set up your prototype, you have to download the iprototype.zip file provided with this article, create a Fireworks PNG file, and export your pages to library items. I won't go into detail about how to use the program, but will point out a few important things to make prototyping for the iPhone work.

If you are new to Fireworks, you can find many tutorials on the Fireworks Developer Center about how to use pages and hotspots. For example, Rapid interactive prototyping with HTML, CSS, and JavaScript using Fireworks and Dreamweaver CS4 comes to mind.

Download the files

Download the ZIP file and extract its contents to your hard drive. These files have to be uploaded to a server, so make sure you can find them in your FTP client or put them directly on the server. Here's what you need to know about the files in the iprototype folder (see Figure 2):

• index.html: The file the browser opens. The file contains some metatags, CSS, JavaScript, and a call to the PHP file.

• The includes folder: A folder with some files needed for the prototype to work:

  • Additional.css: This file inserts some additional CSS to the HTML file if you open the prototype in a regular browser (like Firefox or Internet Explorer)
  • functions.php: A file to read and modify the exported files from Fireworks
  • icon.png: The icon that is put on the iPhone home screen (or design your own!)
  • The img folder: Two image files that are called by the additional.css for use in a regular browser
  • js > jquery.js: The JavaScript library
• The Library folder: This is where you export your files from Fireworks. (You can use these files to test, but you should delete them before exporting your own prototype.)
• source > proto.png: Just to get you started, here is the source file of the prototype.

Create the Fireworks PNG

A great way to start is getting the iPhone UI elements from Metaspark. (Thanks for this, guys!) Open Fireworks and create a new file, setting the canvas to 320 × 480 pixels and naming the first page index. This is important; otherwise, you'll get a blank screen when opening the first page on your iPhone. You can also start with the source PNG file of my demo, which can be found in the source folder in the ZIP file. Make the page higher than 480 pixels if you want it to scroll.

Insert pages and hotspots

Fireworks makes use of pages. Every page can have its own graphics, buttons, and settings. To be able to click through the screens, you need to create more than one page and link these pages together using hotspots.

The easiest way to create a hotspot is to right-click the element you want to be a button and select Insert Hotspot. In the Properties panel, enter the page name to which you want the button to link (see Figure 3). You can enter this manually or use the pop-up menu. If you create a link to a page that does not exist, you will see a black (or whatever background color you have set) screen and you'll have to reload the prototype. Make sure all links are correct. You can export the prototype as HTML and Images to check everything in your favorite browser.

Note: To learn best practices for structuring your Fireworks document, organize objects, and reuse common elements, read Using pages, states, and layers in Fireworks CS4.

If you'd like to be able to show the prototype in a regular browser, you have to add a page called homescreen to the PNG file. On this page, place a screenshot of your iPhone home screen with your app's icon on it. Make a hotspot on the icon and link it to the index (index.htm) page. (This page will not be shown when opening the prototype on the iPhone.)

Exporting, uploading, and viewing your prototype

When your prototype is completed and there are no dead links, you have to export all pages as Dreamweaver library items in the Library folder. Upload all files to a server that can execute PHP, and then open the link on your iPhone.

Export to .lbi

Choose File > Export in Fireworks. Find the Library folder and export the file as Dreamweaver library items. (Dreamweaver library items are small pieces of HTML code that you normally insert into web pages and that update automatically.) When exporting, don't bother entering a filename, as the files will be named after your pages. Select Slices: None, select the Put Images in Subfolder (images) option, deselect the Current Frame Only option, and click Export (see Figure 4).

Upload and view the prototype on your iPhone

All files in the iprototype folder should be uploaded to a server that can execute PHP. I normally use the FTP client in Dreamweaver to do this. Take your iPhone and navigate to the address, ending with /iprototype. Follow the instructions on the screen (Figure 5). You can change this text if you like. It can be found in the index.html file. If you open the URL in a regular browser, be sure to have a page called "homescreen" included in your pages.

Things to know

Note that every time you open the prototype by tapping the icon on the home screen, the pages first have to load before you can actually click through them. Also, the last page you see when leaving the prototype will be shown first, but disappears when the rest of the pages have been loaded. Because this prototype method does not support caching, you might have to keep these drawbacks in mind when sending the URL to your customers or using it with usability tests.

This method is tested for prototypes with up to 30 pages, but problems can occur if your prototype has many more pages. You might have to work a bit on the code or just split the app into two (just for testing purposes, of course).

Where to go from here

If you already know Fireworks and are in the business of developing or designing iPhone apps, you will like this way of getting your designs on the iPhone: fast, pixel-perfect, and interactive! You do not need additional software, cables or any knowledge of programming languages. Of course, this method has its restrictions as well, but it is great for showing others your design and do some tests with it.

We will keep working on the script and include more functionality. We notice many designers are struggling with rapid prototyping for handheld devices, not only for the iPhone. Visit our UNITiD site (most of it's in Dutch, but some is in English) for updates on the topic or to contact me if you need any help with your design or prototypes.

Also watch the following short video tutorial where I show you how I created the demo:

If you start designing iPhone apps, I recommend you take a look at the iPhone Human Interface Guidelines from Apple.