Sketch: Part 2

It’s been almost six months since I started using Sketch. Today it’s my go-to program for the daily grind. It has drastically improved my design process, efficiency, and overall style.

In the past, while I designed with intent and purpose, I didn’t care much about how a developer would interpret my designs. Sketch has given me the ability to design through the lens of a developer. This, coupled with the ability to create twice as many comps, has made me a stronger and more valuable user experience designer to both my team and my clients.

Sketch in Action

Earlier this year, I was assigned a project with a tight budget and timeline. We were tasked with redesigning an antiquated SaaS product, which allows users to create emails, landing pages, and manage contacts. At this point, I was still getting familiar with Sketch, but I decided it would be a great opportunity to get more comfortable with the platform and to put it to the test.

Six weeks and more than 140 comps later, we designed a beautiful, intuitive, and user-friendly product. Because the inputs in Sketch work much the same way CSS works (e.g., drop shadow has the values of “X,” “Y,” “blur,” and “spread”), hand off for front-end development was seamless. Through a plugin called Zeplin, our developer was able to click on the elements of my comps and get precise CSS values, and the output of his work was flawless.

Throughout the project, I learned not only about Sketch’s capabilities, but how to improve my overall process. I’ve learned to set up a page with all my styles pre-defined, another page of symbols (which is now automatically created with a recent update), another page with all assets (which makes it easier to export for development), and finally a page with all the comps. Creating these simple setups early on helps to manage global changes throughout all the comps and provide the front-end developer with a styles and assets library for easy development.

Now that I’m much more proficient with Sketch, I can share the good, the bad, and the ugly.

Sketch: The Good

The good? It enables you to design multiple comps quickly. For whatever reason, the platform encourages you to be more organized, focus less on the minute details, and more on the larger picture. Before you know it, you’ve cranked out a dozen comps in less than a week. And guess what? The entire file size is still smaller than the one comp you would have created in Photoshop because every element you create in Sketch is a vector. The plethora of plugins also allows you to customize your workflow and do what works best for you. For instance, I rely heavily on the Artboard Tools plugin in order to re-order my artboards quickly, especially when I have over a dozen of them. I have this hotkey and several others so ingrained that if I ever work with Photoshop, I enter those hotkeys out of habit.

Sketch: The Bad

The bad? Sketch is incompatible with Photoshop and Illustrator, so going back to old projects will require working with the Adobe program or rebuilding each element from scratch with Sketch. To be completely honest, it is worth starting from scratch in Sketch if you have the time to do so. For an existing client, I decided since we were commissioned to do many comps that it would be best to work in Sketch moving forward. So I went to their current site, inspected the code and used the CSS to dictate the elements I needed to build in Sketch. What resulted was a set of styles identical to what already exists online, so in many ways the outcome of all subsequent comps was probably better than what would’ve been produced in Photoshop.

Sketch: The Ugly

The ugly? Sketch is still a work in progress so it’s buggy. I’ve experienced weeks with no problems and then weeks of constant crashing or freezing, which is more frustrating than when Photoshop crashes on you, believe it or not. The good news is the Sketch team is very dedicated and pushes updates frequently to remedy existing bugs or to enhance the overall experience. Also, the autosave feature is pretty reliable so I rarely lose work.

I highly recommend designers add Sketch to their tool belt as soon as possible. For me, it’s been a very rewarding experience thus far and I can’t imagine going back to Photoshop or Illustrator for my day-to-day tasks. If you’re preparing to jump on the bandwagon, here’s my advice to you: Be patient, learn the hotkeys quickly, and don’t give it up!

• User Experience
• Web Design
• Sketch
• Design Process