Massimo is a web and graphic designer and front-end developer based in Roma, Italy.
I’ve always used Fireworks for prototyping. I found it simpler and more efficient for this job, while also more oriented to web graphics than its ‘competitor’ Photoshop. Fireworks has also a strong network of developers who created many plug-ins that can significantly increase its functionality.
But one of the major elements that drew me to prefer Fireworks is its ability to create multi page documents: it makes sharing resources and styles among every page of the prototype very easy and allows you to produce a unique PDF document that’s ready to be sent to the client for approval.
When Adobe decided to discontinue Fireworks development, I began to consider Illustrator for prototyping. Illustrator does allow for multi page document creation and incorporates a number of features that make it particularly suitable for this job.
Let’s compare Fireworks, Illustrator and Photoshop features for prototyping:
Feature Illustrator CC 2014 Photoshop CC 2014 Fireworks CS6 Multi page document Yes No Yes Creation of grid system guides Built-in With plug-in With plug-in Creation of interactive prototypes No No Yes Exporting as multipage pdf Yes – Yes
The Creation of grid system guides feature concerns the ability to build a set of guides to represent a grid system layout: both Photoshop and Fireworks need a plug-in to do this, while in Illustrator we can use the built-in “Split into grid” command.
Creation of interactive prototypes regards a very useful feature that is missing both in Illustrator and in Photoshop. In Fireworks you can create links through prototype pages to simulate navigation: this makes very easy the building of multi-page interactive prototypes. Perhaps you can find some workaround in Illustrator (you can also edit PDF in Acrobat adding navigation links), but arguably not with the same easy workflow offered by Fireworks.
Despite this, both Illustrator and Photoshop have great design capabilities, so the transition from Fireworks will surely not be so painful.
Let’s start with Illustrator
The first step is to create a new document.
When I need to create charts, my first choice is Google Charts or another dedicated library. Sometimes, though, I need some specific features that I can’t find there. In these cases, SVG images prove to be very valuable.
Recently, I had to build a report page that was able to show a map of Italy in which each region had a different color tone according to some values retrieved from a database. Thanks to SVG, this task was very easy.
Creating the SVG Map in Illustrator
First, I drew a map of Italy with Illustrator:
Every region is drawn as a single object, and each of them has its own level, with a name matching the code used in the database to identify its relative data (for example: “tos” for Tuscany).
Finally the map must be saved as an SVG file. You have to pay attention to set the “CSS property” option to “Style Elements” in Illustrator, as shown below:
Opening the file just created, you will see it contains a set of
gtags whose IDs match the names of Illustrator levels.
Building our HTML File
Each item contained in
gtags has a
st0class so that the
fillCSS properties can be assigned to them:
If you try to change those values, the map will change immediately: