From Adobe to Sketch: One Designer’s Perspective

An Introduction

After months of putting it off, last week I decided to rip off the proverbial band-aid. I was starting a new project and figured it was time I gave Sketch a shot. Below are my initial impressions and thoughts on the transition so far. I’ll be writing follow up posts as time goes on, taking a closer look at specific features as well as any trade offs and short comings I come across while getting more and more familiar with Sketch’s environment. However as far as first meetings go, I think I’m in love. So if you’re a fellow designer doing a lot of UI work and are wondering whether you should make the jump to Sketch? In my opinion, absolutely.

A Background

So admittedly, I was a bit late to the party on this one. I first heard about Sketch just over a year ago and while I was intrigued, I initially held off on making the switch. While I had a variety of reasons for doing so, the main one can be summed up in one word; legacy.

In spite of Adobe’s move to a subscription-only model leaving a pretty sour taste in my mouth, I’ve decided to just bite the bullet and pay for a CC Suite membership. But the monetary sunk cost was really only a small factor in my decision to hold off. The truth is, I’ve grown accustomed to Adobe’s suite of products. I was used to the UI, and knew the limitations of each app. After so many years of learning the ins and outs of their product family, the keyboard short cuts have become muscle memory, and jumping from program to program a habit. And old habits die hard.

The buzz around Sketch kept building however, and I’ve started to see more and more people sing its praises. At the same time, the more I heard, the more frustrated I was becoming with my current tools. Whether it’s during my 9–5 or for my freelance clients, from UX/UI development, to branding and printed literature, I wear a pretty wide variety of hats. In other words, I’ve dipped my toes in more or less every visual design related program of the Adobe family. And while they all do certain things brilliantly, as of right now, there is really no great app in the CC Suite for UI Designers.

Enter Sketch

After a few hours of getting my hands dirty with the app while putting together some wireframes, I enthusiastically tweeted

Finally decided to take the plunge with @sketchapp … Loving it so far. It’s like a happy marriage of Adobe IL and FW w/ hint of ID

and really, this sums up my feelings on the program rather nicely. It takes some of the best features of various Adobe products (be it Photoshop, Illustrator, InDesign or Fireworks) and rolls them into one — plus adds a few party tricks of its own.

Coming from the world of Adobe, the UI takes some getting used to. The layers panel is in the wrong place, the tool drawer is nowhere to be found (the closest thing you get is the menu at the top) and compared to something like Photoshop, the whole app feels pretty bare bones and downright utalitarian. But once the initial “culture shock” of switching wears off, this actually becomes a pro as opposed to a con. The app is focused — laser focused even. It may not have all the bells and whistles, but it quickly becomes clear that for UI work it’s got more or less everything you need. The whole app feels lightweight, and fairly well thought out. At the risk of sounding too much like an infomercial, it really does feel like a tool created by designers for designers.

So What’s the Catch?

Well for starters, get ready for almost none of your keyboard shortcuts to work. Or if they do work, they probably work differently than you’re used to. I’ve lost count as to how many times I’ve pressed V, looking for the select tool to grab an object, only to start drawing a path. Turns out V in sketch brings up the Pen Tool (or Vector as it’s marked in the app). A instead of being the Direct Select tool toggles the Properties panel to the right. And a good portion of Sketch’s own shortcuts use the Control key, which can be a bit awkward at first.

As mentioned above, the layout of the app is entirely different than any Adobe product, so sometimes you just have to pause and realize that if you can’t find something, there is a good chance that it’s not because the tool doesn’t exist, but because you’re looking in the wrong place entirely. Luckily for me, I’ve made these sort of transitions before. (From Nuendo to Pro Tools back when I was doing audio work, and more recently, from Photoshop to Fireworks when I was first looking for different alternatives in the world of UI).

My advice? The best way to kick old habits is to actively start trying to learn new ones to directly replace them. The keyboard short cut for adding a new Art Board in Illustrator doesn’t work in Sketch? Ok… What is the equivolent shortcut here? Look it up, and then do it couple times just to drill it home. You’ll still make the mistake a few times but after you correct for it once or twice, the old habits will start to be overwritten. If you‘re used to working within the Adobe ecosystem, it’ll probably take you a bit of time to come back up to your usual speed in Sketch; I’m still working on that myself, but outside of looking up what the shortcut for a tool is, I’ve actually been able to stay out of the Menus for the most part.

So Is It Worth It?

In short, yes. I’ll be getting into more of the specifics in later posts, but this one is getting quiet long as it is. All in all, Sketch is worth taking the learning curve for, because for all the temporary set backs you may run into while learning the interface, it brings a plethora of features to the table that’ll save you time and remove headaches in the long run.

  • The built in mobile device/OS templates are awesome.
  • Symbols, while not quiet as robust as they are in Fireworks, are a huge time saver.
  • The properties panel is super useful and was clearly made with web development in mind. You can style your dropshadows, rounded corners and other elements the same way you would your CSS.
  • Speaking of CSS like features, you can create font-styles that act like classes which makes keeping your designs consistent a breeze. This should be familiar to anyone coming from InDesign.
  • There is a rich community developing everything from symbol libraries as well as plugins that make things even more painless.
  • Exporting retina ready assets at 1x/2x/3x for your devs and PDFs for your clients is stupid easy.
  • Using a combination of Art Boards and Pages (once again, taking some of the best features from IL/FW and ID) doing mock ups for a variety of screen sizes and pages in one document is more convenient then ever.

Really the list just goes on and a lot of the above items deserve a post of their own. But as far as first impressions go, Sketch has made one hell of a good one on me. There are things I wish it did differently, and features that are either missing all together or need more refining. But it doesn’t change the fact that when it comes to designing interfaces and websites, the guys at Bohemian Coding have blown Adobe right out of the water.