Twitter Flickr Tumblr Pinterest

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 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. :D

  • 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.

    Jim