App Development Essentials: Design Collaboration with Zeplin

Like hopefully most service businesses, we continually look to streamline our processes and deliver a better product to our clients. As an app development company, one of the challenges in our development cycle was the handoff from the design team to the engineering team. After a lot of experimentation, a solution was discovered that continues to eliminate time and frustration.

There’s no point in being the best app developer if your design sucks, and it’s equally futile to be the greatest app designer if your vision is not communicated correctly. Collaboration is at the heart of a successful app development cycle, and we have spent the last few years fine tuning our integration processes to maximize our product.

Pixel-perfect designs deserve pixel-perfect execution, but important information and assets can be lost in translation. Zeplin is a collaboration tool for UI designers and front end developers that takes away any ambiguity.It lets developers know when elements in the design have changed without a lengthy email or Slack exchange, it places all necessary assets and designs in one depository, and it creates a style guide that can be used by developers and designers alike.

A quick word about Sketch

We can’t talk about Zeplin without first mentioning Sketch, because without it, Zeplin simply wouldn’t even be an option. Sketch has become the main design software that we use here at 3Advance. Sketch specifically focuses on interface design; from artboards with specific sizes for iOS, Android, web, and mobile, to features that speed up production of assets for developers. At 3Advance, we moved to Sketch from Photoshop over a year ago, and we can’t recommend it enough.

Why do Designers use Zeplin?

Zeplin makes it easy for everyone on the team to access up-to-date design resources, and be notified of any changes made later.

Designers upload their visual designs straight from Sketch and add them to project folders in Zeplin. When a Sketch file is updated, so to is the Zeplin file. And the best part is that  annotations are automatically added to the designs: hex codes, margin sizes, paddings, and images (as PNG or SVG) are all there.  To find the specifications of certain elements, simply select the elements you want  and all annotations and any downloadable assets will appear in the right-hand column. Having the downloadable assets right there for the developer as they work through each screen is my favorite feature. It allows the developer to see which elements they should use without having to guess from just a file name. You can also directly copy any styles and content straight from the design—the developer no longer needs a separate content file.

But what about Sympli—our DC app developer neighbors?

At 3Advance, we love the #DCTech community. We’ve been supported and we’ve given back, again and again. So naturally, when we heard about Sympli, headquartered just a mile down L St in Washington DC, we jumped straight in. It worked. Really well. Sympli is—simply fantastic. But the battle still needed to be fought, and we needed to choose a victor that worked best for our app development process.

Zeplin and Sympli are exactly the same price and have most of the same features. Both are very user friendly and get fast updates. Both also offer a preview of the necessary units ( for example, pt for iOS and dp for Android). For web projects, both include a CSS generator. The assets can be exported straight from the app as PNGs and SVGs for Android and PDFs for iOS.

But a few features tipped the scale in favor of Zeplin:

1. Zeplin works as both a desktop app and an in-browser app.
   This means that when we’re working with other development teams or clients, they will have access to the designs without going to the trouble of downloading an app. This also means that Zeplin works in offline mode within the app, which is a major bonus.
2. Zeplin’s usability is better.
   Getting set up and understanding what to do was easier than it was with  Sympli. Though we don’t always mind a learning curve, our clients often do, so this was beneficial.
3. Zeplin has a Grid preview.
   This is perfect for making the designs pixel perfect. Sympli does not offer this feature.
4. Zeplin’s CSS generator is slightly superior.
   It has additional styles, particularly within typography. Line-heights and letter-spacing are the two that stood out the most.

How does this help our web and mobile app clients?

1. Time = Money.
   Using this combination of Sketch and Zeplin, we are creating a perfect set of guidelines. Our designers only need to do a few more clicks while the developer saves hours recreating every screen in code.
2. Pixel-Perfect Design.
   You care about your product, and so do we. Using these tools enables us to make sure that the final product looks like the designs that our clients have seen and signed-off on. Perfect down to the last pixel.
3. Marketing Usability.
   Clients can have access to this depository should they wish. Any elements that they would like to use for marketing purposes can be found quickly and easily. If they want to know what colors or fonts to use, they can find them without having to wait for us at 3Advance to get back to them. Our clients also appreciate that they can hand over the style guide to any marketing agencies that they are working with, and that the style guide will continue to be updated in real time.

In conclusion

Adding Zeplin into our workflow has, without a doubt, streamlined our handoff process. Our design team and engineering team are way more in sync, and genuinely happier. Our own user-experience has improved, as has the user-experience within all the mobile and desktop apps we develop. It’s not perfect—we’re still hoping that Zeplin includes source control integration soon—but it’s damn close. Zeplin, thanks for making us better app developers.

 

3Advance is an app development company in Washington DC that helps startups, non-profits, and other businesses turn great ideas into beautiful, simple mobile and desktop apps. If you’d like to learn more about how we can help you create a better way forward for your company, drop us a line. We’d love to hear from you.