February 22, 2016

Take 3, Scene 3: Using Sketch to Accelerate Design & Development

In the third installment of Take 3, David Rhyne and Jason Wishard, two User Experience Designers for 3Pillar Global, join us to talk about Sketch. Sketch is a new digital design app that is taking the web design and development world by storm. It boasts a fully vector-based, flexible workflow that supports multiple features and plug-ins, all with the goal to make it better, faster, and easier to produce results.

Episode Highlights

  • David and Jason give a background to Sketch, as well as discuss its integration capabilities with both tools like Invision and a multitude of plug-ins and how these integrations have improved workability
  • The two of them talk about the newest version, Sketch 3.5, and how the different iterations have improved upon the app and its usability
  • Both David and Jason discuss their work on a recent 3Pillar project and how Sketch allowed the product to be launched in about 3 weeks

About the Guests

David Rhyne is a Senior User Experience Designer at 3Pillar whose responsibilities include creating design artifacts like wireframes, workflows, mockups, information architectures, and visual design assets.

Jason Wishard is a User Experience Architect at 3Pillar with a broad background that includes product strategy, visual design, development, and deployment. He’s also a design mentor at DC startup incubator 1776 and at General Assembly.

Read the Transcription

Read the transcription of the episode, which is given below.

Julia Slattery: Let’s start off with a very basic question—What is Sketch?

Jason Wishard: Sketch, or Sketch app as it is more frequently called, is a design tool that allows UX, UI, and visual designers to create interfaces for any device breakpoint. Over the last few years, it’s really taken off as a workflow that is conducive for actual interface design. So companies like Envision have actually integrated with it with a lot of plug-ins and tools, and there are also a slew of plug-ins available on GitHub and elsewhere for extending the capabilities of Sketch.

Julia Slattery: What are some of the areas where Sketch speeds up the handoff and the interactions between design and development teams?

David Rhyne: So this is kind of why Sketch was built. I think essentially it’s a replacement for Photoshop that makes UI development in particular—again, development versus design—less of a pain in the neck. You have symbols and shared styles, these are things that basically allow designers to get where they’re going and iterate more quickly, so instead of changing 100 layers one by one, you can potentially change all of those assets at once.

Probably one of the most significant areas is the exporting tools that come built into Sketch—so you can take any artifact in a particular design file, literally click a single button, and it’s ready to be exported repeatedly by itself every time you want to send assets to a developer. So again, you may have 50 different assets in a single file that need to regularly go to a developer and maybe update it at certain points. A single click and all of those assets are packaged and ready to be sent off.

Jason Wishard: I think to add to that: there have been a lot of third-party tools that have come out, like there is a local company, or local start-up, here in DC called Simply.io. They actually provide this collaboration tool that allows designers to work with the developers sort of hand-in-hand, so anytime we make updates in our Sketch app file, it actually gets pushed to this sort of more global repository so everyone can kind of see updates on the fly. There also tools like Zeppelin that do very similar things. Envision has come up with great ways to integrate with Sketch app. And I’ve actually used Sketch app alongside Keynote to do animated transitions and things like that, alongside Envision for all of my prototyping outputs.

David Rhyne: And one other thing that is somewhat intangible, but just a fact that pretty much any designer will agree with, Photoshop is slow as heck. It’s really laborious to move things, to rearrange layers, to set up typography. Sketch is just straight up faster, especially with tiny interactions, which add up really, really fast even over the course of a single day.

Julia Slattery: You all were kind of talking about this, but one of the most powerful things about Sketch is its integration with tools like Envision as well as its so-called plug-ins. So can you share a little bit about those integration and plug-ins and which one you found to be the most useful?

Jason Wishard: I found that some of the best integrations are with tools like Envision app. I think its ability to sync the actual screens on the fly out of the app is really great. So I literally make an update to a screen and within seconds, you will see it updated within your prototype. It’s a really great thing to have, especially if you’re doing usability testing on your prototypes in between testing sessions and you want to tweak something or maybe tweak the label, it makes it really easy to make those updates on the fly.

I think for some of the plug-ins that are great out there, GitHub is probably the best resource for that. If you do a search for Sketch plug-ins, you will get a whole slew of them. But a couple of my favorites are Content Generator, which allows you to automatically generate things like text and imagery on the fly. Another favorite of mine is Fluid—it allows you to easily take something you’ve designed in a desktop view and sort of gives some parameters around it and change the size of your art board, and then it will shrink your design down to something like a tablet or a mobile size.

My third favorite plug-in is Measure. So if you’re still used to the world in the design and development cycle where you actually pass off red lines, Measure actually allows you to create these really nice red line documents for pixel spacing the size of things, all kinds of stuff like that, that you would usually have to do manually. It does a lot of that sort of “automagically” if you will.

David Rhyne: So do you prefer Measure to Zeppelin? And if so, why?

Jason Wishard: I have to say that I think if you already have the process set up in place where you are using Zeppelin, I’d definitely prefer Zeppelin over Measure. I think Measure is a great plug-in if you quickly have to do a small chunk of a screen for a client that is not used to using Zeppelin, but I think at the end of the day, tools like Zeppelin or Simply.io are better solutions once you get those processes in place.

Julia Slattery: So Sketch 3.5 recently came out—have you all had the chance to get your hands dirty with it yet? And if so, what do you think?

Jason Wishard: For us, David and I have been chatting about this a lot outside of just this conversation, and really a lot of the updates over time between 3.4, 3.3, and now 3.5 really boil down to performance enhancements. I know for me, one of the biggest things over the years—I have been using Sketch app for about three years now—is really just that flickering of the screen. I don’t know how many times I go to move something in Sketch and it either crashes or because of the flickering, I lose it. I do seconds with every time I move that pan, which of course adds up to minutes and hours over time. So I think that was one of the big ones for me. And then secondarily, whenever you are trying to align something, like two strokes together, they would sometimes oddly overlap because the concept of rounding to a pixel wasn’t there, but that’s obviously now there in 3.5.

David Rhyne: I think whenever an update comes out for Sketch, I’m excited because they actually do add fairly significant features fairly regularly, but to be totally honest—and I hope somebody from what is it, Bohemian Software I think, is listening—Sketch is buggy as heck and it’s still buggy as heck. At this point, I pretty much feel like it is always going to be buggy as heck. But they do squash bugs from time to time and 3.4 in particular did quite a few of those. And like Jason mentioned with the flickering in 3.5, the bug fixes can add up to a lot of time savings.

Julia Slattery: So I understand that the two of you worked on a project for 3Pillar that was recently launched where Sketch was used to great effect. Can you share a little information on what that project was and how you used Sketch to get a product launched in about three weeks?

David Rhyne: Sure. So Sketch, as far as I’m concerned, was essentially the go-to guy for all of the design on that project. It’s not something that I can necessarily quantify, but just the speed at which Sketch allows you to interact with shapes and typography probably literally doubled to tripled the productivity on that particular project as I was actually designing. And then what I did at the end is I threw all of the assets into Zeppelin and it auto-created red lines for our front-end developer here on site, so he was able to get really, really close to pixel perfection in basically one iteration.

Jason Wishard: Throughout that project, I was the one that kicked things off from the wireframe and strategy standpoint and then David took it over on the visual design side. Sketch really allows you to easily set up symbols and styles, which I was pretty rigorous with as I did my wire framing. Granted it was lots of grays and blues, but then when David moved into actually doing visual design, it allowed him to already have that modular basis set up where he could quickly attack the actual visual design of things.

And then to sort of bounce off David’s point, when we worked with our internal developer, Matt Sich—who was one of our unicorns in-house, he gets development to design—it made it really easy for him to just jump in and get those red lines. And the other big thing was we made the decision early on, as far as what was going to be PNG, as far as 1x and 2x for retina, and what was going to be SVG as well, and Sketch made it really easy to not only explore those things quickly, but as Matt needed new assets, if we weren’t around, he could just jump in and export those things himself as well.

Julia Slattery: So where can people go if they want to see the fruits of all this labor?

David Rhyne: Yeah, it’s actually the design portfolio really for 3Pillar. So you can check it out at design.3pillarglobal.com. We have about a dozen case studies there, and a lot of impressive work that we were able to present up there. It’s pretty cool. A lot of work went into it and it shows. There is a lot of cool stuff there. So take a look if you get a chance.