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.

Illustrator comes with some predefined profiles that help you to quickly set up a new document. You can also choose between some preset device profiles (tablets and smartphones).

In this example, we’ve started with a generic web profile and then set the size to 1280x800px:

You can start with a smartphone artboard in a typical mobile-first workflow and then add bigger artboards, or in any way you prefer: you’ll be able to change every setting and rearrange artboards at any time.

You can also load a profile from a template or from an existing .ai document (but that’s another story…).

Now, we want to set up guides for Bootstrap 3 large desktops grid which applies for ≥1200px widths.

We have to consider:

• 1170px total width (which includes a margin of 15px both on left and right side of the grid)
• 12 columns
• about 67px width each column
• 30px gutter between columns

as in the scheme below.

With these measurements in mind, we can set our prototype grid up.

First, we have to draw two rectangles: one of 1170px width (which represents the outer width that includes 15px left/right margin) and one of 1140px width. I’ve set all of them to 800px height (but you can arrange them as you need) and then I’ve centered them to the artboard:

This is the result:

The artboard represent the viewport and the two rectangles making up the grid area. You can keep the grey rectangle as is and use it as background, or you can replace it with some guides, as you like.

Setting-up the grid

Now, we have to split the pink rectangle into a grid. We can do this by selecting it and choosing Object → Path → Split into grid…:

Using the Split into grid panel, it’s possible to split an object into a series of rows and columns. Checking the Preview option, you can see the result of your settings before applying them.

In this example, I’ve simply set the number of columns and the gutter width, Illustrator made the rest.

You can also set an horizontal grid using the Rows section of the panel; anyway, this can bring to a very confused layout, so I use this option only when I really need it.

Finally, you can select the Add guides option to generate a series of grid lines (although not considered proper guides).

After the command has been applied, you can arrange the grid the way you like most: I prefer to delete the rectangles and to turn all the lines into guides.

You can see a green mark at the artboard center and four green lines at the middle point of every side: I find this option very useful and it can be applied opening the Artboard panel (double clicking the Artboard tool) and checking the Show center mark and Show Cross Hairs options:

The artboard can now be easily duplicated option/alt-dragging it with the Artboard tool: every dragged artboard will contain all the objects of the first one (to duplicate guides you have to unlock them before dragging).

You can also create new artboards of other sizes to have all breakpoints sizes end devices represented in your prototype.

Each artboard can be individually named using the Artboard panel:

Finally, you can save your series of artboards as an Illustrator template file (File → Save as template…) to quickly create new wireframes or prototypes.

Using Symbols

Lets assume you have a prototype with many artboards and that these artboards have some shared components (header, footer, menu, etc.).

What happens when you have to modify one of them? Normally you would need to repeat the same change for each artboard. Or you can use Symbols.

Fireworks has a great system for managing portions of prototypes: you can share layers between pages (as I like to do), set a Master page or define re-usable symbols in the document Library.

Illustrator manages symbols in a different way, using artboards (that correspond to Fireworks pages) and layers. Fireworks has a different set of layers for each page, while in Illustrator layers are shared between all artboards.

Happily, symbols behave in the same way in both Illustrator and Fireworks.

Symbols are simply objects that can be reused. When you add a Symbol to your illustration, you are really adding a instance of it, and if you alter a symbol, all its instances are changed as well.

Illustrator come with a predefined set of Symbols and many libraries (you can find them at Window → Symbol Libraries). You can manage Symbols and apply them through the Symbols panel:

It’s very easy to create new symbols and place then in your artwork: select the objects you want to turn into a symbol and click the New Symbol icon on the Symbol panel (you can also drag objects directly into your panel).

Now you can drag the new symbol in every artboard, and if you need to make some changes you just have to double click an instance and make the changes: all the instances of the symbols will be modified.

Symbols are also very useful for UI elements.

For example, you can create a library of Bootstrap form elements to be used in your prototypes. It is very handful in these cases, to activate the 9-slice scaling option so you’re able to downsize them without any distortion.

From prototype to code

When it comes the time to begin coding, you need to “translate” your design into HTML and CSS. Illustrator can help you again with the CSS Properties panel (both Fireworks and Photoshop have it too).

You just need to select an object and the CSS panel gives you the corresponding CSS code.

You can also set many options about the properties to be exported:

Then you can copy or save the generated CSS snippets and paste them into your CSS file.

Of curse sometimes that may not be enough: you may need to deliver your prototype to a coder that doesn’t own Illustrator, or you may need to have a complete and quick reference of your design specs.

In these cases Specctr may be what you need.

Specctr is an Illustrator plugin (again, there are also versions available for Photoshop and Fireworks) that automates specs generation. Simply apply Specctr to an object in your prototype, and documentation will be printed into your artboard (Specctr also helps you to expand it to make room for specs).

Specctr is a commercial plug-in, but you can download a free lite version with limited features to see if it’s the right tool for you.

Using Specctr, you can add documentation on many properties: width and height, colors, fonts etc. You can generate four different spec types (Shape/Text, Width/Height, Spacing and Coordinates) and you can set which properties must be printed (fill, stroke, font family and so on).

Specctr can also provide relative measurements (% or em) instead of px, by setting up the Responsive options panel.

This allows you to produce a PDF or print-out of your prototype containing all the information you need to code, or you can export a CSS file in a similar way the native CSS Properties panel does.

In short, Specctr is a really handy tool for prototype building.

From Fireworks to Illustrator

Though Illustrator may be a worthy Fireworks replacement for this important task, it lacks some features that I used a lot (for instance, ‘layers to images exporting’), but there are also many other added gems that make it a really great prototyping tool.