Adobe Fireworks: Create High-Fidelity Wireframes for Agile Environment

Today, most of the startups are following agile or lean design process so that they can quickly experiment different ideas, develop and test with real users. Time is money, this is one of the reasons why we are following agile process.Today, I am not going to talk about the elements of visual design or even agile process in brief. I will show you how adobe fireworks can optimize the entire design process?by using this tool to create high fidelity wireframes.

Wireframes are one of the major deliverables by interaction designers under the umbrella of user experience while visual designers, part of the same umbrella, adapt the visual design process by following the approved wireframes or blueprints.

Here are some of the tools such as Axure, OmniGraffle, Visio, Balsamiq & the popular UXPin which are mostly used for making wireframes.

I used OmniGraffle, Balsamiq, Pencil Project in the past. These are good for creating low fidelity wireframes, Task Flows or IA (Information Architecture) structure for both web & mobile projects.

The problem with this workflow

The problem arises when you use these softwares to create high fidelity wireframes having the ratio of 1:1 and deliver them as blueprints for visual designers.

The real tracing work starts from wireframes to visual designs which is one of the bad signs of agile process.

These are the common file formats when you export your wireframes: XML, PNG (non-editable), PDF, PPT, HTML, EPS, PICT, JPG, PSD (Non-editable). Please share more formats in the comment section if I missed out any major formats.

Now these files are not editable (only importable) by applications such as Photoshop & Fireworks which are used by most of the designers around the world. I am not talking about rest of the softwares who can import or convert such files. It is all about productivity and flexibility.

Nobody talks about the intermediate process from interaction to visual design. For instance, you follow the same process by going back to the original wireframes (visio, Balsamiq or Axure) to edit and export updated files to visual designers, which is a lengthy & tedious process.

There are reasons why we choose Adobe illustrator over Photoshop for making illustration. Also why don’t we use Adobe InDesign to create high fidelity visual mockups for website or mobile app ? Think about it…

It has been seen that both the visual and interaction designers use different softwares. Why is it so difficult to ask “which file formats do you need?”?to your team members before you can start with anything? For example, creating wireframes, site-maps, landing pages, billboard creatives or even a digital artworks for a campaign.

The most technical problem

As a workaround solution, designers convert these wireframes (pdfs/eps) into a series of jpg sequence, put them in background layer as watermark and reconstruct the actual design elements/layouts. This is a major intermediate problem that occurs repeatedly and simultaneously.

You can ask Why don’t they import editable EPS file directly?
Well, there are couple of technical factors involved behind the usage of incompatible file formats.

The vector rendering engine varies from one software to another. For example, you can’t open or import any EPS file into the Adobe illustrator from Corel Draw due to the EPS file version. If you are a graphic designer, you know what am talking about.

If you want visual designers to adapt and follow your wireframes as blueprints then you should always create high fidelity wireframes in Adobe Fireworks. Alternatively, you can try Adobe Muse (though it is not used by most of the users) for the same purpose.

Forget about designing for people than your own team in an agile work environment by delivering something that is useful and usable. Because understanding your team members is first before observing and creating experiences for your end users.

The good news is that we have got Fireworks

Here I am putting down some of the best features of why fireworks is great for making such high fidelity wireframes

• User Common Library Panel?to keep common elements just like any other softwares (visio, Balsamiq or Axure).
• Create all the wireframes (pages) in a single fireworks file that you can share with designers via open file.
• Export as pdf having multiple pages and share with your stack-holders/clients for approval.
• Create rapid interactive prototype by using hotspot for a quick test turnaround.
• Export approved wireframes as HTML & CSS that you can upload or test users locally.
• Apply Convert to Symbol?to most of your major Call to Actions?or other placeholder images. Everything would be updated during the visual design phase.
• Use Pattern Library With Evernote and Fireworks to sync and use consistent elements.
• You can export wireframes components as slices and send over to engineering team for development work without even waiting for the final approval.
• Apply colors as they appear on web or mobile apps as Fireworks does not assign or embed any color profile like Photoshop does by default.
• You can export fireworks wireframes to .PSD files (layered based) having vector data which is good for Photoshop users.
• You can also open a working .psd from your visual design team and make the necessary changes in Fireworks if is required.

A true designer love to receive feedback, criticism or even he can create a series of iterations. What he doesn’t like is to go back and recreate the entire design pages periodically.

It reminds me of “How I recreated everything” after a system crashed?in the past.

External resources for Fireworks

• Fireworks Wireframing Kit
• Wireframing & Prototyping with Adobe Fireworks
• The 960 Grid System
• Interactive Prototypes And Time-Savers With Adobe Fireworks
• Graphical resource of Adobe Fireworks

I hope this article helps you using the best and optimized method for creating high fidelity wireframes. This would definitely help your team especially when you work in an agile environment with other creative people. Remember, your goal is to optimize the entire design process by defining a proper workflow.

Do let me know the process you follow. I would love to hear your comments…