Web Designers: Make the Switch to Sketch

by | Jan 31, 2017 | Design & Development

Why I Switched to Sketch

Being both a designer and front end developer living in this responsive web design world, my preferred workflow has often been to design as much as I can within the browser so I know exactly what the final product looks like after several iterations. While this approach has served me well and led to some great work, it doesn’t always work the best for clients who want to see exactly what their site or app will look before buying in. That’s where comps come in. Comps provide a high quality but static representation of what the final deliverable will look like.

For the longest time, the go-to option for screen design has been Adobe’s Photoshop. Photoshop is great – it’s the best photo editor out there (hands down), but IMHO, it was created for photo editing, not screen design. Bohemian Coding’s Sketch has recently risen in popularity. It’s clear that Sketch’s popularity can be attributed to its’ laser focus on being the best tool for screen design instead of being trying to be all things to all people, like Photoshop. I’ve been using both tools for a while and here are some areas where I think Sketch really shines, and some possible areas where there’s room for improvement. On a side note, Adobe recently released  XD, their direct competitor to Sketch. It’s still in beta, so there are quite a few bugs to work out. For example, the inability to create symbols has made it clear that they have some catching up to do. So, back to Sketch Love:

 

Vectors. Glorious Vectors.
Unlike Photoshop, Sketch is vector based, which means you can design your pages and assets once, and then export at 1x, 2x, etc. and in any pixel density you need. Sketch is also very developer friendly, so there are many quality (and free) plugins available to extend the program’s functionality. Additionally, Sketch rounds shapes to the nearest pixel so you don’t end up with blurry edges caused by alpha blending.

The same line of text rendered in Photoshop, Sketch and Chrome.

 

True Typography
One consistent gripe among web designers is that type doesn’t render in Photoshop the same way it does in the browser. Designers working in Photoshop are stuck adjusting multiple settings in different menus to get type to render similarly to the way a browser does.

Sketch, on the other hand, doesn’t have this problem. Type in Sketch is closely rendered the way it’ll look in most modern browsers. Furthermore, many commands in Sketch match their CSS equivalents. For example, the command for “text-transform” in Sketch is appropriately named “Text Transform”. This is just one of the many instances of how Sketch is created to cater to those who speak the language of designers and developers.

 

File Management
Compared to Photoshop, organizing documents and making revisions within Sketch is a great deal easier. Much of this can be attributed to Sketch’s minimalist interface. The tools in Sketch are designed to mimic the look of HTML, CSS and the major desktop and mobile operating systems such as Mac OS, iOS and Android.

Also, creating art boards in Sketch is a breeze. Simply press “A” and boom, you have a new art board along with dozens of standard desktop and mobile dimensions. Additionally, the ability to contain an entire project from the wireframe and mood board stage up until the final screens is a real time saver. It also doesn’t hurt that Sketch’s file sizes tend to be roughly a third of Photoshops.


Source: sketchapp.com

 

Room For Improvement
As great as Sketch is, there is some room to improvement. Many designers would love to see the addition of global padding and margins so that our objects in our designs would automatically behave the way browsers would. A simple workaround for this is to do the simple math in your head as you go along. Other requested features would be lists that behaved the way they do in CSS. In Sketch, to equally space horizontal lists, you must manually add spaces between items. This is slightly annoying, but to be honest I wouldn’t be surprised if someone has created a plugin to handle this (chime in in the comments below if you know of one). The addition of a dark mode (like Photoshop) would be welcome, too.

 

Will Sketch Overtake Photoshop?
We hope so. But, even if most web design shops replace Photoshop with Sketch for screen design, it doesn’t change the fact that Photoshop is the best image editor around. Even if it loses it’s place as a tool for screen design, those screens still need to be filled with assets. What’s more likely is that Adobe will pour more resources into their Sketch competitor, Adobe XD, and the competition between the two companies will make both software suites better for design and development workflows.

By Craig Forbes, Creative Director

Craig Forbes is the Creative Director at Lupeer. An industry veteran, Craig is experienced in design and development in many industries including education, E-commerce, government and publishing. Craig holds a Bachelor of Science in Corporate Communication and is currently pursuing a Master of Fine Arts in Integrated Design from University of Baltimore.