Massimo is a web and graphic designer and front-end developer based in Roma, Italy.

Massimo's articles

  1. Prototyping Tools: Moving from Fireworks to Illustrator

    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.

  2. Dynamic Geo Maps with SVG and jQuery

    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:

    Illustrator Map of Italy

    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:

    Illustrator SVG options panel

    Opening the file just created, you will see it contains a set of g tags whose IDs match the names of Illustrator levels.

    Building our HTML File

    Each item contained in g tags has a st0 class so that the stroke and fill CSS properties can be assigned to them:

    The file displayed with Brackets

    If you try to change those values, the map will change immediately: