Last time we wrote about Sketch we had just started to discover the benefits of this powerful design tool. We also promised to explain how we used the application to improve the lifecycle of a project once we had a great example. Surprise! We have a great example. Here’s the story…
A recent customer contracted a few of our team members to work with their design team to help with a sudden spurt of growth. To start, we observed how they were currently doing things in order to better understand their design processes. Not long into this exercise, we recognized opportunities for improvement.
Challenge One: Tons of Massive Files
The design team was using Photoshop for a very extensive app that had a mobile version, tablet version and web version. Not only did this app have three formats, but it also had so many features that each was broken out and worked on as its own entity over several two-week sprint periods. This process created a massive amount of Photoshop files. And since this was before Photoshop had artboards, the team still couldn’t keep everything in one psd file because it was just too large—raster graphics simply wouldn’t respond quick enough. (Even now that Photoshop does have artboards, it’s still an insufficient solution: files are still too large to work with efficiently.) If something as simple as a font color had to change—which always happens in the lifecycle of every project—the team had to manually (read: painstakingly) find every instance of the font by opening each file and scanning through them to check for it. The process even required designers to check layer comps and layers that could be out of view. This task could take up to an entire day, sometimes more.
Challenge Two: Manual Processes
We also recognized that the development team was consistently waiting for specifications and assets. They sometimes even had to start on a feature before the specs were finalized. This was partially due to how long specs can take a designer to complete when done by hand. Labeling every single dimension, margin size, padding amount and font attribute can be tedious. So the developers would go ahead with their work, guessing at specs. When the specs finally came, they were almost always different than what they had guessed and then required designer clarification. The result: lots of dev and design time wasted.
Building a digital product?
Exporting all of the assets at all of the needed sizes for Android, iOS and web was also a huge task. The client was using an imported action in Photoshop to resize assets from a Photoshop file in which they had manually brought in all of the assets and manually sliced. This was simply the normal way of doing things.
Even though these actions were automated, they required a very manual process. Someone had to make sure the file contained everything the devs needed. Someone had to make and name every slice. And then someone had to run about 10 different actions that had to be carefully associated with different export folders that corresponded to the asset size. The entire process was a woefully inefficient way of communicating important information between designers and developers. But what’s worse is that these manual processes ended up taking a major toll on the project timeline and budget.
These manual processes ended up taking a major toll on the project timeline and budget.
We Solve Problems
So much of what Arcweb Technologies brings to the table revolves around expert recommendations. We don’t sit back and watch issues or challenges happen. We tap our collective product design and development expertise and recommend solutions that will produce tangible outcomes which, in this case, had to do with timelines and budgets. To solve the two challenges we introduced Sketch and provided clear context around why we were doing so.
Solving the Massive Files Challenge
We had to fix the multiple file issue and make simple universal changes a one step process. Sketch’s native features solve both of these issues. Because it’s a vector program, the app supports a ton of artboards without slowing down. That’s incredibly useful when you’re using raster images. (If you’re wondering why we needed raster images in the first place, remember that Photoshop was made for editing photographs. It is not ideal for text, and it is certainly not ideal for a design that changes in size from mobile to tablet to web! Raster images cannot be enlarged without losing quality either.) So while Illustrator could also support multiple artboards and is also a vector program, only Sketch was made with a UX designer’s workflow in mind. When you first open a new document in Sketch, you have the option to open a template for a variety of devices. Sketch also provides a grid system, something you would have to set up on your own in Adobe’s products.
Only Sketch was made with a UX designer’s workflow in mind.
These are expected features in a UX design product, but the way in which Sketch handles text styles is truly astounding. The best way to use a text style is when you create the first artboard. It takes some extra thinking up front, but it is nothing compared to how much time it saves later.
As soon as we created a new text style, such as “header 1” or “body” or “label text,” we saved it as a font style. Then, every time we needed a font with those same attributes (font, color, size, weight) we made sure to assign it the same style. If you copy text and change the word, the text style remains! That is the greatest feature of Sketch text styles.
You can use symbols in Adobe, but as soon as you change any word in the symbol, you have to break the symbol. You would have to use so many different symbols to compete with this Sketch feature that it would never end up saving any time anyway. After creating hundreds of artboards, imagine how satisfying it is to change something as simple as body text color with just a few clicks. (And did I mention you can create those artboards in Sketch in just one document with zero lag time? Because you can!)
While it’s pretty evident that Sketch text styles are life-changing for designers, implementing this solution reduced file quantity and ultimately turned a potentially days-long task into something the design team could execute in one second. That’s so valuable when you consider how designers can’t pick things like final color choices at the beginning of a project. At the beginning of a project, content and layout are more important. But because of Sketch’s amazing layer style capabilities, things like changing an h1 font color on hundreds of artboards in the future can happen in seconds. Think about it: something that used to take a day or more and could drive a sane person to the edge of a cliff is now a one-second task.
Something that used to take a day or more and could drive a sane person to the edge of a cliff is now a one-second task.
Solving the Manual Processes Problem
And since we couldn’t forget about the developers dispossessed of proper specs and thus wasting gobs of time, we again turned to Sketch. Specifically, we explored two options to make the designer-developer handoff a more efficient process: Sketch Measure and Zeplin.
Sketch Measure is a plugin that allows you to select two objects and automatically place a dimension between them. You can also select text and it will automatically generate the text attributes. These two shortcuts save a huge amount of time because the designer does not need to collect the information and then manually input it. It turns a week’s worth of work into a day’s worth. That said, Sketch Measure does require that each dimension and attribute be created individually. It also requires the designer to make sure everything needed is displayed.
While Sketch Measure was a great start, we knew we could streamline the process even further with Zeplin, a Sketch add-on service that can condense a week’s worth of work into a minute. With Zeplin, the designer simply imports their Sketch file and sends a link to the developers to review. This eliminates ALL spec creation work for the designer. The developers are then able to view an interactive display of the design in which they can hover over each element and see its size, any text attributes, and relative padding to elements around it. The developer can even select and copy the text content to paste into the code. With Zeplin, nothing gets missed, because the developer can see every spec that could ever possibly exist.
Zeplin can turn a week’s worth of work into a minute’s worth.
The best part? Zeplin does it all automatically. But that’s not all! The developer can also choose how the values are displayed. They can view them in dp for Android, or 2x or 3x for iOS. Designers can also export all the assets into Zeplin and the developers can choose the sizes they need. Zeplin does more than just specs: it creates a design guide that otherwise would also have to be done manually, requiring the designer to go pick through the design to find everything used. The design guide lists out all colors and fonts used. Zeplin also allows for notes to be placed in the designs to help further improve communication between designers and devs.
And guess what the developers thought when we showed them all this?
They were amazed and excited of course! All they want is an easy and efficient way to get the information. Zeplin does just that.
Problems Solved
To recap, we observed processes, recognized issues and then made and implemented real solutions with real results, namely time and money saved. Yes, we love Sketch, but affinity for a given tool doesn’t really matter. What matters is that we as a consultancy have the confidence to make recommendations based on experience and expertise. Product design is rapidly evolving and part of our job is staying in-the-know about new tools that can do things like reduce a week’s work into a minute.
