Sketch VS Fireworks

In response to many who have suggested in my blog Sketch VS Photoshop that Fireworks is a great alternative to Sketch, I decided to download it again after many years.

First Impressions

In the first few minutes after using the UI, I can tell why everyone has been saying that Adobe neglected this product. It feels very unpolished compared to Photoshop which has a dark sexy, intuitive interface (CS6 is even better). The buttons look completely outdated. The top bar is pretty much useless. The Bitmap tools (marquee, brushes, eraser, etc.) are good for image editing, but they’re just noises for user interface design. You might as well use Photoshop or the cheaper alternative PixelMator for that purpose. Additionally, those tools are just not vector-friendly.

After playing around with the properties on my rounded rectangle, I started to really miss the live editing and the keyboard arrows (up & down) that would allow you to see direct results from your tweaks. Sketch has a really efficient way to adjust the settings and see live results without having the press Enter all the time. Dragging stuff around feels very sluggish compared to Photoshop/Sketch and I work on the latest iMac with 32 GB of RAM.

I was pleased to see that you can apply multiple of the same styles (drop shadows, inner shadows, etc.), but managing them was a pain. The number of clicks/popups that I have to go through is just astounding. Also, for some obscure reason, Adobe feels that the default drop-shadow should be at 315 degree angle and at a 65% opaque black. That basically means that you have to adjust those settings every single time.

In the first 5 minutes, the application crashed on me as I wanted to re-arrange my toolbars. That might just be bad luck.

The Export Tool Is Pretty Sweet

You can slice your design and get the html file that contains all the images. I can see why exporting sliced designs can be useful, especially if you don’t want to be bothered with codes.

But it’s 2013 and most designers stopped relying on images to create simple interfaces. We use CSS now and we love clean codes. Sketch and now Photoshop has a neat feature that allows you to “Copy CSS”, which essentially gives you the CSS equivalent of the properties you have set. It’s useful on occasions, but not truly groundbreaking. That’s until they figure a way to make the codes cleaner (e.g. have multiple styles separated by commas instead of repeating for box-shadow), embed more settings such as border-radius, border, gradient, patterns, text-shadow, etc.

Still Pixel

At the end of the day, what really made me switch to Sketch was the 100% vector direction and how simple the UI is. I care deeply about the number of clicks needed to achieve one task. With Sketch, it just feels like all the properties that I use are there, only when I need them. That’s a sign of a good UI.

It was a tough decision to switch from Photoshop, but the advantages far outweigh the hurdles. While Fireworks is a decent alternative focused more for Web design, it still carries the same issues that I’ve had in Photoshop. It feels like a tool that was invented when the Web was prominent, before the Mobile era and certainly before retina displays came along. There is no tool in Fireworks that made me think “Hmm, they really thought about this for mobile designers”.

What Is 100% Vector, Really?

Okay, I feel like a lot of people misunderstand what 100% vector really means. Well, let me clarify that. In Photoshop, you have vector shapes, but changing the width will screw the rounded corners. It’s like the application really treats it as an artwork rather than a dynamic shape. In CSS language, if you change the width of your box, it won’t change your border-radius.

Zooming in will show all the pixels, which means that you won’t be able to see how it’ll really look like in 2x and you won’t be able to export to PDF or even print your designs as is. You will always have to set the DPI. It is resolution dependent. In Sketch, all that disappears. Thanks to that, you can do pretty cool stuff like exporting in 2x without creating extra layers.

Sketch does a beautiful job at importing SVG icons from your favorite designers. In fact, I found a pretty neat process that even allows you to import all your Photoshop icons into Sketch. It’s a bit tricky though.

• Select the shape in Photoshop.
• Copy and paste that shape to Illustrator.
• Save as SVG.
• Drag and drop the SVG file to Sketch.

Finally, because Sketch is vector based, all the layers are compatible with other vector based application such as Keynote. It is perfect for presentation, or designing for print since you won’t have to care about DPI. For example, I was able to redesign my Résumé in a very short time, and that experience was actually enjoyable! My Photoshop experience with designing resumes or business cards was not a good one.

Animation

This is a topic that I’m passionate about and no one has solved it beautifully yet, not even Sketch. I want to be able to animate the transitions in my designs and preview them quickly, anywhere. That would help the process of showing engineers how I’d like my design to be animated. Fireworks, Photoshop and AfterEffects all do that task in their own way, but I never felt compelled to dig deeper for fast prototyping. They just don’t feel natural for what I truly want. It is unfortunate that Sketch has no support for that yet. Perhaps, Sketch shouldn’t and perhaps we need a dedicated app as powerful as Quartz that’s much easier to understand but that can easily animate using physics, ease-in and ease-out by just tweaking the numbers and applying properties and specially made for user interface design. But it’ll be interesting to see how design applications will evolve to fulfill that need.

Price and Support

I was surprised to find out that Fireworks actually costs $299. It’s ridiculous considering how little Adobe work on that product anymore. In comparison, Sketch costs $49 and has a small business license for 5 users for only $124. You’ll have to judge it for yourself.