It’s Time to Dump Photoshop and Embrace Sketch
The quest to find a lightweight,focused alternative to Photoshop for UI/UX designers
Over the past few years or so I’ve gotten increasingly frustrated with how inept Photoshop is for user interface, and user experience design. Adobe isn’t at fault, of course. It was never intended as an app for designing websites. Gaining popularity back when there was no feasible alternative. We’ve been using it ever since.
Photoshop’s a fantastic photo editing app, as the name implies. But the tools that make it a great photo editing app, are also what makes it a poor web design app. Too many tools, too much… stuff. Of course I’m not the first person to say this. Designers have been complaining for years that Photoshop is bloated.
Personally, I could get all my design work done in Photoshop if I only had the move, marquee, fill, type, and measuring tools. When you get down to it, our job as designers for the most part is about moving type and shapes around the canvas until they look and feel right. We as UI designers don’t need 3D tools, fancy filters, or content-aware fill.
Designing UI in Photoshop is like using a chainsaw to cut paper when all you need is a pair of scissors
Fireworks, Illustrator, InDesign, have all been recommended as good alternatives for UI design, but they’ve never quite been able to win the hearts and minds of designers. Fireworks had the best shot, but its interface felt clunky—especially in something so fundamental as color selection.
Is there a viable alternative? Yes, there is! Enter Sketch.
Sketch hits the sweet spot. It’s lightweight, 100% vector, and focused entirely at designers. Oh, and it’s blazingly fast, too.
Bohemian Coding, the team behind the app has this to say about it.
“Sketch is a professional vector graphics app with a beautiful interface and powerful tools. We set out to build a better app for graphic designers. Not to copy, but rather to improve”
I first stumbled upon Sketch about 6 months ago. Admittedly I was skeptical at first. But I gave it a shot, and boy do I not regret it.
Adapting to it wasn’t without its teething issues, however. Within a few weeks of using it I had gotten so frustrated with game-breaking issues and bugs that I quit using it all together. Luckily, I didn’t have to wait long until their 2.3 patch came out in August and fixed almost all the issues I had with it, and added a bunch of features I’d asked for, including a massive speed increase. I was in love.
Bohemian Coding is constantly updating the app, often with features requested by the community. Like the recently released Sketch Mirror. They wanted an app to mirror their Sketch canvas from their desktop, to their iPhone. They got it.
With Sketch being 100% vector based this means that it’s super easy to tweak your design on the fly, as shown in the examples below.
Non Destructive Tweaking
Compare to Photoshop, where you’d have to plug in a new radius, redraw your shape—making sure you replicate the exact dimensions! In sketch you just type a number into the radius box.
Math Based Tweaking
I used to have to rely on my calculator most of the time in Photoshop, but now it’s as simple as plugging into the calculations into the app.
Measuring
Select your marquee tool, open up your info palette, draw the distance between 2 objects, check results. Do you do this in Photoshop? The ruler tool was cumbersome, so we had to rely on hacky methods like this. Sketch’s approach is more direct and easier to use. Just hold down alt and mouse over an object you want to measure.
Alignment
Aligning in Photoshop is a similar process to measuring, and equally just as cumbersome. In Sketch you use the arrow keys or mouse to place an object exactly where you want to, very quickly.
Linked Styles
You can change the color, border, size, whatever you like of a bunch of objects together, simultaneously, if their style is linked. There are many practical applications for this, like testing out color combinations or editing duplicates of one object all at once.
Tiny Documents
Document file size is what you’d expect from a vector app, tiny. Most of the apps I’ve designed in Sketch have clocked in lower than 4mb, making it easy on your hard drive, and quick to load up and work in.
One Document to Rule them All
You need not create a document (e.g. PSD) for each art board—Sketch’s equivalent of a screen or page. They all live inside the same document, no matter how many art boards you have. You can even search for them in-app; great for large projects.
Sketch Made me a Better, Faster, Designer
I have no doubt in my mind that Sketch has made me a better and more efficient designer. The ability to tweak my design with numbers instead of dragging stuff around in Photoshop is a huge deal for me.
The best way that I can describe it is that Sketch allows me to play. And that’s refreshing.
Get Tips & Tricks to make your Sketch workflow better and faster when you subscribe to my weekly newsletter
