Working With Sketch


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

So let’s face it, Photoshop has a big learning curve (at least it did for me), and it has a really high cognitive overhead. The value of a tool is in its ability 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.

Sketch and I

As for me, I was pretty tired of Photoshop. I was working with a few guys who included all of the details about interaction in Photoshop notes in these pixel-perfect mock-ups, but the mock-ups didn’t help us make responsive designs or patterns. I was so exhausted with that type of non-reality. 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 in order to feel productive in Sketch. After fumbling with Sketch and remembering it wasn’t another Adobe product, that muscle memory started to wear off a little bit, and it felt like the thing I needed to complement working in the browser.

Usually I work in CSS (via a preprocessor) and mostly design in the browser. I have a pretty nice workflow for doing that, and, even more so, 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 (for me, working with fonts in the browser is still kind of labor intensive for just quick impressions).

I normally take the Style Tiles approach for most of the 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 small type systems to play with hierarchy. Really the only thing I use it for is playing with vector objects; Sketch makes working with (already made) SVG files very handy.

I rarely work in a literal mock-up (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 actually use and find helpful. 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 are symbols. You make a group of objects and create a “symbol” for it, and then you can repeat it elsewhere in the document. They’re inseparable, though; if you change the size, dimensions, or color of one of the symbols, all of them mirror those changes. It’s a good feature 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 not really comfortable with 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 & Posts

For your reading pleasure: