Working with Sketch

We have a problem with graphics editors. There hasn’t really been an intentional application for designing user interfaces in, ever. Adobe keeps trying to make Photoshop for the web and for UI design, and it keeps coming up short for me and probably for a lot of other people. But remember, Photoshop is like 25 years old. And Photoshop is a photo editing software; layout, typography is an afterthought and lot of things you’re looking for are hidden or in layer styles.

So let’s face it, Photoshop has a big learning curve (or at least for me it did), and it has a really high cognitive overhead. The value of a tool is for it to get out of your way while you work and aid you in the task at hand. If Photoshop can’t do that, it’s time to find another tool.

If you’ve spent any time on Designer News or worse in the comments of Designer News, you know that Sketch wants to be the king of the hill for UI design. It’s supposed to be this magic bullet of UI design tools and I feel like it really has the potential to be just that.

Me & Sketch

As for me, I was pretty tired of Photoshop. I was working with a few guys who included all the details about interaction in Photoshop notes in this pixel-perfect mockup, and the mockups themselves didn’t help us make responsive designs or patterns. I was so exhausted with that type of non-reality. So I went to Sketch as an alternative to Photoshop mostly for that reason.

I loved that I didn’t really need to watch any tutorials to feel productive in Sketch. After fumbling with it and remembering it wasn’t another Adobe product and that muscle memory started to wear off a little bit, it felt like the thing I needed to complement working in the browser.

I mostly work in CSS (via a preprocessor) and design mostly in the browser. I have a pretty nice workflow for doing that and even moreso I always feel like I’m designing with more context in the browser. But sometimes I still need to use a graphics editor to work with color or play with typography (working with fonts in the browser to me is still kind of labor intensive for just quick impressions).

So I normally take the Style Tiles approach to most design I do in Sketch. This usually ends up being how objects look next to each other, feeling the impact of colors near each other or building a small type systems to play with hierarchy. The only real thing I use it for is to play with vector objects; Sketch makes working with (already made) SVG files really handy.

I rarely work in a literal mockup (mostly because there is no fixed size in web design). But fortunately, if I had to, Sketch has a ton of features to help.

A Sketch Workflow

These are the plugins and tools I’ve found helpful and those that I actually use. For the most part I shy away from too many plugins. Less complication here is better.

Plugins & Add-Ons

Symbols

One Sketch feature I’m mystified by is symbols. You make a group of objects and create a ‘symbol’ of it, then you can repeat it else where in the document. But they’re inseperable; if you change the size, dimensions, or color of one of the symbols all of them mirror those changes. It’s good if you need to make a header or consistent page element but I can’t see where you’d use it elsewhere.

Icons

For the most part I’m still really not comfortable drawing in Sketch, hopefully that just comes with time. I still use Adobe Illustrator for icons and making vector graphics that have any complexity to them. If you have any good tutorials on drawing icons in Sketch, please tweet them to me (@charlespeters).

Resources & Articles