Adobe_Fireworks_Pencil

What could replace Adobe Fireworks? UI/UX Design Tools comparison

When I think of a perfect UX Design tool, I want have a one stop shop solution, from Site Planning Designing Wireframes  MockupsVisual Design/Creating AssetsClick through Prototypes. 

All these time, till now, Adobe Fireworks was my one stop tool for UX Design. Since, Adobe decided to discontinue Fireworks I had to shop around for alternate tools, and decided to write this article – which would help you to choose your next UX Design tool from Feature aspect.

Features Fireworks Sketch Illustrator Photoshop InDesign
Pages Superb Great - - Superb
States Great *Page State - - - Superb *Object State
Artboard - Great Good - -
Symbol Superb - Great - -
Custom Symbol Script Superb - - - -
Interactive/Prototyping Great - Confusing - Great
Dedicated Property/ Control panel for Objects Great Superb Limited Good Superb
9-Slice scaling Great - Great - -
Change rounded rectangle corner radius Later Great Great - - Great
Slice Management Great Good Terrible Terrible -
Object Arrangement/Alignment Superb Decent Great Great Superb
Vector Design Good Superb Great Good Superb
Vector Export - Good Great - (path to Illustrator) Good
Bitmap Editing Great Poor - Superb -
Bitmap Export Great Decent Great Great Decent
Generate CSS Attributes Great Good Decent (Confusing) Poor (Copy CSS) -

 

Macromedia Adobe Fireworks

Fireworks is very popular and useful tool in the UX Design world, but it has been very much underappreciated and underestimated by Adobe, after acquiring Macromedia. Fireworks is a bitmap and vector graphics editor. With Fireworks you can make websites, web graphics, user interfaces which are editable in both vector and bitmap modes. Fireworks has Pages/Master Pages, Layers, States, Symbols, Common library, etc. –  all features that considerably speed up design process incredibly fast.

Fireworks Page > State > Layer

Fireworks Page > State > Layer

 

I love the Symbol feature a lot which comes with 9-Slice scaling and you change a piece of design once, and it changes everywhere, it makes the design process lot faster!

You can also use it to create wireframes and interactive prototypes – you can apply behaviors to objects to simulate interactivity; The Property panel is really helpful to control all basic properties of your objects. After drawing rounded rectangle, you can still edit the corner radius later visually.  Fireworks offers a great way to manage your web slices as Web layer. Align panel is not just for alignment, but it has Object distributions, Match sizes and Spacing. Fireworks has Vector design tools, but it is lack of Vector exporting feature. Bitmap editing comes with lot of built-in tools like Lasso, Magic Wand etc. and filters including Photoshop live effects. It also can generate CSS Attributes for different browsers with a dedicated “CSS Properties” panel, better than any other design tool in the market.  

Overall, Fireworks was the right tool for UX/UI Design, but because of the lack of attention from Adobe it ended with bad memory management, though CS6 it crashes lot less than the previous versions. Finally Adobe discontinuing Fireworks but the good thing is Adobe is still supporting it. Sadly there wont be any new versions of Fireworks. 

 

Bohemian Coding – Sketch 

Since Adobe ditched Fireworks, Fireworks lovers are leaning towards this new tool called “Sketch” – by Bohemian Coding (http://www.bohemiancoding.com/sketch/). Although Sketch is only available for Mac users and lack of some of useful features, but once you give it a try, you will fall in love with this UI/UX Design tool. The User Experience of this tool itself is probably the best. Its simple, and powerful with the concept of “Page” – that means you can work on multiple pages in one project file. Isn’t that great!!

It has also an “Art board” feature, is pretty useful for creating image assets, but it is missing the “Page State” / “Object State” (I will talk about “Object State” in Adobe InDesign section) and “Symbol” feature. It is 100% vector designing environment, which makes this product love more. With Sketch you can probably design a complex icon faster than Fireworks or any other Adobe tool. Sketch is missing the interactive/click-through prototyping capabilities like Fireworks’s “Hotspot” with Page state/Object state like feature, but you can buy Additional plugin called “Sketch mirror” which creates gallery where you can navigate only next and previous pages.

 

The “Inspector” panel is similar to Fireworks’s “Property” or Photosho/Illustrator’s “Control” panel – where you can control your objects property on the right hand side, and left hand side panel shows you different layer, objects, page selections etc. Managing after drawing rounded corners is simple and elegant. The best part you can change all rounded cornered objects for a group or multiple objects together. It has a great slice management feature and the best part; you can export your assets in SVG – where Fireworks is missing that. Sketch has pretty good object alignment and distribution features, but it is missing the “Match Size” feature like Fireworks, where you could match sizes for multiple objects, which could come handy. It is missing Bitmap editing tools like Lasso, Magic Wand, Rubber Stamp – but you can still place and cut bitmaps in your artwork. Finally, the “Copy CSS Attribute” is not rich as Fireworks, but its better than having nothing at in for getting CSS Attributes from your artwork. 

Overall, Sketch is possibly the best candidate to replace Fireworks with some additional feature where Fireworks is missing them. Once Sketch adds “Symbol” feature, and improves their Export features (like Fireworks can export selected pages, all pages to PDF) and add some interactive prototyping capabilities, then it would close the gaps between Fireworks. 

Adobe Illustrator

First of all, Adobe Illustrator was not originally meant for UI/UX (interaction) design. Adobe Illustrator is the industry standard vector image editor and mainly print-centric designs. So mostly, Adobe Illustrator is not the first choice for Web or Interaction Design, compared to Fireworks. Although Adobe team is trying to push Illustrator for interaction design, and it tried to copy Fireworks features, like Symbol – but overall it doesn’t do the job well. 

Like Photoshop, Illustrator still awful with managing rounded corners for your rectangle after drawing, and while resizing a rounded rectangle after drawing, see how it breaks the rounded corners. I liked the fact that they introduced 9-Slice Scaling in Symbol, which helps a bit to manage custom shapes and scale them as you like. 

Also illustrator is missing Page > State type of hierarchy on your workspace, but it has the art board – which is not much useful to me, when it comes to Interaction Design. Managing slices is as confusing as Photoshop. But Illustrator is really good with exporting your works in Vector. The only thing I appreciate that, they brought the symbol concept inside Illustrator. Overall, design experience is really confusing with too much features they kept maintaining for long, and those are definitely not useful when it comes to UI/UX design.

 

Adobe Photoshop

Its important to keep in mind, that Photoshop is a pixel based program. Photoshop was primarily created in the beginning as a photograph-enhancing tool and not so much anything else like it is used today. Overall, till today it is really a powerful tool for Photo/Image editing, but it not “the” tool for UX/UI Design. Adobe is probably confused now with all of their design tools, and failed trying copy Fireworks features to other tools, including Photoshop. It has no Pages, States, Artboards or Symbol feature. Think about this, if you are working on 40 to 100 wireframes, you need to manage them as individual PSD files in Photoshop, which makes multiple layouts hard to manage and changing design is a nightmare for all files. With all due respect to Photoshop lovers, Photoshop is an unproductive tool when it comes to interaction design. Like Illustrator, changing rounded rectangle is not possible after drawing, also the web slicing feature is somewhat done terribly. 

Compared to Fireworks, Photoshop can indigent your files when saving for the web. Also Photoshop is known to be a lot slower than Fireworks which can be a bit frustrating. Finally, Photoshop is good in the visual design area, where you are not dealing with many pages, but still Fireworks can do that job better. 

Adobe InDesign

InDesign is the Updated version of Adobe Fireworks for ePUB or Digital publications. I actually think InDesign could be “the” tool from Adobe family for Interaction design after Fireworks, if they introduce few more features. InDesign is developed for digital publishing, which gives an open room for interface design as well. I loved the fact that they introduced Pages (I wish they had the ability to name the page), and I think the concept of Object State is much better than Fireworks Page State. InDesign is missing the Symbol or Slice management, but I feel like the whole layout and design experience is like the future version of Fireworks. InDesign introduced some features like creating tables, which Fireworks users were craving for, and the Property/Control Panel is really powerful in InDesign compared to all other Adobe tools. The color pallet needs to be much improved overall.

 

Conclusion

The comparisons used for this article were based on my personal experience for various features on each tool. I am a big fan of Fireworks, I will continue using Fireworks till something else catches up. Switching to something else requires some learning curves, and for someone new in Photoshop or Illustrator is some learning curve, though they are not the right Interaction design tools. Though, I believe Sketch is very simple to use tool and catching up Fireworks soon. So feel free to give it a try.

  1. Some mentioned me in Twitter about Axure, Uxpin type of tools. Well, just for your information, they are for quick (Lo-Fi) Wireframing/Prototyping with limited to their defined widgets. I like to create my own (Hi-fi) design/widgets without limitations, thats why I use Fireworks or Sketch, So I can have more control and freedom on my work.

  2. Dropping Few lines:
    Fireworks don’t miss SVG Export, and doing a good job in that field, (I will go for ‘Great’), and if talking vector exporting, what other program can export XAML paths?
    Sure both are not native, but are done using extensions, I think extensibility are very important part of a GUI designer workflow, or any modern software (If available), and deserve a column for its own, and almost sure Fireworks will win there too.
    Also with path panel (specially the latest one with live preview) Fireworks is superior to Illustrator vector design (I’m not sure about sketch, or in design), it’s much more sophisticated, and have very unique features, to do things that will take an Illustrator user very long time to complete.
    Last thing, your comparison table above prove with no doubt (to whoever puzzle about this subject – Not me), that right now there is no real replacement for Fireworks, specially not as a one stop station for UX/GUI Design.
    So my question will be what reason one will have to actually replace it at all? Except In Design I’m not seeing any software that able to provide even half of the features available to a Fireworks user (and you only present Major features, if you dig down to full feature list, you get the rest of the software far far behind, in what concern to workflow speed and ease of achieving your goals, and it’s get even bigger space if you include design modification and Iterations stage).
    So my conclusion will be: stick to Fireworks until a real replacement is arriving, and even consider move to fireworks right now and save money for the rest of you professional life…
    P.S. You also forgot one major and important feature of Fireworks that is there for the last few months: One will not need to relay on Adobe any more, a very big feature for my opinion ;)

    • Thanks for dropping few lines here Eyal:

      Yes, the SVG export is not native, but thats the best thing about Fireworks, it got lots of 3rd party Extensions, that you can render to SVG (Though the extension I used that was a little buggy), and add tables. My Article is based on their native features. But I should mention FW got Tons of Extensions.

      Regarding your export to XAML: I have done that for one of my project using Flash, and as you know Flash does better job on designing vector graphics, so if you use SWF2XAML – it converts your Flash SWF file to XAML, and trust me, its Awesome! Also, you can export SWF file from Illustrator as well!

      Lol, you are true! You dont need anything else if you have FW!

      • I using FW to XAML for XAML Export, and the vectors in the XAML are (mostly) very good and similar to what I did in Fireworks (need some tweaks here and there – but anyway at the end I will go and rewrite the mark up to rearrange it and add interactivity), Also I’m not sure if it the same in SWF2XAML, but in FW to XAML, you have (almost) full control of what and how you export the XAML (what you don’t have if you import AI or PSD into blend, and who want in a vector solution bitmap for drop shadow).
        Any way I Don’t think I design UI in Flash is a valid solution in most cases (as much as I loved this software back in the days), because I prefer (too) a ‘one stop shop solution’, mean to have all my workflow in one tool from early stage to final assets export, and flash is no good for CSS (AFAIK) and is not good for bitmaps export (not sure about SVG), If I stick to Fireworks I can at the end decide what I export (CSS, SVG, XAML, Bitmaps as Sprite or bitmap as slices, etc..), and that without caring what I did in early stages… (as an example many XAML Based Applications are changing the client to be web based lately, if that the case I can export SVGs, Bitmap and CSS form the same file I exported the XAML)

        • Again, Why the hell Adobe shutting down Fireworks!? They are not the real user, they are not the real creator (Macromedia is), they don’t know how powerful FW could be! And there are so much 3rd party extensions available out there, which made FW so powerful!

          Dude, I love FW as much as you do. Make sure you protest Adobe’s crazy decision on their Fireworks support site.

          • Because Adobe are not really yet understand what is design for the screen, they not really get what it is, and they just put features into there old programs that they can say they are, at the end they prefer to sell the more expensive Photoshop /Illustrator the the Maximum 300$ Fireworks.
            BTW, Did you checked Underdog? it’s made by former Macromedia /Adobe Fireworks Architect Alan Musselman, If not check it here:
            http://www.tribaloid.com/ Join the user group, If this will be as promised, this will be the valid replacement for Fireworks and then new future design tool that everybody talk about, wishing for (and some try to be :)

    • I just downloaded and gave it a try. I think its a good start, i liked the screen concept instead of page. Though I couldn’t find any Pen tool for drawing free shapes. Which is a bummer!!

  3. What about Keynote, that actually helps me create and present basic user scenarios and workflows pretty quickly

    • If you can create your prototype from the authoring tool directly, then Keynote is not required. However, Once you export all of your pages from FW, and create interactivity using Keynote, that could be a good way to present your prototype if different devices, and the best thing you can create prototype for any iOS devices. Though, i prefer creating prototypes for mobile devices in Flash, flash allow you to create an actual app for your prototype, with much more robust interactivity with ActionScripts.

  4. Wonders, If you use flash how you tackle iOS devices?
    I used TAP for mobile prototypes, it is not very easy to manage, but give a lot of flexibility (allows you to add external assets, on top of your screens shots) although I guess the most simple way for click trough prototypes, is the preview in browser from fireworks, the only probelm that the preview positioned in top left corner (browser default), but if you design in the right resolution -10 pixels fixed margin from left and top (again the browser default), it will sit nicely on the device, Off course it is really easy to just fix it, so for an important preview I will fix it manually

    • Its pretty simple, if you have Flash Developer account, download the Provisioning file and from your Flash “Publish settings” Target: AIR x.x for iOS (from its settings you need to provide certification detail/information). You are done! when you publish that file, just drag and drop it to your iTune (iOS Device), and make sure your iOS Device is connected. and the best thing from FW you can import all of your layers/assets directly to Flash. Its awesome! Give it a try, read this for more information: http://www.adobe.com/inspire/2012/12/ios-apps-flash-cs6.html

  5. Pingback: The Present And Future Of Adobe Fireworks | Beta Sites Galore

  6. Pingback: The Present And Future Of Adobe Fireworks | JTB Productions

  7. Pingback: The Present And Future Of Adobe Fireworks | Jungus

  8. Pingback: The Present And Future Of Adobe Fireworks - InfoLogs

  9. Pingback: The Present And Future Of Adobe Fireworks | Smashing Fireworks

  10. Pingback: The Present And Future Of Adobe Fireworks | Daniele Milana

  11. Pingback: Pressed Solutions | WordPress Development.Management.Support The Present And Future Of Adobe Fireworks - Pressed Solutions | WordPress Development.Management.Support

  12. Imane

    I have recently tried a great UX tool called Visual Spec and I wanted to let everyone know about it. Its absolutely free and has helped me immensely with designing. Its available at http://www.visualspec.co.uk

DROP A LINE