Why Sketch is Ideal for Web Designers

Aug 6 2014 by David Okuniev | 24 Comments

At our startup, Typeform, we have just shifted our entire web/UI design process from Photoshop and Fireworks over to Sketch. Based on our collective first-hand experiences, we’d like to discuss some of the app’s features that help us get our design work done more efficiently.

It gets CSS

At our company, we mainly use visual design software for web/UI design. This means that we almost always need to be able to convert a static design prototype to HTML and CSS. With Sketch, we’ve found this process to be incredibly easy.

The developers of Sketch created the app with CSS in mind. Everything you can do in the app can be reproduced using current CSS specifications. In Sketch, there’s no crazy, undoable visual effect that will make front-end developers hate you, just the ones you can actually write using CSS.

Also, obtaining the style rules for a specific element, such as a login button for example, is as easy as right-clicking on it and selecting "Copy CSS Attributes".

Vector graphics

Everything you create in Sketch is a vector element. Because of this, you can scale them without worrying about pixelation. This is particularly handy when exporting assets for @2x displays, such as Apple’s Retina screens, as well as when you’re working with SVG. The fact that this digital design tool is vector-based is also very helpful for responsive design.

Accurate font rendering for the Web

It’s annoying when you design an awesome interface in Photoshop, port it over to CSS/HTML, and then discover that the fonts look completely different compared to how PS showed it to you. Typography is key to the user experience, and therefore a correct representation in your web design tool is important in the design process.

One thing we’ve found with Sketch is that font-rendering is very close to how it would be on a web/mobile browser, meaning that we quickly know off-the-bat how everything will look together without having to cobble together a high-fidelity prototype.

iOS design testing

When designing our new site, we knew that it needed to look great on mobile. We’ve all done the standard tricks for testing designs in different viewport sizes such as manually resizing the browser window or using a Chrome extension to resize the viewport to match an iPhone or Nexus. But Sketch has something special for these responsive-design-testing occasions: A companion app called Sketch Mirror.

Sketch Mirror runs on iOS devices, and mirrors exactly what you see on the canvas on your Mac to all the nearby devices that have the app open. It’s great for testing your design on a series of devices all at the same time. (It would be even better if there was an Android version of Sketch Mirror.)

Symbols

If you use a design element repetitively, then making it a symbol is more efficient and improves consistency across a project.

A symbol links all the instances of a design element together. If you change one instance of the symbol, all instances you have made can be updated to reflect the change. This feature ultimately means no more searching through all your design files and layers for that "Share" button you want to tweak.

Symbols are very similar to Smart Objects in Photoshop, and this is no coincidence. The Symbols feature was originally created as a plugin for the app to bring Smart-Object-like features to Sketch. With the launch of Sketch 3.0, Symbols was brought into the core app.

Artboards and Pages

We used to have dozens of files littering our shared folders every time we were designing a new screen or component.

Since we’ve moved to Sketch, we can keep everything related to the same design or feature in the same file.

You can split Sketch’s infinite canvas up into smaller artboards, each with a unique size. We’ve found this useful when designing for a range of differently-sized devices, like when we need to know how our website will look on a 1080p display and an iPhone.

Besides artboards, you can also add pages to a Sketch file. We used this feature to split out each screen design for our new site onto a new page, keeping everything neatly organized.

Grid and Smart Guides

How could we ever live without Sketch’s Grids and Smart Guides?

First, let’s talk about grids. We all know we should use them to help us line up our design elements and get consistent spacing, but they can be such a pain to set up in our previous software.

In Sketch, however, it’s a trivial affair to set up your custom grid lines. Customizing your grid settings is easy, just go to the "View" menu. Now you have no excuse not to use grids.

And Smart Guides? They make aligning objects effortless. If you’ve ever used Keynote, you’ll be familiar with them. They tell you when an object lines up with another, and your object will snap to them as it moves.

It’s worth noting that a recent update has enhanced the Smart Guide functionality in Photoshop as well.

Small file size

For people used to the multi-gigabyte file sizes we’d seen with Photoshop, it was definitely a surprise when we found most of our designs coming in at under 100MB. The amount of money we’ll save in file storage alone makes it worth switching!

Passionate community

The people involved around Sketch are just brilliant; they always come out with something new that enhances the app, or teach you something you didn’t know.

Like Photoshop, there are some great plugins and tools that have been created by the Sketch community. One we use is Dynamic button plug-in for Sketch.app that’s useful when you need to make lots of UI buttons; as you edit the text of a button, other properties automatically adjust to keep a consistent border around the text, rounded corners, etc. Check out this list of open source Sketch plugins to get an idea of what community-developed plugins are currently available.

The community is also passionate about sharing knowledge about Sketch. There are tons of video tutorials and guides on how to get more out of Sketch, which was valuable when we made the switch.

Downside to Sketch

One drawback for a great deal of digital designers is the fact that Sketch is an Apple-centric app: It only works on Mac OS X (and Sketch Mirror only works on iOS).

Our design team primarily uses Mac OS, so for us this wasn’t an issue. But for many, this will be the ultimate deal breaker.

Do you use Sketch?

If you’re already using Sketch, or thinking of switching over, please share your experiences and thoughts in the comments.

Related Content

About the Author

David Okuniev is a UI/UX designer turned entrepreneur. He was born in Belgium, raised in England, and currently living in Barcelona where he founded Typeform.

24 Comments

Chris

August 6th, 2014

I used sketch and liked it a lot. It is easy to get used to it and has some powerful thoughts when it comes to export (especially for all sort of mobile devices).
Unfortunately I had to jump back to Adobe at the point where SVGs were the desired export format. This simply doesn’t work, which made it useless for modern web design.
Though I’m hoping there will be some improvements in the near future, can’t wait to come back!

Dave Bowman

August 6th, 2014

Great article, but

> Sketch is an Apple-centric app

Why not mention it upfront? You know, so as not to waste poor windows/linux artist’s time reading the article?

Alex

August 6th, 2014

Thanks for this, I’ve been using illustrator for about 20 years and while it’s great, I think it’s time for something smaller, simpler and more agile. All the alternatives I’ve looked at have fallen short, this looks very interesting.

Alicia

August 6th, 2014

I was looking for an alternative to PhotoShop, so I gave Sketch 2 a try, and I liked it so much that I bought it. A month an 3 days later, they came up with Sketch 3, and they only gave a free upgrade to those who had bought Sketck 2 within a month prior to the release. Did they really expect you to buy the same software twice in such a short span?

So I’m back at looking for an alternative to PhotoShop from a company that’s more appreciative of their customers.

Chris Arlidge

August 6th, 2014

We are doing the same thing here at work, looking to replace Photoshop in our web design process. Sketch is one of the applications I will be reviewing. I am currently testing Macaw (will be reviewing Macaw, Sketch, and possibly Reflow). A couple of things that are crucial for us in choosing a platform are:
1) It has to be able to create a reasonably interactive prototype that will allow the client to review and see how things will adapt at different screen resolutions
2) It has to be something our front-enders can easily pull styles from (succinct CSS and HTML are a plus)
3) It has to have the ability to create a Hi-Fidelity end product (not just lo-fi prototypes, or wireframes).

Thanks for your info on Sketch David, I will definitely be giving it a thorough test as well, I know it has been received well in the design community.

Cheers
Chris

Dane

August 7th, 2014

Instead of all the references and comparisons to Photoshop (which I understand because of its popularity), why not compare it to Adobe fireworks instead? Unlike Photoshop, Fireworks was built for designing web-based interfaces like you discuss in this article!
PS. Although Fireworks has been officially discontinued, the latest version, CS6, still works incredibly well.

Gorakhnath Sirsikar

August 7th, 2014

thanks for the article david, we’ve been considering giving Sketch a try and your article’s pretty much convinced us to do it seriously.

keeping web design and dev workflows simple and lean is becoming quite a challenge and this could add some serious value to that optimization process!

ks

August 7th, 2014

Since it’s Mac-only, it can’t be “ideal” for all web designers. Shame, really, but that’s how it goes.

Jono

August 8th, 2014

I primarily design in Illustrator. So far, the biggest benefit to Sketch is that it can export mobile art in the various sizes @1.5x, @1.75x, @2x, etc) MUCH FASTER THAN ILLUSTRATOR.

Mustafa Gaziani

August 11th, 2014

Hi David,

Yes I completely agree with all of your points. No doubt sketch is ideal for web designers.

Macaw has many importance in sketch for web designers. I gonna try this also to make a perfect sketch.

This article convinced me to do this. Thanks for sharing it with us .!
Have a great day ahead.

Maria

August 11th, 2014

I have found much of the same benefits using Adobe InDesign for wireframes & hi-fidelity comps, with the added benefit that it plays well with other Adobe apps (and works for Windows folks too!) While it doesn’t have the “copy CSS” function, everything is vector and the PDFs generated from it can easily be opened in Illustrated and dissected by (good) front-end developers to get the exact colors, radiuses, etc. And everything’s vector, so SVGs can be easily created as well. The one huge benefit of InDesign is using the “slug” to place wireframe callouts, so that the designs can be exported either as wireframes with full documentation (by including the slug) or as clean screen designs without the slug.

What is Sketch’s solution to including design documentation alongside the screen designs?

Tim

August 11th, 2014

iDraw is also good, though I think Sketch is a bit better right now.
This also looks very promising: https://affinity.serif.com/

Sanjay

August 12th, 2014

Looks like an awesome app! Too bad windows users won’t be able to enjoy it. Hope in the future though.

Rob

August 15th, 2014

I’ve been using Sketch it on some recent projects, and it was really good experience.

Alexander Bykhov

August 28th, 2014

I’m using sketch and I’m loving it!

Although it has some bugs, it’s the best application for web design that I’ve ever seen and used. It’s not so good for print design, but you still can use it as main part of workflow and then prepare you project for printing in Illustrator that works better with cm/inches and cmyk.

So I recomend to try it to every web designer.

David Okuniev

August 28th, 2014

Since I can’t comment inline, I’ll just give my responses to some of the comment in this comment…

Dave Bowman:
I feel for you…

Dane:
I also used to be a Fw user myself and I actually think it’s a better tool than Ps for web design. As far as choosing to write an article comparing Ps to Sketch, I guess Ps is now more relevant since Fw is no longer being developed.

Gorakhnath Sirsikar:
Awesome!

Maria
Sketch does not have an in-built documentation tool. Your best bet is to simply work with “Pages” and “Artboards” in order to add specifications alongside your designs, manually.

Thanks to everyone for reading and leaving your comments.

Peace and love.

Alex

August 29th, 2014

We find Sketch a nice app to use, unfortunately though we work with external developers who all use PCs and expect layered PSDs to work from. If Sketch could export true (live text) PSD layers it would then be awesome – currently Skecth just means an extra round of work recreating our designs in Photoshop :(

Kevin Lozandier

August 30th, 2014

Sketch is awesome to replace the extremely underrated value of Fireworks for Interface Design–including occasionally web design that primarily is more efficient to do in the browser now and sketching.

Things such as symbols and smart guides are what made Fireworks and even InDesign better for layout planning then Photoshop out-of-the-box.

Iain Houston

September 1st, 2014

I have no hesitation in recommending Sketch. We use it along with Pixelmator for everything we need to do graphically in our web design workflow, including editing and exporting SVGs.

Whilst I do sympathise with the lady who posted about being charged afresh for Sketch 3 but at least we don’t have to pay the same amount each month for our Adobe CC subscription! Adobe CC just does not just stack up wrt functionality per dollar in a business the size of ours. And, personally, now I’ve made the transition away from Adobe’s proprietary UI, I think I can get things done faster with Sketch’s UI which is much more consistent with the operating system thus making the experience feel more intuitive to me.

Riad Kanane

September 3rd, 2014

Most of you are all describing Photoshop while detailing your Must-Have elements on your future design platform…how funny :)

Albert

September 3rd, 2014

Totally ideal — all 3 designers at my firm already made the transition to Sketch and have not looked back. As for the Mac-only piece, sure it’s unfortunate but since all the best software is Mac only, it’s nothing new.

Julius

September 6th, 2014

Sketch is a great app. Ive been using for my web design projects and its really a big help for me.

Kered

September 10th, 2014

Sketch is indeed a very useful tool any web designer could benefit from it, as long as they’re using a Mac computer. It’s reliable, effective and big change from the buggy Photoshop. As everyone points out, they need to make a Windows version to reach out to all designers.

Chris

September 21st, 2014

I haven’t used Sketch yet, but have heard good things. I will be using it in the future for sure and most likely be replacing Photoshop with it. Such a powerful tool for a great price.

Leave a Comment

Subscribe to the comments on this article.

Mobify empowers marketers and developers to create amazing mobile web experiences.

Mobify