Prototyping

(An example of a Fireworks Prototype built with Flex Components)

I have to admit I wasn't that impressed with the idea of Fireworks delving into the world of "rapid prototyping", mostly because I didn't have a clue what "rapid prototyping" was. However, after a few months of working with FW CS3, I'm beginning to see the possibilities and usefulness of protyping in Fireworks.

What is Rapid Prototyping?

Basically, rapid prototyping is the process of creating a sophisticated mock up of a web or mobile application. Designers and developers can work together in the planning stages to produce prototypes in a more visual manner. For instance, let's say you are proposing a log in system for a client, and you need to explain to them how the process works visually. Many clients are unaware of web technology, the slang, and the nuts and the bolts that make it all work and trying to explain it all to them in words or on scratch paper isn't the best solution. This is where rapid prototyping comes in.

In this example, I have a very basic login system "mocked up" for a client to review. I have used separate pages for each step in the log in process. This way, I'll be able to link between the pages and give the client a real feel for the process. I have uploaded the example for you to try out here: http://www.virtualclues.com/fireworkstutorials/prototyping/example/Login.htm

The Common Library

Fireworks provides several different component styles for building forms in the Common Library. You can find form elements (textarea, text input, checkbox, radio buttons, etc.) in the Flex folder, the Mac folder and the WinXP folder. The Mac and WinXP components allow you to show how the form would look in Windows and/or Mac. The Flex components allow you to specify more details about each form field including: color, disabledColor, and even enter in custom MXML code. Sad to say, I know very little about MXML and even less about Flex but if you would like to know more about MXML there are quite a few good articles on the Adobe web site so I'll leave that to them ;-)

Here's a good one to start: http://www.adobe.com/devnet/fireworks/articles/rich_symbols_export.html

Anyway, it's just a matter of dragging out form elements from the Common Library onto the canvas, positioning them where you want, changing their appearance (if they are Flex components), changing labels and setting up the basic feel for the web application in a visual way. You'll quickly find though that rapid prototyping in Fireworks is limited. However, it's much better than just taking screenshots and linking them together or worse yet building the forms in Dreamweaver, coding them and then hope the client approves. It's much faster, cheaper and easier to make changes in the prototyping stage than the developing stage!

Sample Prototype

In my example login application. (Again, you can take a look at it here. Click on the "Login" button and the "Forgot Your Username or Password" link to see the prototype in action.) I could show my client visually how the login screen will look as well as explain other pages that will need to be developed for the system. For instance, if the user forgets their username or password, I've set up a prototype of that screen and how that would work. In this way, problems can be worked out before the actual application is developed. You may realize things you hadn't even thought about, as the developer for the application, as you mock it up, so it can save a lot of time and headaches down the line!

The Good:

• Quick and easy way to mock up web apps to show to clients and/or work with other developers in a visual manner.
• Pages (new in CS3) make it very easy to try out new ideas, toss out old ones, start from scratch, borrow from others and so on. It's convenient to work in the same PNG file rather than having to create several files. Frames could also be used for this purpose but they don't offer the same functionality as pages. For instance, you can't create links between frames, set a master frame, etc.
• Affordable prototyping. Many prototype applications, though much more sophisticated, are very pricey. The Fireworks option is a good one for small web firms and businesses.
• Better communication with clients. Most clients don't care about the backend of the system, its' related jargon and so on - they just want to see what it is going to look like in the end! (And how much it's going to cost!) In that way, they can suggest changes and improvements that will best suit their needs.

The Needs Improvement:

• Quick and Easy Simulation. In Fireworks CS3 simulating a user's experience through a mocked up application is a little awkward. Links can't directly be applied to button components. A work around is to create hotspots out of the buttons. (A shortcut is to Right-Click on the button and choose Insert Hotspot and you'll then be able to assign links to various pages in your prototype.)
• Image Based Results. Prototypes are uploaded as images with hotspots so text boxes, drop downs, etc do not work, they're just images.

The Bad:

There's really nothing that I would label as "bad" since this is new in Fireworks. I'm reserving judgment until later releases!