Why web designers are moving to Sketch, and 10 resources to help you make the transition

There are a lot of designers moving to Sketch.

The tool has become a regular competitor to the traditional program for drawing mockups, Adobe Photoshop. Both tools have pretty robust functionality, but whereas Photoshop is more like a Swiss Army knife when it comes to design, Sketch is made specifically for user interface design.

And that’s something designers like.

While there’s no right or wrong software choice, many webs designers are making a move to Sketch. If it’s something you’ve considered here’s everything you need to know to help you make the move.

One screen or many?

The landscape of website and mobile application design is changing quickly. There was a time when everyone had a website design.

Not anymore.

Most website designs are actually layers of multiple website designs that all render on different devices at different sizes.

Needless to say, it has gotten pretty complicated.

That’s where Sketch comes in. The web design app tool is made to help designers and developers create for multiple screens at the same time, using an intuitive set of tools that is just for UI design.

Sketch vs. Photoshop

So, what are the big differences between Sketch and Photoshop?

Sketch is a digital design tool for Mac users. The relatively new software was developed by Bohemian Coding and first released in 2008. The complete software package is $99 and includes everything you need to create interfaces, websites or icons in a pixel-perfect vector format.

Adobe Photoshop has been around for a long time – decades – and has been the go-to tool for designers to edit images, design website or app mockups, create three-dimensional artwork, make GIFs and pretty much anything you can imagine. The software package works on Macs, PCs and has lightweight mobile apps. It comes as part of the Creative Cloud licensing program, which for a standalone version is about $10 per month.

Here are a few of the major differences between Sketch and Photoshop:

• Direct canvas prototyping: Photoshop allows you to draw a mockup. You can make and do anything you want, but Sketch allows you to work on desktop and mobile versions simultaneously with the Craft plugin. Plus, it is interactive. Winner = Sketch.
• Vector vs. raster: Sketch is a vector-based design program (think Illustrator for the web). Photoshop is a raster-based program. You just can’t beat the look of vector formatting and with more screens at higher resolutions all the time, the old 72 dpi standard just won’t cut it. No matter how you cut it, vector designs are sharper, cleaner and just look better. Winner = Sketch.
• File size: Not only is Sketch lightweight to run, it also creates much smaller files. Photoshop is big and powerful, but that pushes out to file sizing. Many Photoshop files are four times as big as the Sketch equivalents. This is a big deal when you want to create something that will load lightning fast. Winner = Sketch.
• Shared/linked styles: While each layer is one onto itself in Photoshop, shared styles in Sketch work a lot like CSS stylesheets. Make the change once and apply it universally. This is a major timesaver and eliminates style inconsistencies between revisions. Winner = Sketch.
• Symbols (Sketch) and smart objects (Photoshop): These tools seem pretty similar, but Sketch lets you swap an entire icon set (or state) at a time. This can be important with the large number of icons and divots that can pile up in a design project. There’s one more consideration; You can override symbol and object styles in Sketch. In Photoshop, a smart object has a universal property. Winner = Sketch.
• Shortcuts and tricks: There’s definitely a learning curve here for Sketch users. Your fingers will need to relearn where to go. Additionally, there aren’t nearly the number of shortcut options as Photoshop. Winner = Photoshop.
• Plugins: There are plugins for Photoshop, but there are a serious number of plugins to make your workflows seamless in Sketch. (You can find some of those in the Resources section below.) Winner = Sketch.

In terms of speed, functionality and even navigating tools, Sketch is a pretty clear winner for many designers. One of the biggest pros to using Photoshop is its familiarity. It is the standard for designers for a reason. (You can do almost anything with it.)

But Sketch is gaining ground fast because designers like it.

Sketch and Photoshop?

Depending on your job and role, you might actually use a combination of Sketch and Photoshop. Both have their place in the graphic design landscape and it is to your benefit to learn both while understanding which tool is best for what job.

If you are working with an outside design team – as many of us are these days – knowing how to navigate both pieces of software can make it a lot easier for you. If you can “speak the language” when working with an outside design and development team, such as Secret Stache, your project will come together quicker, and you’re more likely to all be on the same page.

Knowing both pieces of software is definitely beneficial because they are not cross-compatible. Designs made in Sketch can only be opened using that tool and Photoshop files only work in Photoshop (or other Abobe programs).

Sketch resources

Question 1: Should you make the switch to Sketch?

Question 2: Do you work on a Mac?

If you answered Question 2 with “yes,” then it is probably at least time to start experimenting with Sketch. Any creative doing design or development work or working alongside a third-party development team can benefit from understanding the tool.

Here are 10 resources to help you get started:

1. Article: “Sketch vs. Photoshop. Why I’ve Moved ‘Mostly’ to Sketch to design UI,” by Brett Hales.
2. Sketchcasts is a weekly series with a new tutorial for beginners and experts. Topics include web and mobile design, new plugins from the Sketch community, and design topics like color and typography. (The archive has more than 100 videos.)
3. Sketch App Sources is a giant repository of Sketch elements, tools and templates that you can download and use to experiment.
4. InVision has been leading the way with Sketch resources and has a great list of 30 free plugins for the tool with descriptions of how to use them.
5. Sketch Tips and The Sketch Handbook are written guides with everything you need to know to start designing right away.
6. Sketch Repo is a collection of mockups, icons, plugins, and kits available to download so you can have a Sketch playground of your own. (What’s great about these resources is that you can see how other designers put files together as you are learning Sketch.)
7. The Sketch Tricks email newsletter is designed to help you learn best practices, master shortcuts and make the most of Sketch with information delivered to your inbox.
8. How to Override Colors Tutorial: The override functions mentioned in the Sketch vs. Photoshop comparison are a bonus. Here’s how to use them.
9. SketchAppTV is a directory of video tutorials and design resources by category. (Make sure to start with the freebies.)
10. Sketch Hunt is a lot like the popular Product Hunt, only for app resources. It’s updated multiple times each week with plenty of resources, articles, plugins and tools.

Conclusion

Photoshop is a powerful design tool – there’s no doubt about that. But more designers are looking to build digital products in native environments, which is why Sketch – an in-browser app – has become a preferred option.

It’s up to you to learn about both tools and how to best put them to work. Designers say that most people only really use about 10 percent of Photoshop’s actual capability. But are we all using the same 10 percent? Is a simpler, more defined piece of software the key to working faster and more efficiently?