Design & UX
Article

Prototyping Tools: Moving from Fireworks to Illustrator

By Massimo Cassandro

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:

New document panel

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.

Grid scheme

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 with the two rectangles

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…:

The Split into grid panel

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.

The final grid

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:

Artboard options panel

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:

All the artboards

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:

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).

Creating new symbol

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.

Edit symbol mode

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.

9-slice setting and object scaling

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.

CSS Properties panel

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

CSS Export Options panel

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.

Specctr

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.

Specctr panels

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.

  • Christian Snodgrass

    I’m not sure I understand the purpose of migrating from Fireworks to Illustrator. Fireworks is largely designed to facilitate web design. It feels awkward to move to Illustrator as your first choice from Fireworks. I can however see bouncing between the two for various features, but only using Illustrator for those specific things.

    • Alex Walker

      @christian – I’m a huge Fireworks fan, but when the developer gives up on software, I think you have to keep an eye to the future. I don’t know about you, but I’m getting random errors with Firework most days. I still use it, but it’s feeling more brittle all the time.

      Not convinced I’ll end up on Illustrator — but also not sure Fireworks is immortal.

  • Frank

    Maybe Sketch 3 (Bohemian Sketch) is a more convenient choice. http://bohemiancoding.com/sketch/ It has great features for designing websites, making graphics or prototyping. And it can export multiple sizes (high-res/retina).

    • Alex Walker

      I’ve played with the demo and quite like it — think there’s a fair chance it might be the choice for me eventually. In fact, if they ran the discount they had last year, I’d almost certainly jump on.

    • https://www.behance.net/massimocassandro Massimo Cassandro

      Sketch was my alternative candidate. I’ve played with a demo for a while and I think it would be a good choice (it is also cheaper than illustrator). But I’m using Illustrator for many others things and I own a license, so, for the moment, Illustrator is my best choice. Anyway, I don’t exclude to switch to Sketch in the future

  • hutch

    i am looking for alternatives as well. just curious. has anyone tried indesign?

  • Tim

    So far as I’m concerned, there will be no migration from Fireworks for the foreseeable future. Why should I migrate to Photoshop or Illustrator when neither are really suited to the task? My Fireworks CS6 will work just fine down the road.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Design, once a week, for free.