Some early thoughts on Sketch 3

I’ve said that for years, because Fireworks is what I’ve used make my designs. I know that not everybody ‘gets’ Fireworks or sees where it fits alongside other Illustrator or Photoshop. The truth is, Illustrator is better at vector artwork than Fireworks and Photoshop is better at editing bitmaps too.

Whereas Illustrator and Photoshop have different origins, Fireworks has always been a ‘web designer’s’ tool and although it gained new tools and functionality such as ‘Pages’ a few years ago, Fireworks has stayed relatively bloat free and true to its original purpose. I’ve always especially liked the way that Fireworks organises objects and layers in ways that are so much better and simpler that Photoshop.

’Fireworks has suffered a long slow death and while it remains usable on a modern (retina) Mac, I’ve known for a long time that I needed to find an alternative design tool. The market for Fireworks alternatives is growing and there are tools like Macaw, Sketch and Webcode that I’ve been itching to try. I’d heard especially good things about Sketch 3, so it made sense to get to know that first. I set aside a whole day to learn how to recreate a design I made last week in Fireworks, in Sketch 3. Here are some early thoughts.

Sketch 3’s user interface

First things first, Sketch 3 looks fabulous on a Mac’s retina screen. I’m running it on a 13" Macbook Pro and its interface is so clear and sharp that I can’t wait to use it on a large, high-definition desktop display. Its user-interface design feels modern and very much in keeping with the Mac’s own. It makes Adobe’s UI in general and Fireworks’ non-retina UI in particular feel very dated.

Palette organisation

When you’ve spent more hours than you dare count working with Fireworks as I have, familiarity is important. I didn’t necessarily want Sketch 3 to work exactly like Fireworks, but when there are differences, I didn’t want the learning curve to be too steep. One of the most obvious differences is the way that Sketch 3’s objects, layers, pages and tools have been organised.

Instead of a floating ‘Tools’ palette like Fireworks, Sketch 3 tucks its ‘Vector,’ ‘Shapes,’ ‘Symbols,’ ‘Text’ and other objects away behind an ‘Insert’ button. While I’m used to having all the tools I use to hand in Fireworks, now that I think about it, I almost never use most of them, the select, vector line, shape and text tools, and the colour picker, fill and strokes, and pan and zoom being the ones I use most often. That’s ten tools out of a total of 34¹. Sketch 3 keeps its tools out of sight, which contributes to a clutter-free interface. I can, however, see myself moving some of its tools back into the customisable main toolbar.

Speaking of the main toolbar, ordinarily I like to customise toolbars as little as possible as I like my software to stay as out-of-the-box as it can. This won’t be the case with Sketch 3’s main toolbar, as it contains some tools that I’ll likely never use. I make web page layouts, not vector artwork, so vector manipulation tools like ‘Union,’ ‘Subtract,’ ‘Intersect’ and ‘Difference,’ and Sketch’s ‘IOS Mirror’ will soon be making way for the shapes I use more often.

Fireworks developed a system of tabbed options palettes that ordinarily floats over the canvas. Looking back, there are just four palettes that I use every day. In order of use, high to low:

1. Properties
2. Layers
3. Pages
4. Optimize

The rest, well I hardly ever use most of them and I’ve never, ever used some:

• ‘Application Bar?’ Never touched it.
• ‘States.’ I couldn’t tell you what they are.
• ‘Auto Shapes,’ ‘Styles,’ ‘Document Library,’ ‘URL?’ Nope.

Have you ever used Fireworks’ ‘CSS properties,’ ‘Behaviours’ or ‘Find and Replace’ because I know that I haven’t? Then there’s everything inside Fireworks’ ‘Command’ menu item. I haven’t used them either. Not once. Sketch 3 seems blissfully lightweight by comparison.

Art boards and canvas

Whereas in Fireworks you work on a canvas, getting used to Sketch 3 means getting used to art boards. You can create as many art boards as you need for each page of a design and each board can have its own dimensions, attributes and other options. This might take a little getting used to as there’s no direct correlation to Fireworks. What helped me understand Sketch 3’s art boards were the default templates—‘IOS App Icon,’ ‘IOS UI Design,’ ‘Mac App Icon’ and ‘Web Design’—as each come with a selection of appropriately sized art boards.

The ‘Web Design’ template includes a Desktop HD (1440x1024px), Desktop, Tablet Portrait and Mobile Portrait art boards although you can delete what you don’t need and add those that you do. I soon found moving objects and copying and pasting between Sketch 3’s art boards easier than between Fireworks’ ‘Pages.’

Finally for now, there’s exporting

In my normal workflow I sometimes need to export a visual to demonstrate to a client how the ‘atmosphere’ of my design might look on a full page. Then I’ll export the individual graphic elements that I’ll need when I build the site. Not to put too fine a point on it, exporting from Fireworks can be a pain in the arse. Its ‘Slices’ and ‘Hotspots’ features never fit well with how I work and is especially awkward for 1x then 2x retina quality assets. I never export elements from my working design file. Instead I copy them out into a new file, double them in size, then export them from there. I know that’s an inefficient method but it’s what I became used to.

Sketch 3 makes exporting much easier. Export complete art boards, either individually or multiple boards into one PDF which will save me combining page visuals into a PDF using Preview. Making individual objects exportable is also easy. Just select an object, check ‘Make Exportable,’ then choose as many export options as you need including different resolutions and formats including PNG, PDF and SVG and of course in 2x and now scarily 3x. I imagine that Sketch 3 export features are going to save me hours of time and are probably worth the price of the app on their own.

Farewell my old friend

I’ve been putting off learning a new tool, partly of out of fear of change and partly because I wanted to spend the time quietly figuring things out for myself without any day-to-day distractions.

I think that Sketch 3 will be ‘my’ tool from now on—well until something even better comes along—and even after all these years I don’t think I’ll be turning to Fireworks again.

Farewell my old friend.

Cue Whitney Houston.

1. I’m counting the number of tools you can see in the Tools palette at any one time and not including those that are hidden behind Fireworks’ sub-menus.