14 September 2009
You should have at least a basic familiarity with Fireworks. This tutorial does not explain how to prototype with Fireworks, but how to get your prototypes on your iPhone. You must be able to put files on a web server.
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.
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:
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:
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:
How would you create a prototype like this? Here's a quick overview of the steps involved; I explain more in detail later on:
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):
<div>tags are wrapped around the images and the div's
idattribute is set to the name of the file.
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.)
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.
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):
The includes folder: A folder with some files needed for the prototype to work:
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.
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.)
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.
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).
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.
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).
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.