After Adobe, Part 1 – Sketch

As anyone who has made their living in design in the past couple of decades knows, you can’t get there from here without Adobe’s Creative Suite software. Best known for Photoshop, Illustrator, and an ever expanding galaxy of production software, Adobe has not only delivered the highest fidelity solutions for creative professionals over the years, they have also capitalized upon this success to become the one must-have software suite among studios big and small throughout the world.

As I have come in to making my living as a web interface designer, programmer, and illustrator, I have become unwittingly dependent upon Adobe’s applications.

I have decided to search for reasonable replacements for the Adobe apps I use most on my Mac. To my delight, there are several software development teams busy producing some very promising if not altogether better than Adobe alternatives for Apple’s Mac OS X and iOS platforms.

In this and future posts, I’ll be writing about my experiences with these apps – the good and the bad.

This week, I look at Bohemian Coding’s Sketch app in place of Adobe’s Fireworks.


Sketch 2

Bohemian Coding  |  $49.99 USD on the Mac App Store

Sketch UI in all of its full screen glory

For any UI designer who’s had as an ambivalent experience with Adobe’s Fireworks as I have, Bohemian Coding’s Sketch app holds the most promise as an alternative. Like Fireworks, Sketch lets you have multiple pages in a single document. But even cooler is that – like Illustrator – each page can have one or more user-defined ‘artboards’, making it easy to duplicate UI layout designs for alteration and side-by-side comparison. After designing, artboards can then be named and used for exporting to a variety of image formats.

Like Fireworks, Sketch lets you draw and edit vector shapes and also includes basic vector shape operations: merge, subtract, intersect, and difference . Sketch’s features allow users to generate a variety of fill and stroke effects including gradients, shadows, blurs, and reflections (Hello, the early 2000′s called, they want their reflection effect back). Interestingly, these effects can be applied and layered and, using Sketch’s well designed inspector panel, independently toggled on or off. Once you get an element looking just the way you want, you can also save the style to a preset library. Smokin!

Anyone who knows me well enough as a program interface designer knows that I have in the past advocated and evangelized for the ‘full screen’ app experience. Why this is so is for a variety of reasons that could easily take up an entire blog post on it’s own. It suffices to say that any app that does the full screen UI the right way scores extra points with me. Sketch is one of those apps.

Multiple pages + multiple arboards = <3

Although the style of the UI itself is pretty barebones, the experience designers behind the Sketch UI make good with what almost comes off as a less is more approach to user interface. My favorite thing about their UI is that it utilizes clever contextual state changes to their tool inspector, eliminating the need floating palettes. Simply put, floating palettes get in the way. Sure, floating palettes are easy enough to invoke when you need them and dismiss them when you don’t, providing a user with the highest degree of workflow flexibility. But when I’m moving around a canvas when I’m trying to design a layout, I feel like I end up spending a lot of time moving palettes around when really what I want to be doing is designing, not managing the interface of the tool I’m using to design. To their credit, Adobe has been pretty smart about palettes in the past by implementing a system of palettes that snap to the side of the screen while cropping the canvas viewport in programs like Photoshop. Alas, this system is relatively new to the seasoned Mac user (since CS3 maybe?) and long overdue. Palettes in Adobe’s Fireworks CS6 – while they snap to the edge of the screen – persist with this older mode of floating over a scalable canvas window. I can see you, desktop wallpaper. Sloppy.

In Sketch, on the other hand, you can optionally view layers or element inspectors that live in columns on either side of the screen. Because the folks at Bohemian have done a reasonably decent job with pinch zoom controls for the track pad, I find it more convenient to just have them visible all of the time I’m working on a document, though it would be nice to have the option to hide all of the inspectors with the click of a hot key like you can with palettes using the tab key in Adobe CS.

Sketch inspector states: Positioning, styles, color, and text.

But how does Sketch manage to get away with NOT using palettes? Palettes are many and varied and, as stated before, easily dismissed or invoked. The answer is that the sole element inspector in Sketch is contextual, meaning the inspector options change depending upon what kind of element is selected. For example, selecting the text tool and clicking on the artboard invokes the text inspector where the user has the choice to adjust font, size, and paragraph options. Drawing a vector shape invokes a style inspector that provides the user with options to adjust shape size, positioning, fill, stroke, and other styles. Nested in either of these inspectors, the user has the ability to configure color options, causing the inspector to slide to reveal a color picker and saved swatches. After drilling down to configure color, the inspector features a ‘Back’ button at the top of the column to enabling the user to return to positioning inspector.

What I find surprising about this now-you-see-it-now-you-don’t approach to the inspector is how handy it is. Despite not providing the user with every control under the sun in one or more user-invoked palettes, Sketch provides the user with every option available for the element they’re working on right now in one inspector. The other thing it does is keep the UI focused, clean and tidy.

As with any early version of an app, there are a few bugs the guys at Bohemian Coding need to iron out before I give this app 5 stars. The biggest letdown is that the artboard and element coordinates aren’t always consistent between rulers and the inspector. I love the fact that I can have more than one page with multiple artboards per page in Sketch, but unfortunately, pages can’t be reordered, so once a Sketch document has two pages, you can’t switch page one for two to appear in a custom order, for example. And I love the handling of the text inspector, but I’ve found that saved text styles don’t always behave predictably – a user can’t have multiple saved text styles within the same text element, for example.  These issues don’t constitute a complete list of bugs I’ve experienced with Sketch, and it occurs to me that the guys at Bohemian Coding are largely just getting started.

Despite its flaws, Sketch definitely holds its own against Fireworks. Any digital UI designer on a Mac owe it to themselves to download the trial from Bohemian Coding’s website. If you’re independent or on a budget,  you will find that compared to the full-license (or upgrade) price for Fireworks, Sketch’s $50 price point will seem like too good of a deal to pass up.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>