FOUR32C designers were using Photoshop before some of our younger employees were born. While it wasn’t built for designing interfaces, it came with plenty of tools to adapt it for what we needed it to do. In Fall 2014, we collaborated with CBS Interactive in a redesign of the CBS Sports sites (the first site, Fantasy News site is scheduled to launch next week). They were in the process of moving over to Sketch, and we decided to give it a live test. But before making the leap, we did our homework and a little bit of tinkering. We ended up loving Sketch so much it’s become our go-to tool. Since then, we’ve used it in designing projects for New York Daily News, Weight Watchers, Men’s Journal, Bobbi Brown, and even our own website. Here’s why you should switch too.
- It’s easy. Learning Sketch is progressively rewarding. The UI is very intuitive. Sketch combines aspects of InDesign—like styles and patterns—with the pixel perfection of Photoshop. And as you become proficient, you unlock its power.
- Working with developers is a breeze. You can import and export CSS. In the past, we couldn’t rely on things like letter spacing to be accurate when giving developers designs in PSDs. All of Sketch’s effects, like shadows and gradients, can be converted to CSS. Even if a developer doesn’t like the code it produces, it’s a baseline they can understand and work with.
- It’s cheap. Sketch is available for a one time payment of $99, compared to CS6’s $1,900 or Creative Cloud’s yearly $600.
- It’s fast. More precision in the design phase means fewer mistakes in development, which means a higher quality product in shorter timelines. Sketch makes it easy to revise work with the client as you build a design system with the style sheets.
- Three words: Interactive. Style. Guides. They’re already embedded in Sketch. We didn’t need to create one to share with our clients and developers. And if we, or the client, makes changes they appear throughout.
- And the biggest reason: Sketch is made for building user interfaces. Photoshop is a powerful tool, but its audience is broad (photographers, interactive designers, motion graphic designers, etc.). Using an application for the purpose it was created means you’re going to have a better experience. Here are four specific very cool examples:
- Sketch doesn’t support actions a website wouldn’t—anything we do in sketch can be replicated in code.
- The designer can work with the actual pixels on the screen—and export to all device pixel ratios. Take working in retina. In the past, we would need to double the webpage’s size to account for appearance once it was scaled down. Sketch has an export function that renders a graphic any size (double, triple, fixed width/height, etc.)
- Speaking of devices, Sketch makes managing designs and styles across devices effortless. It combines artboards and pages so you can design the whole website in one file, or see the design in all of its responsive iterations (everything from desktop to mobile).
- Web typography is rendered more accurately in Sketch. What you see is what you get… well at least closer than any other design tool.
Sketch has some downsides too (we don’t love autosaving, no revision history, and it’s pretty processor intensive) but any new app will have minor issues to be sorted out in coming updates.
Sketch is the first Photoshop alternative that’s ever made us consider tossing out our “I heart Adobe” t-shirts.
We did it, and we’re glad we did.
FOUR32C: interactive agencies, NYC. We’re curious digital natives who bring creativity and intelligence to the world’s most beloved brands. We create thoughtful, compelling interactive experiences by starting every project with questions. Our process leads to evocative digital products designed with a purpose for every pixel.