I’ have always used Photoshop for designing interfaces. Always. Maybe it was because I have mostly designing 5 paged blogs or small corporate websites till now. In the last month of 2010, I got myself into designing larger screens; interfaces that required detailed interface flows to be demonstrated.

Prototyping

I’d never given importance to prototyping. Maybe yes. On paper. I used to do Pencil sketches to visualize what I was trying to do. The next step would always be entwined inside a PSD. If there had to be any changes I would wrestle with the layers to mold it to what I want. There was a problem. It had to be presented to and approved by a client. A client feedback can do grave things to an existing design. He may have many suggestions. His suggestions may affect my brain nerve centers which can ultimately translate to my layers in Photoshop. More changes come. More concepts arise. A frantic attempt to reorder positions, renaming layers to maintain hierarchy of interface states starts. One button color change may have to be replicated across 10 others just to preserve consistency.

Done. I’m doing it wrong.

Soon I was hunting down good software that could produce prototypes that demonstrated the flow of forms, use cases of design elements and error displays. These final screens had to be designed for the client. Not the paper sketches. I came across softwares like MockFlow, Mockingbird and Pencil Project. I tried a few screens in then. Though these generated good results in terms of screen flow, It lacked in portability. Yes. To Photoshop. The same elements needed to reused in a software I’m comfortable with. The same layers needed to be designed. I needed to concentrate on just the typography, layout and placement of elements.

Finally I had to turn to Adobe Fireworks. I simply didn’t acknowledge its existence till now. For me it was just a yellow icon sitting somewhere in the programs menu. The 1998 version of this product (then Macromedia) was originally use to create optimized web graphics. But over the years, it has snowballed into a good web design and prototyping software. Spread across 3 planes of work areas; layer, states and pages; It is ideal for progressive interfaces. Pages could inherit master pages. Hotspots provided me an option to interlink each states and control interaction between then. Of Course, for the client to view interaction in design even before development would be an added advantage. Export formats vary from an interactive pdf to clickable html using map areas. 9 Slice Scaling is also a very convenient method to create reusable buttons, text areas etc.

Ok. My Prototype went well. What next? So what happens to these mockups then? Should I ‘refer’ to screens while designing again in Photoshop? No way. I would like to reuse them. Reuse every single layer in then. Be it a line object or text or even element in the Fireworks Common Library. I want to take it to where I’m comfortable, designing; Photoshop. Here I could play around with tools, style and filters that would produce that end product which could look flamboyant and aesthetically pleasing.

Many people still are ignorant that Photoshop is primarily an Image Editing software. I’m happy to see new year resolutions like these which can change this mindset and adopting new programs for designing. New programs can release unseen styles and creative elements that can never pop out if we continue to use beloved Photoshop. So I would be using more alternatives this year.

On the other side, I found Fireworks immensely unresponsive for files which had more than 22 states and had many link properties. The lack of OpenGL hardware acceleration like Photoshop nulls out my graphics card. The 1GB Geforce card watches in pain as my workspace crumbles under pressure.

Now to find a companion for Fireworks. Why? Well. Fireworks gives you just basic interaction capabilities. It expects a developer to ‘realize’ all these interactions in the final stage. But sections like sliders and widgets can be actualized without a development process. Due to common FXG format, Flash Catalyst easily fetches the design elements into its domain and ‘deploy’ actual webpages for a designer. It simply bridges the gap between the design and development processes. But Flash Catalyst relies on other software like Photoshop, Illustrator or Fireworks to supply it with high quality bitmaps and vectors. They should have perfectly complemented each other but for round-tripping. Alas!

Adobe seems have such an impressive array of products. Is it good for us? Sure. But by dissecting a large feature set into multiple products and calling it a family of products has induced a certain fervor into its revenue model too and stretching the consumer purse. We need stronger alternatives, that can push this level one up. Till then let me just enjoy these current favourites(and Photoshop, Of Course!), this new year.

What are your thoughts on these products? Have you found some software good for the prototyping stage? I would love to hear about them.