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.
|States||Great *Page State||-||-||-||Superb *Object State|
|Custom Symbol Script||Superb||-||-||-||-|
|Dedicated Property/ Control panel for Objects||Great||Superb||Limited||Good||Superb|
|9-Slice scaling||Great||Bitmap only||Great||-||-|
|Change rounded rectangle corner radius Later||Great||Great||-||-||Great|
|Vector Export||-||Great||Great||- (path to Illustrator)||Good|
|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.
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) but thanks to the team, I have been reporting them to have “Symbol” feature, and appreciated them that, they listened, Sketch version 3 has the “Symbol” feature!! Yeaaii! which means you create one, copy and change one, it changes everywhere!.
Sketch is a 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 Photoshop/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.
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.
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.
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.
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.