First Impressions of Sketch 3
Sketch 3 was recently released and I thought I would share some of my thoughts after using it for a week.
I’ll be honest. Like Street Fighter 2 and Terminator 2, I had never heard of Sketch 1 or Sketch 2 before using Sketch 3. I just happened to wake up one morning and have my Twitter feed blasted with people squealing like kids at Disneyland that it was released and how they’ve ditched Photoshop for good this time.
If you’re looking to sharpen your Sketch 3 skills, I’d recommend this exhaustive tutorial. Otherwise, I’m going to share what I think are the key features of Sketch 3 and how they fit into the web design workflow.
It’s not Photoshop
Sketch 3 is a wonderful tool for web design because it was created specifically for it. That’s great because, up until now, the most widely used web design tool was originally created as a tool for photographers.
Photoshop has been my go-to app for sketching static web design layouts for years because, aside from a few notable exceptions (RIP Fireworks), it was the best available option. Web designers like me have been hacking it for over a decade and Adobe has only recently started integrating web design features natively into it.
That said, Sketch 3 is not the silver bullet that kills Photoshop as a web design tool. I may actually start using Sketch 3 solely for wireframes and–ahem– sketching, but I will continue to use Photoshop for what it was always design to do best: editing photos and raw assets for my web designs.
The infinite canvas
The infinite canvas is probably the smallest, yet most important, feature of Sketch 3. Where Photoshop forces you to set the dimensions of a defined space to work in, Sketch 3 gives you no such boundaries. In fact, the canvas has no boundaries by default and there is no way to set any.
Instead, Sketch 3 allows you to insert artboards on the canvas. Artboards are the containers for page layouts. Insert as many as you like and arrange them in any order to create a living sitemap of your website while you design it. That’s pretty rad. I can’t tell you how many times I’ve had to resize my Photoshop canvas because my design outgrew the dimensions. No more shuffling layers or separate source files for each page design!
One edit changes all
OK, this is another big one. Let’s say you have completed the design for a homepage, then moved on to a subpage. You clone the header of the homepage and repurpose it in the subpage design. Then you realize you used the wrong background color in the homepage header. Now you have to update it in both files. What a pain in the ass!
Unfortunately, that’s just the accepted fact in web design and the reason why many are now designing in the browser or just components instead. A small change can have major time-consuming consequences in Photoshop.
That’s changed with groups in Sketch 3. Group elements together, duplicate the group, then drop them anywhere in the design. Buttons are a great example. If you use the same “Buy Now!” button across your design, you can pop that bad boy in a hundred times with a simple drag and drop. Need to switch the color of them? Edit one of the buttons and they all change. It’s as simple as that. The same is true with styling text.
Groups makes static web designing a lot more like designing with CSS.
Slicing and Exporting
Many of the Photoshop designs we create use filters, masks, merges and other tricks that are tough to export for use on a website. Sketch 3 makes the process easy with improvements to slicing and exporting.
Slicing allows you to draw a box around any element on artboard. This box tells Sketch 3 that you want it to save as its own file when you export it for production.
Exporting is a common task, but Sketch 3 improves the process by allowing you to specify various resolution levels for your sliced components. That means you can save the same slice into several files that support different screen resolutions in one stroke.
These two related features combine to greatly streamline the web production process. I think it may be the single feature that could be responsible for making friends out of web designs and web developers again.
Preview on iOS
The last key feature I’ll cover is the ability to preview your designs in iOS. I can’t overstate the importance of testing designs on real devices. Sketch only supports testing on iOS devices at the moment, but that’s a huge step forward, especially for web designers who do not code.
The iOS Mirror feature allows you to preview designs on an iPhone, iPad, iWhatever as long as it’s connected to the same wi-fi connection as the computer your using to design. I’ve used this feature and it’s great. Not as great as previewing real code using live reload in Grunt or CodeKit 2, but still pretty sweet. Again, I think this is a serious treat for designers who don’t code, or anyone who just wants a quick and dirty idea of how a design is shaping up.
Conclusion
Is Sketch 3 the end of Photoshop? Uh, definitely not. It was honestly surprising to me how many tweets I saw from people either (1) spelling Photoshop’s demise or (2) saying they’ve trashed Photoshop after using Sketch 3 for five minutes.
I think what people are trying to say, and the same conclusion that I’ve arrived at, is that Sketch 3 is now my prototyping app of choice for static web designs. I’ll still open Photoshop often because it is still the gold standard for editing raw assets, but it might get a little less love when I need to sketch design ideas.
I also find it hard to believe that a company as huge and established as Adobe hasn’t already taken note and started figuring ways of integrating Sketch 3’s key features into its own products. Let’s hope they do!
I am still a huge proponent of prototyping in code, but Sketch 3 will be immensely helpful for getting quick ideas on the screen, as an intermediary step between paper and code. Let’s face it: not all projects require static designs and Sketch 3 does not solve that.
But for those projects that do require it, it’s worth considering Sketch 3 in your work flow.