Interactive Prototypes And Time-Savers With Adobe Fireworks

Advertisement

As interface designers, we’re often required to demonstrate the look and feel (and interactions) of the interfaces we design. We often begin with a series of flat images, and while these may be pixel perfect and show some amazing detail, they lack the context of the user experience.

Without context, it would be difficult for your clients to understand the flow of an app or website in the way you originally planned it. The best way to introduce context is by adding interactivity. By providing an interactive prototype (or interactive mockup), your clients can play around with it to their hearts’ content to get an idea of how the app will work and to test the interactions.

The tool for creating interactive prototypes that wins hands down is Adobe Fireworks. Fireworks focuses on designing, prototyping and exporting for the Web, and it has a few hidden features that can easily add interaction to your prototypes and that will speed up your workflow.

But first, a little introduction. My name’s Trevor Kay and I’m a designer for Exvo1. At Exvo, we create a range of Web apps, from small widgets to full desktop-like Web apps. Using Adobe Fireworks has increased our efficiency in designing and maintaining our app prototypes. “How?”, you may ask. The answer is simple: pages and symbols: the best kept secrets in interface design!

2

Prototyping In Code Vs. Prototyping In Fireworks

There are many prototyping techniques, and the one you use will depend on your level of technical skill in coding, the speed at which you need to produce the prototype, and the level of visual fidelity needed. Lately, prototyping in the browser3 has become a popular trend. So, do we still need visual tools such as Photoshop and Fireworks, or can we start right in the browser?

The answer is, it depends! Sometimes prototyping in code4 is best, and sometimes designing (and prototyping) in the browser is certainly not the answer5.

When the prototype needs only simple interactivity, must be created quickly or requires detail and polish in its appearance, then Adobe Fireworks is the perfect tool because you don’t need to know any code to make a live prototype in very little time.

Why not Photoshop? While both Fireworks and Photoshop are excellent design tools (and often compared in UI design), Fireworks can take you one step further and produce a live prototype right from your design. In this article, we’ll cover this subject in more detail.

Fireworks is also very good when you need to create graphics for more complex prototypes that are created in development environments or even in the browser, because it can quickly slice, optimize and export graphic assets and can even help provide the CSS code for layout and text styles.

On the other hand, if you are proficient with code and need to make a prototype with complex interactivity, then prototyping in the browser might be the better option.

Now, let me show you why Fireworks works so well for me in both the prototyping and design phases of my projects!

PNG, Pages, Master Pages

Pages (and PNG)

Fireworks’ best friend is the PNG file format. Together, they achieve some pretty cool things, such as storing a multi-page document in one Fireworks PNG file (known as a Fw PNG). But I hear you say, “PNG is a flat file format!” While this is generally true, a PNG6 can also be extended to include various types of meta data. By using this ability to add meta data, Adobe Fireworks can store multiple pages in one PNG file, while maintaining complete editability within Fireworks itself (of vectors, bitmap objects, pages, layers, live filters and so on).

The benefit of this is two-fold. First, editable PNG files are usually very small, much smaller than comparable Photoshop PSD files. The actual difference in size can be stunning, as some designers report: one Fireworks PNG editable file with approximately 30 pages (equivalent to 30 separate PSD files or one PSD file containing 30 layer comps) can be as low as 9 MB7 in size, while in some cases a three-page PSD file (with layer comps, which can partially simulate pages) can be as big as 100 MB8 or more! A small size also means that Fireworks’ editable PNG files are easy to share and quick and simple to sync, even over a slow Internet connection.

Secondly, by storing all of the screens of your app’s prototype as pages in one file, nothing gets lost, and sending the file itself to coworkers and clients is easy.

One PNG File vs Many PSD files
One Fw PNG file may contain many pages.

Pages give you almost unlimited freedom. You can have many pages in one PNG file, and each page can have its own unique settings. You can also give each page its own name (just like you can rename layers and states). Naming your pages clearly will help you when you make the prototype interactive.

Pages actually enhance the layer model that you might already be familiar with from working with Photoshop, because each page in Fireworks is like a separate file: each page may have its own size, optimization settings, and unique content as well as shared content from other pages. Fireworks also uses layers and states.

Think of each page as a flat canvas for you to place objects on. You can move these objects around and reorder them easily, because you can interact with them directly on the canvas (just as you would with objects in Illustrator), and not through the Layers panel, which can speed up your workflow considerably!

Master Page

Fireworks also has a master page feature, which is a template for all of the other pages in your prototype. Let’s say that the same toolbar appears on all pages of your app: simply place the toolbar on the master page, and it will appear on every page. This eliminates the need to constantly duplicate elements and can save you many hours. Creating a master page is easy: just right-click on any page in the Pages panel and select “Set as Master Page.”

If you need to update an element that appears on all pages, edit it on the master page and it will be automatically updated on all other pages!

Note that objects placed on the master page will appear at the same coordinates on all other pages connected to the master page. You cannot move or change the position of master-page objects on a per-page basis.

You can also share layers to pages, which is an alternative to using a master page. However, the master page always shares all of its layers to all pages, whereas sharing a layer from a page allows you to select which pages the contents of the shared layer should appear on.

Select Behind Tool, Subselection Tool, Symbols

Fireworks also provides two powerful tools to help you avoid touching the Layers panel (and work more efficiently): the Select Behind tool and the Subselection tool.

(A layer in Fireworks is a container for objects (much like a group in Photoshop), whereas a layer in Photoshop is an individual object.)

Select Behind Tool

The Select Behind tool (located in the Tools panel or by pressing V twice) enables you to select a top-most object, and, with repeated clicking, select each of the elements directly beneath it in turn. This is yet another feature that helps you work more efficiently by not requiring you to awkwardly navigate the Layers panel, searching for an object either by name or tiny thumbnail.

Select Behind tool
In this example, five individual objects are placed on the canvas. With the Select Behind tool, selecting any object beneath another object is easy.

Subselection Tool

The Subselection tool (located in the Tools panel or by pressing A) enables you to select individual objects that are part of a group. This speeds things up because you won’t have to continually ungroup and regroup objects.


In this example, five objects are grouped together. With the Subselection tool, selecting any object inside the group is easy.

Once you get into the habit of working with pages and objects, you will feel a weight lift from your shoulders. The Select, Select Behind and Subselection tools make it a breeze to interact with the elements in your design!

See the article “Using Pages, States, and Layers in Fireworks CS49” by David Hogue for an excellent explanation of how all three elements interact with each other in Adobe Fireworks.

Symbols

Symbols are another powerful feature in Fireworks, and they complement pages and master pages quite nicely. A symbol is a special graphic group that gives you “edit once, update everywhere” functionality, which saves a lot of time, too. Any object, layer or group of objects can be turned into a symbol simply by pressing F8 or by going to Modify → Symbol → Convert to Symbol in the menu. (We’ll talk about symbols in detail later.)

Want to learn a bit more about symbols in Fireworks? Watch the useful video tutorial “The Power of Symbols in Adobe Fireworks10” by Rogie King11.

How To Create Interactive Prototypes

All of the Fireworks workflow improvements mentioned so far are important on their own, but the real magic happens when you start making interactive prototypes. Fireworks was originally created by Macromedia as a tool targeted specifically at Web designers, and Adobe continues to develop Fireworks in this direction. It covers a lot of the things we need: pages, master pages, symbols, styles, bitmap- and vector-editing tools, and one of the best image exporting and compression features. But Fireworks has another feature that the Web has pretty much forgotten about: image maps12.

Image Maps and Hotspots

Fireworks uses hotspots to generate image map areas. An image map encompasses multiple areas, which are referred to as “hotspots.” Adding a hotspot is as simple as selecting an object on the canvas, right-clicking on it and selecting “Insert Hotspot.” Alternatively, you can use the shortcut Control/Command + Shift + U, or in the menu go to Edit → Insert → Hotspot. You can also manually add hotspots with the Hotspot tool (found in the Tools panel).

Hotspots may be rectangular, circular or polygonal, but the best practice is to use rectangular hotspots because you can’t replicate circular or polygonal hotspots with normal links, which the final product will have. Also, if you decide to export the prototype to a PDF, only the rectangular hotspots will export.

Two Hotspots in Fireworks
Two hotspots (notice the blue-colored overlay).

Once added, a hotspot will appear as a blue-colored overlay above everything else. If you wish, you can change the color of a hotspot in the Properties panel. Hotspots exist in the Web Layer, which always resides at the top of all layers in the Layers panel.

Web Layer in the Layers panel
Inside the Web Layer.

Note that when you export a prototype to HTML, the names that you gave to the pages in the Fireworks PNG document will become the names of the exported HTML files.

Manipulating Hotspots

When a hotspot is selected, the Properties panel will change and give you the option to add a link to the currently selected hotspot, as well as to specify how that link should open (in the same window or a new one, for example). The link could point to an external website (such as http://www.smashingmagazine.com) or to an internal Fireworks page. By linking to an internal page, you have taken the first step in making your prototype interactive.

Properties Panel
The Properties panel when a hotspot is selected.

The selector for link: is divided into two sections, separated by a horizontal divider. Below the divider are the pages in the current Fireworks file; above the divider are all links currently in use in the open Fireworks document, and they may be either internal or external links.

13
A list of URLs in the Properties panel.

Now, all you have to do is go through the rest of the prototype and add the links. Remember, anything may be a linked hotspot. Need that button to open a new page? Done. Need that image in the slideshow to look like it progresses to the next image? Done. Achieving these effects really is that simple, and it will change the way you present your design prototypes. Also, you don’t have to worry if the names of your pages change; Fireworks will handle that for you as well and will automatically change all relevant hotspot links so that nothing becomes unlinked.

Export the Prototype

Once you have created all of your hotspots, how do you go about sending your clients the interactive prototype? Of course, you wouldn’t send them the editable Fw PNG file. While the PNG file contains all of your pages and links, it isn’t interactive. Clicking on a hotspot in Fireworks would not take you to the linked page; it would just select the hotspot. To make the prototype interactive, you need to export it to HTML files. These HTML files are what your clients can view and click through. They can be opened in any browser (Firefox, Safari, Chrome, Internet Explorer, Opera), so you don’t need to worry about compatibility.

The Export Dialog in Fireworks
The Export dialog in Fireworks.

When exporting an interactive prototype, use the default option of “Put images in Subfolder” to keep everything neat and organized. This has the added benefit of allowing you to easily send only the images to the client, if required. The exported images may be in any common image file format: PNG8, PNG24, PNG32, JPG, JPG Progressive, GIF. Note that the default format of the exported images is determined by their page’s optimization settings and then overridden by any slice’s individual optimization settings, which gives you a fair amount of control and flexibility.

Fireworks Pages: What Is Their Limit?

Pages allow for the efficient creation of prototypes, but what happens if they become too efficient?

Handling a Fireworks PNG Document With Many Pages

I don’t know what the record is for a Fireworks document with the most pages in it, but I currently have one with over 150 pages, and it is still growing! While this is a complex file with a large number of objects, it shows how awesome Fireworks’ PNG file format is: the file’s actual size is only 16.6 MB!

Moar pages??
150 pages in one Fireworks PNG document? Possible!

Why would anyone need a prototype that big? The simple answer is that I’m designing a complex app (Exvo’s Web app), and many intricate parts need to be covered by the prototype, so I’ve let it keep growing and growing.

While Fireworks can handle that many pages, it is certainly not recommended, for performance reasons. Try to keep your documents to fewer than 50 pages inside. Once you get past 50 pages, you might notice that Fireworks starts to use more RAM and opens and saves the document more slowly than usual. Performance also depends on each page’s canvas size, the number of objects and more, so keep the pages to a reasonable number to maintain an efficient file.

Pages Under Control: Splitting a Complex PNG File

Should our Fireworks PNG file become too large and unwieldy, how do we reduce the number of pages and optimize it? Because we are now relying on Fireworks’ ability to link pages and hotspots to create an interactive prototype, the hotspot links need to remain intact, even if we split the complex Fireworks PNG into several files. So, how do we proceed? Is it possible?

First, go through the prototype and make sure it is structured as defined sections. If the prototype is properly structured, we can split it up into smaller, more manageable pieces. To do this, we will need to count how many sections are in the prototype. If there are 10 main sections, for example, we would duplicate the file 10 times.

After that, we rename the duplicated files to match the sections of the prototype. Then, we open each of the duplicated prototype files and simply delete the pages that are irrelevant to that section; this will take some time and you have to be careful, but it is worth the effort. And… that’s it! You have now successfully split up your massive project file into more manageable pieces.

We also have to ensure that the smaller prototype files keep things together so that the exported HTML continues to link up correctly. To do this, we have to make sure that all of our top-level page names stay the same. While the relevant links will be changed within the single prototype file to make sure there is no unlinking, the other files will not update and will thus become unlinked. If you do opt to change the name of a top-level page, you would have to go through all of the other Fw PNGs and alter the hotspot links by hand.

If you do opt to split up a Fireworks PNG into multiple PNGs, then the master page and symbols will become unlinked. If you make a change to one PNG file, you will need to make the same change in all corresponding PNG files.

One prototype now Split into Several Smaller Ones
The prototype (Fw PNG) is now split into several smaller files.

The massive prototype file we had is now split up into smaller pieces, so you will surely want to export it to be interactive. This is still possible and made easier if you still have the original large prototype file. Export the large prototype to a folder so that all pages are in the one folder. Keep this folder around because when you make changes to your smaller prototype files in the future, all you will have to do is export to this folder and overwrite the old files. Because all of our top-level links are still the same, everything will link up correctly as long as all of the exports are saved to the same folder.

Symbols

While pages facilitate file management and enable us to easily make interactive prototypes, Fireworks gives us other workflow improvements, too, such as symbols. Symbols originate in Flash and are an easy way to build a library of reusable elements. If UI design has one defining characteristic, it is reusable elements. Here are a few things that make symbols in Fireworks so powerful:

  • Once a symbol is created, you can save it to the Fireworks Common Library;
  • Fireworks symbols allow for intelligent scaling with the use of 9-slice scaling guides;
  • Symbols can be scaled as much as you like without losing quality.

Let’s take a close look at these features.

Reusability of Symbols

One of the best features of symbols in Fireworks is their reusability.

Symbols can be document-specific or available globally through the Common Library panel. Saving symbols to the Common Library means that no matter what document is open, all of your symbols will be available to use. The benefit is that you don’t have to recreate common UI elements across each prototype. If all of your apps have the same theme, then once your symbols have been created and saved to the Common Library, you will save yourself a lot of time by not having to redraw everything from scratch. This is an amazing time-saver because now all of your UI elements can be simply dragged and dropped into the current project!

The Document Library contains all of the symbols that have been used in the current document; these could include symbols selected from the Common Library, as well as symbols created specifically for that document. A benefit of the Document Library is that anyone who opens the Fireworks file will have access to all of the symbols being used in that document, including any symbols that were not created on their computer.

Symbol libraries
The Fireworks libraries of symbols: Common Library (left) and Document Library (right).

9-Slice Scaling Guides

Symbols may also include 9-slice scaling guides. These guides make it possible for you to define how a symbol will scale intelligently in all directions, and they reduce the number of times you need to manually edit vector points in order to change the object’s size. You can learn more about 9-slice scaling in a video tutorial by Jim Babbage14 and in a detailed article by Sarthak Singhal15.

The 9-slice scaling guides are optional and are not included by default. You can decide whether to use them based on the type of object that you’re converting to a symbol. To make things even easier, Fireworks also gives you the option to activate or deactivate the guides for any existing symbol.

When you edit a symbol for which the 9-slice scaling guides are enabled, Fireworks presents you with the graphic for the symbol as well as four guides overlaid on top. These guides effectively divide the symbol into nine slices, with each determining how a particular part of the symbol will transform when scaled:

  1. Corner slices
    All corners will not resize and will stay the same size no matter what. This is very effective for buttons made out of rounded rectangles.
  2. Left and right slices
    These two slices will transform vertically but not horizontally.
  3. Top and bottom slices
    These two slices will transform horizontally but not vertically.
  4. Center slice
    This slice will transform both horizontally and vertically.

A Symbol in Symbol-editing mode
A Symbol in symbol-editing mode.

The ability to reuse and resize symbols without losing quality is what makes them so powerful. You will have a common set of elements ready to be dragged and dropped into your prototypes. The amount of time this alone will save you is amazing.

Just as Fireworks uses PNG as its primary file format, symbols are also stored as PNG files. All Common Library symbols can be found in the following location:

  • Mac OS X
    ~/Library/Application Support/Adobe/Fireworks CS5/Common Library
  • Windows XP
    C:Documents and Settings*username*Application DataAdobeFireworks CS5Common Library
  • Windows Vista and 7
    C:Users*username*AppDataRoamingAdobeFireworks CS5Common Library

(If you are using a different version of Fireworks, just replace “CS5” with the version you’re using.)

If you ever need to migrate to a new machine or give a coworker access to your symbols, all you need to do is copy your symbols to the new location and Fireworks will recognize them instantly!

The Common Library
The Common Library in Fireworks.

Download A Sample Fireworks PNG File

Want to jump right into pages and symbols and easily make an interactive prototype with Fireworks16? To help you, we have created a three-page prototype of an iPhone music player for you to download. You can open the music-player-demo.fw.png file in Fireworks and export it to a small interactive prototype.

Three-page demo prototype for download18

The sample Fireworks PNG not only will show you how hotspot links and pages work, but will give you a chance to play around with symbols. To export the Fireworks PNG as “HTML and Images,” just go to File → Export. Set the “Export” type to “HTML and Images” and set “Pages” to “All,” and then select where on your computer to export it to. After the export, open one of the HTML files in a browser and try interacting with the prototype, navigating through the app by clicking the links.

When you’re testing the file, make sure the following panels are open in Fireworks: Pages, Layers, Document Library and Properties. Feel free to experiment with the prototype, add more hotspots and pages, and navigate around to see how the file is organized and how the pages inside are linked together. (Seeing which parts will be clickable once they’re exported is easy because the hotspots are marked in blue.) The file also makes use of symbols (stored in the PNG file itself — see the Document Library panel), shared layers and a master page.

Further Reading

(al) (jc)

↑ Back to topShare on Twitter

Trevor is passionate about Design and Technology and these two fields intersect in User Interface Design. He loves working on solving tough UI challenges and does that every day at Exvo. He also tweets about design and the tech industry.

  1. 1

    Great tool, it is a shame that Adobe is neglecting it like a bad stepmother.

    20
    • 2

      Couldn’t agree more.
      What’s wrong with Adobe?
      They never promote the terrific design capabilities of Fireworks.

      8
  2. 3

    150 pages could be a bit tricky for me. In CS5, I had 18 pages and about 25 symbols and there were some performance issues / file reading problems (can’t read two files like these). I tried it in CS6 also, it’s faster, it opens it, but it also feels it :) Anyway, if you’re trying to write a book with 150 pages, go on with InDesign :)

    8
  3. 4

    Love the Fireworks articles! Some useful keyboard shortcuts may be a good addition to this, I use a few that aren’t common to other adobe products constantly including: Paste as Mask: ctrl+alt+v , Paste element style: ctrl+alt+shft+v, Pixel Hinting: ctrl+k, Show/Hide Web Layer: 2

    9
  4. 5

    leo from chicago

    July 3, 2012 6:06 am

    I’ve been using the thing for years simply because it always seemed easier to handle vector based images better than Photoshop.

    To Nenad’s comment about Adobe “neglecting” Fireworks, I think Adobe’s famous for neglecting its own software. The only reason it has Fireworks as one of its wares is because it bought Macromedia. And the reason it had to buy Macromedia (my interpretation at least) is because they sat on their own HTML WYSIWYG editor — whose name escapes me at the moment — which meant they needed Macromedia’s Dreamweaver.

    Also, hint, hint from someone in library science: it’s safe to make ‘metadata’ one word nowadays.

    2
    • 6

      Golive.

      Their Flash app was Live Motion if I remember correctly…

      The use of Fireworks for this sort of prototyping seems a little full on, I’d be happier using Balsamiq or Axure to show clients flow and interaction rather than this method.

      Thats my tuppenceworth anyhow.

      2
    • 8

      Adobe really wanted one thing: FLASH.

      FW is a powerful editor and all that you need if your thing is just the web.

      1
    • 9

      Leo, I believe you’re speaking of Adobe GoLive. Ironically, Adobe bought that software too (a company called GoLive made a WYSIWYG editor called Cyber Studio). Almost immediately after Adobe bought it, it went stale.

      0
  5. 10

    Courtney Starr

    July 3, 2012 7:51 am

    I’m curious how products like http://www.invisionapp.com/ compare with using fireworks only. I’m getting ready to dive into one of these styles of interactive mockups, and I’m not sure which one to go with.

    Any thoughts anyone?

    0
    • 11

      cmiiw, tools like Invision can help you make interactive wireframes from static images. it’s great if you don’t use FW to make your initial wireframe. but if you’re already working using FW, why bother subscribing/buying another tool for that.

      1
  6. 12

    150 pages in 1 fireworks documents? Are you crazy???

    Fireworks is good for wireframing but its performance really sucks. If you have to work with more than 10 pages, I’ll recommend you to use inDesign.

    -6
    • 13

      Crazy like a fox! :P

      The 150 pages built up over time. To be honest, Fireworks held up to 170 before the performance hit was too much.

      3
  7. 14

    I’ve given Fireworks a couple of tries over the years, but couldn’t really “get into it”. Perhaps it’s because I’ve practically /lived/ in Photoshop for the past decade, designing logos, designing sites and drawing random stuff.

    Going into Fireworks felt like dragging my feet through thick mud, and I got stuck not soon after.

    If anyone else has had that experience, but has managed to survive and make the most of Fireworks, I’d be glad to hear about it. I refuse to blame Fireworks for seeming like a less-than-optimal solution for me, because it might just be my conservative side, and pretty much a habitual thing.

    So, do share, if you’ve made the jump successfully.

    1
    • 15

      I agree that coming from Photoshop only, Fireworks can potentially feel like swimming in molasses. However, try using pages and symbols for larger projects. It really rocks with the overall and after all performance/timing.

      Currently I’ve gotten over 5 years experience on each (PS & FW)… When a project needs several pages with lots of similar elements like icons, menu items or other repeated graphics, FW does the trick way better; and quickly enough, Developers and Front-End developers get down into FW easier than PS, specially when slicing.

      And finally, FW have an easier way to handle extra Commands. Some of the .json commands can be done by yourself , or, just dig into sites such as http://orangecommands.com/. Quite good fun can come out of it. I would alos recommend checking: http://goo.gl/tiz2h

      Cheers!

      3
    • 16

      I wouldn’t say I made the jump. I love Photoshop, and it’s a great tool for visual design. There are some things in screen based design that just flow better working with raster graphics, and for pixel manipulation, PS is top notch.

      When it comes to UX prototyping, however (which is the focus of this article), Fireworks really shines. When you’re prototyping and laying out wireframes, you don’t want to worry about pixel-level stuff or layer naming. You just want to draw quickly and have reusable assets. And that’s what FW is about.

      Bottom line: Not being a vector guy, I still go to PS when I need to design visually detailed interfaces. The bitmap tools in FW are useful to an extent, but just don’t cut it for me. However, when wireframing (which is what I’m doing most nowadays), FW is a superb tool. I know that Axure and Visio are out there, but FW feels like home for those who are used to the Adobe workflow.

      Last, but not least: FW is MUCH cheaper than PS and it indeed can achieve most of the same visual results by using vectors. So that’s something to consider.

      2
      • 17

        What about iRise? If you need to build a higher-fidelity prototype, iRise is a great option. It won’t give you feature-rech design capabilities built-in (much like Visio or Axure don’t), but it will let you build a fully functional (or as fully functionality as you want/need) prototype and it will provide data management capabilities to, so you can persist data throughout your prototype session or even throughout the prototype, across sessions as well.

        It’s very powerful. Expensive, but powerful.

        0
  8. 18

    J Cole Morrison

    July 3, 2012 4:06 pm

    Excellent, excellent, excellent. Thanks for the Fireworks Tutorial. Hopefully more informational articles like this will help spawn a bigger and better community around its usage!

    2
  9. 19

    Nice post! Another great alternative is prototyping in Keynote. I’d love to see Smashing Mag cover something like that in a simliar post. Here’s how I do it:

    Specify your presentation size in Keynote and drop in your designs. Then link together hotspots (with transparent shapes) that jump between slides throughout your presentation. Lastly, you can export it as a PDF to test. And if you’re making an iOS prototype use the iPhone app GOOD reader to view the PDF – it hides the app’s chrome and let’s you browse through your prototype like a real app! Pretty fresh. If only developing in iOS was that easy.

    0
  10. 20

    I have to agree Fireworks is great with a few page wireframes once the details go up and the page build up, the performance goes down dramatically, it is just not very safe for me to build a entire project in Fireworks. Photos on the other hand is not as handy as FW when comes in making vector base shape but it is not that bad.

    1
  11. 21

    FW is much easier to work with than PS for the web but..
    afraid that future is bleak for fireworks….lack of new features to be added on photoshop, will soon swallow fireworks features one by one..and one day FW will cease…

    0
  12. 22

    Yay, more Fireworks articles! Thank you for this. I’m going to show this post to anyone who questions me for using Fireworks.

    Btw, does anyone know the shortkey for placing selected layers in a folder? In Photoshop it’s select layers -> Shift click on folder icon. Doens’t work in Fireworks though.

    5
  13. 23

    Sarthak Singhal

    July 4, 2012 12:21 am

    Thanks, Trevor, for referencing my 9 slice scaling article.

    9 Slice scaling feature, combined with Symbols, can make powerful re-usable assets within Fireworks depot.

    2
    • 24

      9 slice is great, but I’ve been through a lot of trouble when using it in conjunction with text labels in buttons. Especially if the text label has more than one word, it gets buggy as hell.

      I’ll read your article, though!

      1
  14. 25

    150 pages??? is this possible pn;y with FW6? I had a 90 page website done in FW last year and the performance was OK. But I couldn’t prototype because if i tried to go into state 2, really strange and wacky things started happening.

    I love fireworks but i seem to have a problem when clients view the interactive prototype. I can always view the html file fine on my own machine but zipping up the prototype (html pages and image subfolder) i seem to lose somthing. Opening the file on another machine and launching the page only brings up a browser window with a bunch of broken images. The image subfile is there, so what am i doing wrong?

    0
  15. 26

    for me it’s looks like captivate program …. but what do you think about zebrazapps ????

    0
  16. 27

    Vigneshwar Raj

    July 4, 2012 1:04 am

    Its a great tool for wireframes, I accept.
    But whatever the positives it had, fireworks has a sluggish UI and the quality of the product is not good as photoshop !
    Only if they had some photoshop features and UI into fireworks, it would be a awesome product! Or else it is not.

    150 Pages in fireworks is quite hard to digest.

    -4
  17. 28

    No doubt adobe fireworks is an excellent wireframing and prototyping tool, but its UI and performance is affected even in few pages. I would love to see articles on prototyping but there are other tools as well
    1. keynote
    2. Axure RP
    3. Flairbuilder

    It would be lovely to see how these tools perform and their comparison in features. Thanks for the article

    1
  18. 29

    I really don’t think these FW vs Photoshop articles are actually productive in any way. They’re both different pieces of software from different backgrounds.

    I don’t think you should be using improvement in efficiency as a good basis to ground your argument, as one of the posts above quite correctly pointed out, if you really want to boost efficiency, interactive prototyping should be done at the wireframing stage, not the design stage for obvious reasons (the wireframing stage in itself it’s intended to streamline the whole design process by removing the time taken to produce polished designs). And although Fireworks can do wireframing, in my opinion other tools like Axure are better alternatives.

    -7
    • 30

      Michel Bozgounov

      July 4, 2012 6:09 am

      @Rich:

      A bit of clarification is needed, I think.

      This is not a “Fireworks vs. Photoshop” article. This is an article that explains a designer’s workflow with Fireworks, and how Fireworks is used for making interactive prototypes.

      They’re both different pieces of software from different backgrounds.

      —I absolutely agree! And that’s why Photoshop cannot make interactive prototypes, has quite poor vector support, and uses a complex (and not that easy to manage) Layers organization system. But, it is an amazing and efficient tool for photo retouch, and can make large, high quality prints.

      Fireworks, on the other hand, has wireframing, prototyping, and excellent web/screen design features (Pages, Symbols, top-notch vector editing tools, good bitmap editing options, Styles, etc.).

      Fireworks and Photoshop are different tools and the article is not trying to compare them, but rather show the effectiveness of Fireworks in certain cases.

      Finally, let me add that Fireworks can do not only the wireframing stage, but also the interactive prototyping stage and the design stage for any web or mobile project, which can save you time. That is, if you want to learn this tool. :)

      3
  19. 31

    Fw is a great tool… If continuous crashing and out of memory messages are your thing…

    Seriously, Fw is awesome for vector stuff that Photoshop doesn’t (dare I say: didn’t) have up until now (I think CS6 changes that a bit), but it’s one of the worst pieces of software I have ever had to use.

    I get it, it’s not a native Adobe product, but working in Fw is atrocious if you care even the slightest bit about intuitivity… There’s some functionality I like (and love to see in Ps), but it will never weigh against the negatives (of whihc stability is the main one).

    0
  20. 32

    Great article. Thank you for this.

    0
  21. 33

    I wonder where this whole “poor vector support” thing is coming from, regarding Photoshop.

    I use Photoshop rather exclusively, and 90 to 95 percent of my layers fall in the categories “text” and “vector”. The occasional bitmap has big chance of being a smart object, so all in all, it’s pretty darn scalable.

    The only thing Photoshop could do better perhaps (for as far as I see), is borders on shapes (they’re getting there with CS6) and getting layer styles to scale along with their shape layers.

    Feel free to ride the above into the ground with some fact-ridden criticism, I’m open to discussion on this :)

    0
    • 34

      Michel Bozgounov

      July 4, 2012 10:55 pm

      @Dirk:

      I agree that Ps CS6 is better, regarding vector support. But in CS5 and older versions, you can’t really compare Fireworks and Photoshop, in regard to vector editing. When it comes to vector manipulation, Fireworks is much closer to Illustrator, than to Photoshop.

      OK, a few bullet points:

      — Fireworks has an extremely powerful feature: (vector) autoshapes. These are vector groups that have special properties and can be easily tweaked. Say you need to create a star on the canvas. Select the Star autoshape and then you can with just a couple of clicks, change the number of points it has (anything in-between 3 and 50), the roundness of the points, the inner and outer radius, etc. While you edit it, the shape remains a true vector (so you can change its size with no loss of quality), and can be easily manipulated both like a special autoshape object, and as a vector object. Fireworks has many such autoshapes (Star, Rectangle, Rounded Rectangle, Smart Polygon, Wave, Spiral, etc.) and the time you’ll save by using them, is considerable.

      — Fireworks has a powerful Path panel that can help you manipulate vector objects more easily. We mentioned the Path panel briefly in a recent article by Benjamin De Cock, but here’s also a bit older piece, published in the Adobe Devnet website: Using the Path Panel in Fireworks CS4. Note that in Fw CS5 and CS6, the Path panel was further improved.

      — In Fireworks, you can easily select a few vector objects together and change many of their properties with a few clicks: colors and gradients, blending mode, fill, stroke (incl. stroke size and type), live filters applied to them, you can change their size, scale and deform them in various ways, combine them, or change them into a Compound vector shape group. You can alter the vector paths almost in the same way you can do in Illustrator, group or ungroup them, combine (Subtract/Punch, Add/Union, Intersect, etc.), move vector points individually or in groups, and all of these tasks can be performed while you have one or many vector objects selected on the canvas.

      — In short, Fireworks offers a great deal of vector support, but it’s a tool that is intended for web and screen use only (you don’t have to open another application, if you need to work extensively with vectors, everything is within your reach). Ah, and finally, a bit offtopic, but still worth mentioning: To create a pure vector rounded rectangle in Fireworks takes just 2 clicks. After you have created it, you can tweak it easily: change roundness of the corners — for all 4 corners, or individually for each one of them (and the roundness can be specified in px or % values); change its size (upscale or downscale it), change its width or height (without affecting the radius of the corners), change the fill and stroke, and so on. You can even select a few rectangles together and tweak some of their properties all at once (for example, the roundness of the corners, or the type or colors of a gradient fill applied, etc.)!

      So in my opinion, Fireworks has excellent vector support, and Photoshop performs much poorer in this area. I might be wrong of course, but this is how I see things, after trying both tools… :) And there’s probably more to say about vector support in Fireworks, but I wouldn’t like to go too much offtopic — after all, Trevor Kay wrote an extensive piece about interactive prototyping with Fireworks, and not about vectors! ;)

      (last minute edit) Here’s a video by Mikko Vartio, The making of Darth Android. It’s only 10 minutes long and it can show you some of the vector abilities of Fireworks, in quite a fun way! :-)

      4
      • 35

        Michel Bozgounov

        July 4, 2012 11:07 pm

        …In fact you just gave me an idea that we should cover the topic of vector editing in Fireworks (vector paths manipulation, vector autoshapes, etc.) in a separate article! :)

        2
      • 38

        Thanks for the lengthy response. I’ll have to download Fireworks and play around with the vector tools a bit. I’m assuming you can just drag and drop layers (or copy paste them) into Photoshop? That, to me, sounds like a best of both worlds solution, as well as a way for me to gently get over my fear of Fireworks.

        I wonder how long it’s going to take for them to stick all of Fireworks & Photoshop’s features together in one program.

        That’d be nice.

        1
  22. 39

    Hello Trevor,
    thank you for this article!

    I am a Photoshop user but always wanted to look into Fireworks. Last week I started and I am really happy with the software. It has some nice features and it will improve my workflow and make it more flexible.

    It is always nice to get some background information and tips from an experienced user.

    2
    • 40

      Glad you looked in to it :)

      It’s not for everyone, but it’s there and people should check it out. There might just be that one killer feature you didn’t know you needed.

      2
  23. 41

    Mike Richardson

    July 5, 2012 6:57 am

    Trevor,

    While I appreciated your article, and agree with many of the comments, I have discovered what, to me, seem the best answer to wire-framing with interactivity utilizing html5 and CSS3 as-well-as the full power of J Query and JavaScript.

    I have been working in the beta version of Adobe Muse for about six months, and it has just been released in its first full version. Muse was created by the folks that developed In-Design and includes many familiar design tools as well as the ability to create a visually pleasing page with full interactivity, including widgets and JavaScript elements. Muse pages are quickly publishable to Business Catalyst to share with clients for approval or further markup, and can be exported to html for publishing to the domain and provider of your choice.

    White the html is still a little clunky and the application’s tools lack some sophistication and the refinements of In-Design or Dreamweaver, you can easily edit or clean-pup your final product either by hand or in the html editor you prefer.

    This may not be the best tool for those who prefer to code a site from scratch, but for everyone else, it provides the means to create and share a virtually completed site with full functionality in a matter of hours.

    No, I’m not getting paid by adobe, but my clients clearly appreciate the speed with which I am able to provide them with a wire-frame sample and convert that to a working site.

    0
  24. 42

    Having more than 40 pages in a Fireworks webdesign file is a recipe for disaster on my MBP.

    Anyway, I would like to recommend an important extra when creating a website prototype. In your export folder, add a simple style.css file with the following lines, where the margin-left is half the pixels of your pages canvas width.

    @charset "UTF-8";
    /* CSS Document */
    
    body, html {
      padding: 0;
      margin: 0;
      overflow-x: hidden;
    }
    
    img {
      position: absolute;
      left: 50%;
      margin-left: -600px;
    }
    

    This assures that the images align in the center top of your browser. If you don’t you’ll have the white border and it will align on the left side. In this example my canvas width was 1200px. Really helps with creating a better illusion of actually working in a prototype.

    3
    • 43

      Michel Bozgounov

      July 6, 2012 12:23 pm

      @Pieter:

      That’s a great tip! :-)

      Do you often make interactive prototypes with Fireworks?

      40 pages in one Fireworks document sometimes can be OK, and sometimes, too much. It depends on many factors: size of canvas, number of objects (vector objects and bitmaps), number of Symbols used, etc. In some cases performance of Fw can drop, when it meets with too many pages or Symbols…

      3
      • 44

        Yes we do this quite often, but in most cases we stick to click-through pages with simple hotspots and leave the mouseover states en stuff like that out because the amount of time we have often is too short to create those extras. We often have very large files full of symbols in groups of groups with symbols inside, which my current 3 year old MacBookPro is having a lot of problems with, but even with smaller files FW crashes regularly. And not always did I save it in time and the recovery system only does the job in 1% of the times it crashes. If FW was more stable, more people would love to use it I guess.

        2
  25. 45

    If they pump Fireworks and create a perfect (even more) design tool, it will mean a decrease in photoshop sales, so I think they are prety happy with the situation right now.

    1
  26. 46

    FW vs PS sounds like Android vs. IOS. You talk great things about FW, and all the PS lovers who were not able to take advantage of FW features join the conversation to defend (for whatever reasons) their tools.
    There is no point of bringing PS here; they are just different tools for different purposes.

    2
  27. 47

    Think it’s time for somebody to do a video of a build off. two people create 1 page prototype, 1 in code 1 in fireworks both experts with their tools and we see who get’s their first and how it fairs in a simple user test.

    0
  28. 48

    I will never get this!?

    Why do people make it so complicated to show complex interactivity when there is Adobe Flash Catalyst?

    This tool is so damn easy and you can animate everything you need with some clicks. Yeah, its flash. But for a demo its okay.

    0
    • 49

      Michel Bozgounov

      July 20, 2012 11:26 pm

      First, Adobe Flash Catalyst has been discontinued by Adobe. Seems almost no one was using it…

      Second, Flash will not run on mobile devices and tablets, while a simple HTML/CSS prototype, exported from Fireworks, will. :-)

      1
  29. 50

    Great Article!
    I was Fireworks MX user back in 2002 and it was my favorite tool up to 2005 (Fireworks 8). Then I jumped into Phototoshop considered it to be the industry standard for Website designing. But after exploring these new great Fireworks features, I really decided to switch back to Fireworks at least for all of my UI Design projects and quick interactive prototyping.

    0
  30. 51

    a very good tutorial

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top