Sketch: A New Way of Designing

Sketch

I primarily write about print design on this site, but most of the work I do is User Interface and User Experience design.

Until recently, Photoshop was the only real application one could use for UI design, even though it wasn’t designed for it. It’s kind of like using a road bike to bomb down a mountain. You’ll eventually get to the bottom, but you’ll bang yourself up good on the way. The feature set, and the workflow, of PS is not optimized for UI design. We accepted it, and kept trucking along, only because we had no other choice.

Then Sketch came along.

Sketch is a vector-based graphics app by Bohemian Coding that offers a set of features, and workflow, specifically built for UI design. I’ve made the switch to Sketch at home, and at work. It’s been such a breath of fresh air.

Some of the benefits of Sketch are:

  • Super easy to use. The app is very intuitive, and never feels complex or overwhelming, but at the same time it’s powerful. You can get comfortable using it within a few hours.
  • It’s vector-based. All elements can easily scale without degrading, including drop-shadows, gradients, blurs and strokes.
  • Text is rendered exactly like it’s displayed in an app or on a website in a browser.
  • Smart guides. You can easily line things up and see the pixel distance from one object to another. You don’t understand how much time this saves.
  • Built-in grids. ‘Nuff said!
  • iOS mirroring. Using their iOS app, Sketch Mirror, you can see your designs on your phone in realtime.

These are some of the great features you’ll find in Sketch.

It’s not all perfect, though. There are some issues with it, but they’re minor. The app is still a little buggy. It’s in the early stages, so it’s expected. Things like zooming in and out can cause some weirdness. It doesn’t handle raster images that well, but that’s expected from a vector-based app. Artboards and export features are only focused on iOS. Would be great to include other platforms like Android and Windows Phone. None of these are deal-breakers and the app just gets better and better with each release.

Now, I know this sounds like a paid advertisement, but I can assure you that I haven’t received a dime from Bohemian Code. This is all of my silly love for this app. It’s really changed the way I design, and it’s exciting.

Down below I’ve put together a list a resources to help with the transition from PS. A lot of great info here on the app, its benefits, how to use it, and the workflow.

I’m going to open the comments in case you want to ask questions.

Enjoy.

Sketch Manual
Tips & Tricks Blog
Official Tutorial Videos
Discovering Sketch
Photoshop Users: How To Switch To Sketch
Sketch VS Photoshop
Supercharge your Workflow in Sketch
Designing with Sketch
.Sketch App Medium Collection
Design with Sketch Medium Collection
How To Wireframe An iPhone App In Sketch
iOS 7 GUI for Sketch
List of Sketch Plugins
Sketch Keyboard Shortcuts

9 Comments on "Sketch: A New Way of Designing"

  • Andy B says

    Umm, dude… hate to bring it up, but there’s an elephant in the room that is shaped like Adobe Illustrator.

  • The only thing Sketch and AI have in common are that they’re both vector-based apps. It ends there. AI’s is in no way, shape or form built for UI design. Sketch has specific features and workflows specifically created for UI design. I mention this in the article. AI is a great tool, and you can get by doing UI design in it, just like with PS, but Sketch is much, much better.

  • Florian says

    What about using a dedicated UI design tool like http://antetype.com ? 😉

  • I’ve never used Antetype, so I can’t comment on it.

  • Rado says

    to those that point to the obvious use of adobe illustrator….the thing is that no mater how good you are, it can never be transparent, meaning that you can never forget you are using a software. after 10 years, the feeling I am constantly fighting with it is still here 🙂 with sketch however, after a while you just completely focus on the work, everything is so easy and intuitive that you just forget about the tool and focus on the job instead.

  • Lucas says

    Adobe Fireworks? 🙂

  • Cynthia says

    Sketch is pretty badass. Still a little crashypants. But autosave kinda makes up for it. 😀

  • Steve says

    Great list or resources Antonio. I think that Rado makes an amazing point, where Sketch gets out of the way, apps within the Adobe suite tend to need just as much work as the UI problem at hand. This to me, is worth it’s weight in gold.

    Sketch really works well for my aesthetics and workflow. As a designer who’s moving live prototypes higher in my flow Sketch fits the bill perfectly.

  • Jim says

    I’ve been using Sketch for a week now, having used Illustrator to design UIs for many years. I’ve always considered it superior to PS because of its vector nature.

    So far Sketch as been pretty good, and I’ve turned out some nice designs pretty quickly.

    It’s not without its foibles though, but the hope is, with it being a small developer, that they will listen and react with updates faster than we could dream of with an Adobe product.

    One thing I’d like to pick you — and them — up on is the Grids. I too was attracted by the ‘Grids by Default’ marketing message, but I was sorely disappointed by how the feature is implemented.

    It really feels like it has been build by someone who doesn’t understand the typographic grid, nor how to construct one. It gives no flexibility to have say, asymmetry; column widths that vary; compound grids; or simply different grids for each artboard. Plus, checking the ‘Gutter on Outside’ checkbox, strangely adds half the gutter width to the outside. I’d prefer if I could have proper control over margins.

    Lets hope that they work on it, or perhaps someone like the good folks at gridsetapp.com will develop a plugin.

    I’m really enjoying using it though.

    Jim