Sketch: A New Way of Designing


I pri­mar­ily write about print design on this site, but most of the work I do is User Inter­face and User Expe­ri­ence design.

Until recently, Pho­to­shop was the only real appli­ca­tion 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 moun­tain. You’ll even­tu­ally get to the bot­tom, but you’ll bang your­self up good on the way. The fea­ture set, and the work­flow, of PS is not opti­mized for UI design. We accepted it, and kept truck­ing along, only because we had no other choice.

Then Sketch came along.

Sketch is a vector-based graph­ics app by Bohemian Cod­ing that offers a set of fea­tures, and work­flow, specif­i­cally 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 ben­e­fits of Sketch are:

  • Super easy to use. The app is very intu­itive, and never feels com­plex or over­whelm­ing, but at the same time it’s pow­er­ful. You can get com­fort­able using it within a few hours.
  • It’s vector-based. All ele­ments can eas­ily scale with­out degrad­ing, includ­ing drop-shadows, gra­di­ents, blurs and strokes.
  • Text is ren­dered exactly like it’s dis­played in an app or on a web­site in a browser.
  • Smart guides. You can eas­ily line things up and see the pixel dis­tance from one object to another. You don’t under­stand how much time this saves.
  • Built-in grids. ‘Nuff said!
  • iOS mir­ror­ing. Using their iOS app, Sketch Mir­ror, you can see your designs on your phone in realtime.

These are some of the great fea­tures you’ll find in Sketch.

It’s not all per­fect, though. There are some issues with it, but they’re minor. The app is still a lit­tle buggy. It’s in the early stages, so it’s expected. Things like zoom­ing in and out can cause some weird­ness. It doesn’t han­dle raster images that well, but that’s expected from a vector-based app. Art­boards and export fea­tures are only focused on iOS. Would be great to include other plat­forms like Android and Win­dows Phone. None of these are deal-breakers and the app just gets bet­ter and bet­ter with each release.

Now, I know this sounds like a paid adver­tise­ment, 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 tran­si­tion from PS. A lot of great info here on the app, its ben­e­fits, how to use it, and the workflow.

I’m going to open the com­ments in case you want to ask questions.


Sketch Man­ual
Tips & Tricks Blog
Offi­cial Tuto­r­ial Videos
Dis­cov­er­ing Sketch
Pho­to­shop Users: How To Switch To Sketch
Sketch VS Pho­to­shop
Super­charge your Work­flow in Sketch
Design­ing with Sketch
.Sketch App Medium Col­lec­tion
Design with Sketch Medium Col­lec­tion
How To Wire­frame An iPhone App In Sketch
iOS 7 GUI for Sketch
List of Sketch Plu­g­ins
Sketch Key­board Shortcuts

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

  • Andy B says

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

  • The only thing Sketch and AI have in com­mon 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 spe­cific fea­tures and work­flows specif­i­cally cre­ated for UI design. I men­tion this in the arti­cle. 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 ded­i­cated UI design tool like http://​ante​type​.com ? 😉

  • I’ve never used Ante­type, so I can’t com­ment on it.

  • Rado says

    to those that point to the obvi­ous use of adobe illustrator.…the thing is that no mater how good you are, it can never be trans­par­ent, mean­ing that you can never for­get you are using a soft­ware. after 10 years, the feel­ing I am con­stantly fight­ing with it is still here :) with sketch how­ever, after a while you just com­pletely focus on the work, every­thing is so easy and intu­itive that you just for­get about the tool and focus on the job instead.

  • Lucas says

    Adobe Fire­works? :)

  • Cynthia says

    Sketch is pretty badass. Still a lit­tle crashy­pants. But autosave kinda makes up for it. 😀

  • Steve says

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

    Sketch really works well for my aes­thet­ics and work­flow. As a designer who’s mov­ing live pro­to­types higher in my flow Sketch fits the bill perfectly.

  • Jim says

    I’ve been using Sketch for a week now, hav­ing used Illus­tra­tor to design UIs for many years. I’ve always con­sid­ered it supe­rior to PS because of its vec­tor nature.

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

    It’s not with­out its foibles though, but the hope is, with it being a small devel­oper, that they will lis­ten 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’ mar­ket­ing mes­sage, but I was sorely dis­ap­pointed by how the fea­ture is implemented.

    It really feels like it has been build by some­one who doesn’t under­stand the typo­graphic grid, nor how to con­struct one. It gives no flex­i­bil­ity to have say, asym­me­try; col­umn widths that vary; com­pound grids; or sim­ply dif­fer­ent grids for each art­board. Plus, check­ing the ‘Gut­ter on Out­side’ check­box, strangely adds half the gut­ter width to the out­side. I’d pre­fer if I could have proper con­trol over margins.

    Lets hope that they work on it, or per­haps some­one like the good folks at grid​se​tapp​.com will develop a plugin.

    I’m really enjoy­ing using it though.