UX Designer, HubSpot Design & GDD Certified, Designer for 70+ Sites for HubSpot and Various CMSs
August 20th, 2019
For years many designers considered Photoshop the go-to tool for web design. In fact, I’ve been working exclusively in it for my entire 8-year career at IMPACT.
Photoshop gives you the ability to do so many different things all in one place. You can edit photos, create digital graphics, make GIFs, and even create prototypes.
It’s essentially the designer’s Swiss army knife.
Over the years, I kept hearing of a new tool called Sketch that was supposed to replace Photoshop and make my workflow more efficient.
“Blasphemy!” I thought.
Nothing could replace my beloved Photoshop. I felt like I had mastered the tool to the point where there was no way I’d be more efficient in any other program.
However, that all changed a couple of years ago when IMPACT took on a client that required us to design an entire project in Sketch.
Diving into Sketch
For those of you who haven’t heard of Sketch, it’s a Mac-based design tool that was developed by the Dutch company Bohemian Coding.
Since its release in 2010, it’s gained a lot of popularity with designers and even won an Apple Design Award.
After a small panic attack, I dove head-first into the unfamiliar waters of Sketch.
I was skeptical at first, but after three months, I knew there was no going back.
What made a former self-avowed Photoshop professional make the switch?
Sketch fit really well in my workflow and empowered me to work faster while in a true digital designer’s mindset. Our entire design team has since moved over to Sketch.
However, that’s not to say that Photoshop doesn’t still have its place in my workflow and may actually be the better for some teams.
To help you determine which is right for your team let’s go through the pros and cons and which I’d recommend for a modern-day digital designer.
Photoshop: The pros and cons
Photoshop has been the Goliath of web design tools since its release in 1988. It’s not surprising because this is a tool that can do so many different things. The following are some of the stand-out features that make Photoshop such a powerful design tool and also some drawbacks to consider.
Photoshop allows you to take assets like images and illustrations and store them in a cloud account to access and reuse them in other files and Adobe software.
This helps keep your designs consistent and saves you from having to recreate assets over and over again.
Compatible with all operating systems
Photoshop is a software that’s been around for decades, so not only is it a time-tested, stable tool, it’s also available on both PC and Mac.
This is a huge plus for teams that have both types of users.
Photoshop’s shining feature is how versatile it is. It’s a great tool if you’re a one-man team or if you’re handling a variety of design tasks at your company. Whether you need to edit a photo, lay out a page design, or even create a GIF, you can do it all in one place.
Photoshop can get expensive fast. Plans range anywhere from $20.99/mo to $299.00 for the year. If you’re working on a small budget that can be a big cost.
File size & management
While Photoshop does have the ability to create multiple “artboards” within one document, doing so quickly drives up the file size of your document. This can take a real toll on your computer and make it difficult to share files with the rest of your team.
Photoshop’s files can get very large very fast. I’ve had one-page files that easily reach 160MB. Files this size can really slow down your computer and be difficult to share.
As a result, if you’re working on something like a website redesign project, you need to save each page as a separate file, which can get messy and make it hard to reference all of the pages in a project.
Yup. Oddly enough, Photoshop’s biggest asset is also one of its biggest drawbacks. Photoshop is a powerful tool, but it’s not geared towards one specific discipline. That means that it does a lot of different things “okay,” but it doesn’t really focus on doing one thing perfectly.
When you use Photoshop for web design, you have to navigate around a lot of clutter and unnecessary tools that can slow you down.
So, how does Sketch compare?
Sketch: The pros and cons
Sketch is the David to Photoshop’s Goliath.
After dominating the web design world for two decades, Photoshop’s dominance is being challenged by Sketch because of its “web designer” focused mindset and powerful toolbox.
Many designers have made Sketch their go-to tool for web design and UI projects. Is it really worth the switch? Check out my list of pros and cons below.
One of the first things I noticed about Sketch was the files were significantly smaller than my Photoshop files.
For example, the current Sketch file I’m working on that includes ALL of my designs for the project is only 90MB.
That’s amazing for anybody who’s working in a remote team that needs to quickly and easily share files.
The ability to house all of my mobile and desktop page designs in a single file is AMAZING.
It helps keep all of my pages organized and allows me to export multiple designs right from one file.
It’s also nice to be able to quickly reference other designs and make sure everything looks consistent.
In my opinion, symbols are the biggest, most impressive feature that separates Sketch from Photoshop.
Using Symbols for the first time made me a believer in Sketch and completely changed the way I approached my designs.
Simply put, a Symbol is a feature in Sketch that allows you to reuse (and update) elements across your documents so you don’t need to keep recreating them from scratch.
Symbols allow you to create a “master” like you would with a smart object in Photoshop that allows you to use linked files across different documents. However, in Sketch, you have the ability to customize each instance all while retaining the core structure of the master.
For example, the two cards above are the same symbol, except I now have the ability to change things like the title of the resource, the image, and even whether or not I want an icon in the featured image.
Symbols save me a ton of time when it comes to working with elements of a page that I need to re-use repeatedly.
If I need to go back and make an edit, I can easily do that in the master and the change will be applied globally to all of the instances. Think of them as small templates used on a page.
Sketch is only available on Macs
Something to consider before fully making the switch to Sketch is that it’s currently only available for Macs. At IMPACT we’re a 100% pro-mac office so running a Mac-only tool isn’t an issue.
However, if you’re in a team that includes PC users, then sharing a Sketch file with them may become a bit of a headache. There are softwares that will allow you to open Sketch files on your PC but it is an extra step and tool that you wouldn’t need otherwise.
Sketch runs off of plugins
Some people may also have an issue with the fact that Sketch is that the tool relies heavily on its extensive library of plugins.
When you first use Sketch, you have just the basic tools you need to start designing.
If you want to upload files to Invision, markup the spacing on your designs for developers, or many other tasks, it’ll require you to download a plugin.
This is more of a matter of preference. I personally love that when I first started using Sketch there’s no bloat. Photoshop requires you to have to dig through tons of menus of tools you’ll never use while with Sketch you have just the basics. You get to customize your design tool with the plugins you want for the way you want to use it.
Why did IMPACT switch to Sketch?
At IMPACT, we spend a lot of time working with clients on a variety of UX/UI projects and website redesigns. Sketch is really built for teams who work in that arena.
Its web-focused mindset has not only helped us work more efficiently but it’s also increased the quality of our work.
Our team is able to utilize the powerful features like Symbols and Shared Styles to keep our designs consistent from page to page. We can also implement global changes across any number of pages within seconds.
Every effect and style you create in Sketch can be produced in HTML and CSS. Its tools are all geared towards letting you focus on the design without having to sort through buckets of tools and effects you’ll never use.
So, which is right for your team?
This isn’t exactly an either or situation. It’s all about using the right tool for the job.
If you’re part of a team that does a lot of UI and web design, you should seriously consider making the switch to Sketch. It’s a tool that’s going to help speed up your workflow.
However, if you work on a lot of projects that involve editing photos, creating GIFs, or creating graphics, then Photoshop is going to be the tool for you.
Even though I mainly work in Sketch now, I still use Photoshop almost daily, but only for what it was originally intended for — image editing.
It’s easy to get stuck in our old way because “this is how we’ve always done things,” but as people in a fast-paced industry we need to be on the lookout for new tools that can improve our workflows and our work overall.
Sketch is the next big tool to do just that. If you’re still on the fence, I recommend at least trying the free trial and checking out some of Pablo Stanley’s tutorial videos on YouTube.
I love to hear about your experiences with Photoshop and Sketch and which one you prefer. Feel free to share your thoughts and opinions in IMPACT Elite.