Sketch as a web design tool?

How could you not like an app with an icon this gorgeous?

For a long time, we’ve been waiting for the ultimate web design app. Although we may never find the perfect solution, I’m always on the lookout for a better suited tool to help me bring my designs to life.

Sketch is interesting in a few ways. It’s fast, lightweight and really well designed. It’s main focus is vector editing and UI, but gave it has many interesting features that we can leverage for web projects.

Multiple pages, artboards & layers

I don’t know about you, but I usually have around 10 to 20 Photoshop files for all the pages of the website. Sketch allows you to bring all of those in one file by having multiple pages, like you’d find in Fireworks. Handy.

Sketch also de-emphasizes the need to always have to select a layer before moving it around. It’s really simple, you just click on it. Boom. There are also guides and onscreen helpers to allow you to center or align your elements without having to think about it.


This one is a mix of good and bad. Sketch’s rendering engine is very similar to the one found in webkit, so what you see is really what you will get in the browser. On the flipside, the app currently really misses a lot of the finer type controls that you get in Photoshop for things like indents, all-caps, baseline height and others. It’s also a bit unintuitive to have two different color options and have to jump back and forth between two different levels to adjust your text options. Hopefully, we’ll see changes on that front in future updates.

Rounded corners

I want this in Photoshop. Create your rectancle, select the corner radius as you want and resize it however you’d like and the radius stays perfect. You can also add background images to your shapes and easily add multiple borders to any shape. This alone makes me want to ditch Photoshop.


This is how grids should be done. They’re a document level setting and you can select the number of columns, the width and gutter size and it applies the grid to your document which you can turn on or off with a simple keyboard shortcut.

Minor Annoyances

The fact that by default canvasses are infinite threw me off for a while, but you get used to it. When you group layers together, it takes several precise clicks to be able to edit a text layer and becomes rapidly annoying.

Overall, I think it’s a step in the right direction and I’m sure the guys at Bohemian Coding will continue to push the boundaries of design software. I don’t think it can entirely replace Photoshop for now, but does it has to? I think it can be a great addition to my process.

I’ve only scratched the surface of what Sketch can do and I might have missed something. I’d love to hear how Sketch fits in to your workflow.