The UX of Design Files

We’ve all jumped into a Sketch file full of art boards, that are named “Copy of art board one”, or other ambiguous names, but little else in the way of organization in naming things.

We don’t always consider the downstream ramifications of where our screens will surface. Uses like prototyping tools, InVision, Slack, Zeplin, even email are areas where your exported screens will surface.

Let me ask you, if I chose a dozen of your Sketch artboards and exported them, would they stay in logical order in the export folder on my desktop? If I pushed a bunch of those screens up to Zeplin, would they remain orderly? What about Invision?

If you’re starting to sweat, it means the answer is probably “no”. It’s funny too, we put so much time into user experiences but forget about the experience of our team, the users of our source materials. This is why keeping some semblance of order in Sketch is valuable, it considers the team experience in relation to the artifacts you create by lowering the friction of understanding how you organize yourself.

Despite being a bit of an upkeep chore, I’ve developed an effective way of keeping Sketch art boards organized, for viewing screens in order, and providing a common naming for screens that team members can easly reference.

Enter Serialization

My serialization technique is simple: The root level or beginning of your experience is 0.0.0.0. In the example of the fitness app below, sign in is the beginning.

For each major section of the site or app, I number the first decimal position. So in the case of the fitness app, my next major section is the Onboarding, which users will see the first time they sign in. Since this is the first section after home, we’ll call this or 1.0.0.0 — Onboarding.

Note the number and the name. The number handles the ordering of the art boards both in Sketch and when they’re exported as files. The human-readable part makes screens quickly identifiable, particularly when there’s a bunch of screens that look similar.

Let’s add a few more sections

Let’s add a couple more major sections of the app to demonstrate how they can be serialized.

Sections 2 and 3 of the app.

Simple. As new screens come in, we just increment from 0.0.0.0 and 1.0.0.0, to 2.0.0.0 and 3.0.0.0.

Subsections

What if we need to drill down into by tapping that explore button?

For sections within a major section, I use the second decimal. 3.0.0.0 for Daily Stats, 3.1.0.0 for sections that live under it.

Nested subsections

What if we could go down one level deeper in this section?

Drilling down from 3.1.0.0 we find 3.1.1.0, a “leaf page” which is something I call pages that live at the end of branches of architecture such as this.

States

Everything after the first decimal point suggests a section, subsection, or state. What about the fourth decimal point? Well, in the case that an area has states: leverage the last decimal place.

So, back on the onboarding screen, each of your slides can be a state, starting with 1.0.0.0 as your default state.

I find that these four decimal points usually suffice for most of the iOS, Android, and web sites I work on, but if you find yourself working with deeper architecture, you can use five decimal points. This system should be flexible, non-dogmatic, and responsive to change, so if three decimal spots work, then do what works.

Reordering screens

If I want to move 5.0.0.0 up in between 1.0.0.0 and 2.0.0.0, then everything after 2.0.0.0 needs an update to it’s numbering (2 becomes 3, 3 becomes 4). Since I can’t batch or ripple edit numbered artboards in Sketch, it’s a problem. I described this problem to an engineer I work with he suggested a slight tweak that’s a throwback to Fortran, a programming language developed by IBM in the 1950's.

Fortran used double digits to serialize, which is pretty sweet. Employing this method, when I move 50.00.00.00 between 10.00.00.00 and 20.00.00.00 all I have to do is rename 50.00.00.00 to 11.00.00.00. This keeps all the screens ordered properly, and only requires me to rename the 50-series screens and update them in my prototype.

A little organization, big gains

So I’ve established a way to give yourself some constraints when it comes to organizing your files. For this little bit of fastidiousness, there are gains.

Exporting artboards becomes really slick now — When I grab a bunch of art boards and export them in PNG format to a folder, they’re all in sequence. This makes it very easy to drag-and-drop into InVision for prototyping, or for sending to someone in a message.

Further, exporting from Sketch to Zeplin becomes wonderfully organized because Zeplin will order your screens as you name them. The person viewing that screen can page forward and backward in Zeplin moving through the nicely ordered, serialized screens. This makes it clear to see what happened before that screen, and what happens after that screen.

Final thoughts — This process assumes you have a somewhat strong idea of your app or site where you can be intentional about flows, architecture, and how things are structured. However, even if you’re still working through high-level ideas of your design, thinking about this method may help anchor you to a structure and organization that keeps things focused. Perhaps you can number things at a high level using double digits to start; 10, 20, 30, 40, and this starts to flesh out high level structure.

No matter how you choose to organize your files, do it conscientiously by thinking of those who might pick up your work. You never know, the person picking up the file and trying to decipher it someday in the future might be you.

⍲