A Photoshop Designer Gets Started with Sketch for Mobile App Design

Design Workflow

Like a lot of my peers I was skeptical of Sketch at first. Photoshop had been my go-to program for the last decade. I quickly realized, however, that Sketch’s vector-based model and interface-focused features cut weeks from our workflow and helped elevate our mobile app design.

I first tried Sketch’s asset exporting feature as the lead designer on The Infertility Diet in late 2014. More recently, I integrated Sketch from start to finish when working on The Cato Institute's new podcasting app "CatoAudio". Since then, I've been using it as my main tool and wanted to share my first-hand experience weighing the advantages and disadvantages of using it versus Photoshop. I'll also address how I use both Sketch and Photoshop in our mobile app design workflow, specifically through the lens of the CatoAudio iPhone app.

Sketch Artboard

Seeing the Big Picture with Sketch Pages and Artboards

Many of our apps in the past would be created in one massive PSD. It could take three to four minutes just to open a file with 25-30 screens and another minute to load each individual screen. Imagine the additional time spent trying to track down one particular screen with those load times.

Sketch, in comparison, opens the same lightweight, vectorized file, with all the screens in a single view. Some designers prefer to create Pages (think InDesign) for each app screen. An unlimited number of Pages can exist in a Sketch document. It’s easy to create new pages (fn+arrow up/down) and navigate between them using the Pages popup.

Artboards, on the other hand, are fixed frames on Sketch’s infinite canvas. Think of an Artboard as a working boundary that remains open and retains its own dimensions and attributes regardless of the content stored within. Each Artboard can be placed next to each other to allow designers to see shared assets and a common theme. Check out this video for a more visual explanation of Artboards.

Neither Pages nor Artboards have a significant impact on load times, so it comes down to personal preference. I use Pages to separate the app from the actual UI elements for slicing. Each of my app screens lives on an Artboard. I could keep all of my UI elements in another Artboard but I like to move the elements off screen so I can focus on working on the app.

The Artboard functionality is critical in helping me get a glimpse of the big picture of an app, as well as keep track of changes across the entire app. It’s no longer a headache to handle app-wide revisions especially across larger updates like a v1.0 versus a v2.0 design.

Sketch Symbols, AKA Photoshop Smart Objects

Sketch 3 includes Shared Styles and Symbols to make it easy for designers to change assets throughout a document. We create Shared Styles to assign colors, borders, shadows and other object and text style elements to my assets. Similarly, we are using Symbols—previously a plugin—to create reusable objects that can be updated throughout a Sketch document. The Shared Styles and Symbols functionality is integral in keeping brand colors, fonts and imagery, as well as other app assets like navigation, consistent across the entire app.

Photoshop’s Smart Objects are like Symbols in that they also allow designers to create assets that change throughout a file. My experience with Smart Objects, however, has been far from perfect. We used Smart Object extensively in Photoshop and found that the changes were often not consistent throughout the entire app. We had to go in and make resizing and positional changes to the altered Smart Objects on some screens. It takes significant time and effort to scour every app screen for Smart Object fonts that haven’t changed with the rest of the app or assets that need to be shifted just one pixel. I’ve yet to encounter these issues with Sketch’s Symbols

Saving Time With Sketch 3 Design Specs and Asset Exporting

It used to take us five to six days to do design specifications and create app assets in Photoshop. The process, even somewhat automated, was an ordeal. Sketch cut that week-long endeavor into an afterthought thanks to various plugins and a handy program called Zeplin (but that's for a later blog post).

One of Sketch’s most useful plugins, Sketch Measure, allows you to see an asset’s size, margins, padding and properties by selecting the appropriate layer. It’s xScope functionality already built into Sketch.

Sketch gives the option to quickly export entire Artboards or individual layers. It's possible to add slices by layer or export the area around an asset by selecting the asset or layer desired and clicking the slice button. It takes only seconds to export complex shapes into JPG, PNG, PDF, EPS, SVG and other file types. Exporting can even be done by dragging and dropping assets from the program to the desktop, folder or browser.

With Photoshop, we were stuck either slicing assets and using Save for Web to export each individual slice at a time or using Adobe Generator, which slows down the process significantly. You can bypass that problem using third-party PS application, Slicy, or take advantage of Sketch’s in-program abilities. Just click on the assets you want to export and include the various sizes you want (2x and 3x). Then click File > Export and you’re done.

But Sketch’s biggest impact in our workflow is the ease with which it handles massive exporting tasks. Sketch can automatically export 2x and 3x resolutions to account for the changing pixel density across iPhone versions 4-6 and iPhone 6 Plus. What’s more, the 2x and 3x asset exports automatically scale thanks to Sketch’s vector-based model

Where I'm Still Using Photoshop

The biggest distinction between Photoshop and Sketch lies in the purpose of both programs. Photoshop was initially created to be the end-all software for photo manipulation. It then tried to extend that reach to other areas of art and design, including web and mobile. Photoshop’s all-in-one approach spread thin the program’s design power. Sketch, on the other hand, is a mix of Adobe Illustrator, Photoshop and Fireworks built specifically for UI and UX designers. This niche gives Sketch an advantage over Photoshop in web- and mobile-focused tasks.

Photoshop is still the king in photo manipulation. I still use Photoshop for certain photo effects like special blending and blurring. I wouldn’t recommend the frustration that is Sketch’s Gaussian blur and masking features. Sketch also lacks the more powerful photo manipulation features like levels/hue and saturation/curves effects as well as the clone stamp tool.

While as a team we have not fully switched to Sketch, I prefer Sketch for 90 percent of my app design work with the exception of Photoshop for advanced photo manipulation and Illustrator for icon and logo design. It is perfect for today’s popular flat, simple UI design. If the UI design trend switches back to a more skeuomorphic center style, I may reconsider my program priorities. Sketch is simply the more powerful UI design program.

That doesn’t mean that Sketch is infallible.

Sometimes Sketch’s smart measurement flounders when working with interlaced groups and its vector anchors don’t always align to the grid. Vector pathfinding isn’t without its bugs. One other major flaw I've seen is how Sketch handles the boundaries of typefaces. Most of the time the boundary of the typeface exceeds that of the actual object inside of it, which can make alignment tricky.

The biggest downside to switching to Sketch, though, is the actual act of switching to Sketch. Changing programs mid-app might not be worth the effort converting all your PSDs to Sketch files. Check out this blog post for advice on making the leap

Concluding Note

Sketch is quickly being adopted by designers for application-focused work thanks to its vectorized model and interface focus. I’ve seen some significant improvements to the way I design mobile apps thanks to these time-saving features. In today’s ever-changing environment, I bet you’ll find yourself enjoying Sketch because of its streamlined workflow. If you're interested, check out these additional community resources on Sketch and Photoshop in mobile app design.

Getting Started With Sketch

Sketch Keyboard Shortcuts

Sketch Support Documentation

Prototyping with Sketch: Helpful Shortcuts

Sketch Land: An Index of the Most Useful Resources for Sketch

Sketch with Material Design

Plugins and Templates

Sketch Templates

Sketch Swatch

Generate App Store Images for All iPhone Sizes from Sketch

Sketch Commands from Github

Six More Useful Sketch Plugins

More on Photoshop vs. Sketch

Meng To: Sketch vs. Photoshop

Photoshop Secrets: Photoshop vs. Sketch

Hacking UI: How and Why I Moved to Sketch

Joe is a California-grown pixel pusher who drinks large amounts of Diet Coke.

You made it this far so...