Blacksmith working hot iron — Jeff Kubina

How we work mobile design 2017

6 min readJul 18, 2017

Two years ago I published my first Medium article on how my Mobile App Design pipeline works. Back then Sketch sucked and design automation was still a new concept with most designers laying out assets and specification sheets painstakingly … by hand.

Why automation?

Better tools allow less designers to do more high quality work. This in turn allows organizations to produce higher quality products and services. Or as the “Forest through the trees” saying goes, to build better businesses for the planet rather than whittling pretty designs endlessly.

Lets dive into that deeper. When I started out in Photoshop and managed many master files, mistakes were made. And its hard to catch a mistake when you have +2000 assets and one of them has an extra “l” or is off by a pixel. There’s my time wasted drudging through manual creation of all this crap + the back and forth troubleshooting with any number of developers when things blow up and mistakes render incorrectly. That is, if we caught them before they shipped live!

Enter Sketch App

Available only for macOS and having gone through multiple revisions, Sketch has finally matured to a less buggy, more stable, and waaay faster UI/UX design tool than Photoshop. Simply because its designed for software design and is vector based, unlike Ps (which was designed for editing photographs and creating digital paintings) we no longer need desktop workstations with massive GPUs and shit-tons of RAM.

Sketch files are organized by pages, which contain screen artboards sized at base density for your target platform. You dont even have to think, just pick the device you want by name and Sketch will generate the right size artboard for you to use for iOS and Android. Easy! There are also layers for shit that goes in artboards but I rarely even need to micro-manage those now that Sketch takes care of moving layers between artboards as I move and copy objects while working visually, instead of fighting with the system like I did in Photoshop.

When youre ready to export mockups or assets just set up the multipliers you want and this software will automatically export all your needs in crisp perfection (as long as you designed in vectors using mathematical shapes)

On a side note: Theres also a new Sketch competitor called Figma, which does things a little differently in that its entirely cloud-based and allows multiple team members edit files simultaneously like Google Drive.

How to SPEC without specs

In the pre-history of modern software design spec. sheets were artisanally crafted, with each measurement getting manually multiplied out to the right density, its subject drawn (for example that it was referring to a distance between two objects) and individually labeled. Newer plugins such as PNGexpress for Ps and SPECCR for Illustrator made this way better in that they were semi-automated. You selected the vector object/text whos info you wanted auto-spec’d or two objects you wanted to measure and hit one of several buttons to do so.

The guys over at Zeplin (from Turkey) built this lovely tool that plugs into Zeplin and just automates the shit out of everything! Make your assets exportable, select your artboards and tell Zeplin the density youre working on = presto everything is available to your developers to mouse over to view specs, and click to download assets. Spec sheets can now also be organized, updated with version history notes and commented on by the team.

Prototyping

These same Sketch files can be linked out to prototyping tools such as InVision, Marvel and Framer which all have their own auto-spec solutions to various extents. These prototyping tools are also worth mentioning as part of the design pipeline for their contribution to UX design, consensus building, interface testing and validation. Plus InVision and Marvel are both hella fast while Framer runs on Java Script and is freakin’ powerful!

Go forth and GitHub yourself

So you have multiple Zeplin master files and theyre syncing to one or more Zeplin files where theyre fully auto-spec’d and sliced up for assets that are served to your developers. Thats still not comprehensive enough to track all the design work on a project without making assumptions that lead to mistakes.

At the office we use GitHub for development code. There is a less known feature within GitHubs interface on any given GitHub repo called a Wiki. As a designer I can set up a wiki where I can further describe and update the business/UX logic underpinning a project as well as the status on any WIP areas of the application. Heres the brilliant part — Zeplin file are linked to this documentation so that it becomes a living/breathing document with no room for error due to outdated comps and no mistakes made due to assumptions looking at possibly outdated tasks with likely outdated mocks and/or specs!

Design and development tasks can be tracked in GitHub as well. Or if thats not your style — on another project I use Asana, which in many ways is more robust than JIRA and like Slack free, unless you need specific paid features.

Version control against fire, theft, coffee, etc.

So you have these Sketch files which are now linked into everything, and are in the literal sense more valuable than gold diamonds on some projects. Using any number of version control solutions such as Google Drive, Box and DropBox on an enterprise level where they include unlimited storage and version history/recovery allows for these files to be stored locally as well as backed up to an external server in the event something tragic like Ukranian ransomware visits your officeware.

I STRONGLY recommend you use some form of version control on your design projects.

I do not recommend using Google Drive (issues with versioning last time I used it professionally) or AeroFS (sync worked poorly between two design teams LA-Texas, and destroyed one Macbook Air by mindlessly over-filling it with files). SVN is outdated, centralized and too clunky. DropBox Business is what I use currently and it has issues as well in that its only conflict resolution is to throw up a pop-up to one or another designer to decide which version to blow away. This in turn has resulted in us organizing our files and project in a way that we generally work in separate areas and have to label files with owner names.

There are new design-centric version control solutions on the horizon which may address design-specific versioning issues.