Creating an interactive prototype with Fireworks and TAP (touch application prototyping)

It seems that Habr undeservedly bypassed the craze for designing interfaces using Fireworks (at least Smashingmagazine and Cooper strongly promote it as the de facto standard in the industry).

The article is not a translation of Comrade Shlomo Goltz’s iOS Prototyping With TAP And Adobe Fireworks , however, the idea to sort out this issue finally appeared just after this article, and I also “got the picture” from there.

In our laboratory, we often thought about what tools are best suited for prototyping applications. At that time, Expression Blend + SketchFlow was popular, but its attachment to Silverlight did not give us the slightest chance that it would be popular in mobile development.
')
And although there are quite a few tools for prototyping, I’ll tell you about the advantages that Fireworks gives us:

• The entire document, with all interface screens and layers, is stored in a single file with the extension “filename.fw.png”. And unlike Photoshop, FW effectively compresses a document, so that rarely even a multi-page document weighs more than 5 MB. In addition, the document format is available for viewing in any Image Viewer.

• Layers in the document can be shared across pages. Thanks to this, if you want to change the style of a single button, you do not need to do it on every page, it will be enough to make one and the changes will be displayed everywhere.

You no longer want to dwell on the functionality of FW, since the topic is quite popular, and you can easily find many interesting articles.

Tap

And so we will need a version of Fireworks not lower than CS5 and Windows 7 or OS X 10.8. In fact, I did all this, and there and there, and I can say that there is no fundamental difference. Is that in Windows I used Denwer as a server, and for mac MAMP

In detail, too, I will not dwell on this. And so, let's go!

First we need to download the archive itself with the components on the Touch Application Prototypes (TAP) page.



And put the content in the root directory on our server. Then we download the png source, for each type of device its own (so far there is only support for iphone and ipad devices, and although I tested everything with the help of iphone 4, I am sure that everything on Android devices should be type-top)

Opening the source in Fireworks we will see something like that. This png file contains more than a dozen program windows.

We export to the Library folder with the parameters shown in the picture below. Yes, this is the file format used in Dreamweaver, but we don’t need it.

Important: Do not forget to put a tick "Put Images in Subfolder" otherwise TAP will refuse to assemble our prototype.

Run TAP and set the necessary settings, you must specify the name of the document that will be the start page and click Build!

If everything worked out correctly, then having settings for accessing the server from the outside, we can see what happened on the device. To do this, we will open the link in safari and add a page to the desktop (this also supports the placement of your own 114x114 px icon).



Each time you run the prototype is updated to your new build. Thus, after setup, just a few clicks (export from FW and Build in the browser), you can receive and view the changes already on the device. More details about the capabilities of TAP can be found in this handbook (pdf) .

And so what do we get?

Quickly customizable system allows you to create an interactive and animated application prototype using familiar tools with support for animation and gestures. That's all, enjoy your prototyping!

Useful articles: Designing interactive products in Fireworks
Prototyping for Finishing in Adobe Fireworks
Interactive Prototypes And Time-Savers With Adobe Fireworks (eng.)
Create Interactive Prototypes With Adobe Fireworks (eng.) .