Design Production Process

I have been slowly building a process for the visual design phase of digital projects. It helps me keep things straight in my own head and is fairly self explanatory for any teammates who might be involved.

I work with 3 files and one folder named Review.

  • [PROJECT NAME] Concepts.sketch
  • [PROJECT NAME] Approved Direction.sketch
  • [PROJECT NAME] Design.sketch

[PROJECT NAME] Concepts.sketch

This file is what I use for the initial concepts for a project. Basically I do all the variations for a design with art boards on a single page. It’s very important to name each art board descriptively—something you and the client will understand—and I like to make sure each art board is prefixed with a double digit number.[^1] Here are some suggestions:

  • 01 Concept 1 | Homepage
  • 02 Concept 1 | Blog Entry
  • 03 Concept 2 | Homepage
  • etc.

Every time I’m going to present a design to a teammate or client I output every art board on the page to a dated folder in the Review folder. After the presentation/critique I will rename the current page with the date of the presentation/critique, duplicate it, and rename the new copy Current. This way I am able to see a snapshot of the design concept each time other people have had input. This is invaluable for reference as the project progresses, because you can refer back to the same file to see where decisions were made, revive ideas that had been abandoned. By the time a design concept is approved I have a timeline of the whole process.

[PROJECT NAME] Approved Direction.sketch

Once a design direction has been chosen I then duplicate the file [PROJECT NAME] Concepts.sketch and rename it [PROJECT NAME] Approved Direction.sketch to the name. Then I open the file and delete everything but the current page, I have my concept file to refer back to if that should be needed. Then I create pages for all the pages/screens that the project calls for and move any art boards from my approved concept to the appropriate page. This is where I flesh out the design to its final[^2] form. The pages in the Sketch file might be named something like this:

  • Homepage
  • Blog Landing
  • Blog Entry
  • About

Each art board is numbered with double digits for the same reason as the Concept file. There is a difference though. In the Approved Direction file I continue the numbering from one page to another. This can become cumbersome with large projects as you will need to renumber art board titles throughout the entire file before you output, but it also makes you slow down and know what you’re presenting. These forced pauses are a good chance for reflection as the project progresses.

On each page I usually have a handful of art boards to design all the interactions and any variations for the pages within the overall approved design direction. The art boards I output may look something like this.

  • Homepage
  • 01 Homepage
  • 02 Homepage | Open Nav Dropdown | Variation 1
  • 03 Homepage | Open Nav Dropdown | Variation 2
  • Blog Landing
  • 04 Blog Landing | Grid Layout
  • 05 Blog Landing | List Layout | Variation 1
  • 06 Blog Landing | List Layout | Variation 2
  • Blog Entry
  • 07 Blog Entry | Image Header Layout
  • 08 Blog Entry | Pure Type Layout
  • etc.

With all the art boards numbered and named logically I output them to a dated folder within the Review folder.[^3] As the design progresses and variations/options are abandoned, I delete any appropriate art boards without deleting their objects. This way I can always refer to them but they aren’t being accidentally output in the next set of mockups.

[PROJECT NAME] Design.sketch

Once the design is approved and development is set to begin I duplicate the [PROJECT NAME] Approved Direction.sketch and rename it [PROJECT NAME] Design.sketch. In this new file I delete extraneous objects from abandoned ideas, clean up the art board arrangement, and double check my layer names and organization[^4] in preparation for hand off to a developer (or myself in many cases). This a clean file for getting measurements and exporting assets. I tend not to worry any future edits to this file since most design tweaks from this point on will happen in code. If a new section needs designing I will typically duplicate this folder and so I have something to work from and move it to a new file/folder structure in the same format and treat it as a new project.

Review Folder

This folder is where all the mockups I output live. The folders are dated and, if needed, numbered. Browsing through these folders you can see a project progress from beginning to end and refer back to different stages of a project at will. It is great for working with clients and understanding the points where decisions were made in a project.

A Caveat

One of my favorite things about Sketch files is that I can have large files that contain many different variations without doing the usual Photoshop thing where you have the same design file 40 times with different dates and an increasing number of Finals appended to the end of the filename.

However, there is a downside to large Sketch files. It’s not the size of the file itself, but OS X’s autosave. Every time the file autosaves, which is a lot, a whole new copy of the file is created. They all sit in a folder hidden from view and eat your space up. So at the end of each project, and sometimes before if I get hard drive space warnings, I follow a byzantine method to delete all the old versions. You can find instructions how to do it online, but with each version of OS X Apple makes it more difficult to do. Small hard drives and Sketch autosaves do not mix well.

A Process Made for Presentations

This is how I bring a little order to the chaotic world of design production. It is not the only way and may not be the most elegant or automated way, but it is pragmatic and built around the way designs are actually used, in critiques and presentations. The numbering and output system help create a straightforward presentation, that can be easily referred to in any future presentation. As you are numbering art boards your are starting a plan for what you will show and how you will do it. Try it out and let me know if there’s anything you think could be improved or, better yet, write a blog post responding and sharing your own process.

[^1]: The numbering is very important. This allows the JPG mockups you output to always fall in the correct order for presentation. It also makes it easier to see if you’ve missed something you meant to output.

[^2]: In interactive work idea that any design file, no matter how fully rendered, is actually final is silly of course. All designs will see alteration as they enter development and run into the real world.

[^3]: If I am outputting more than one set of designs per day I just start numbering the folders so each set of mockups has its own folder. 2014-10-02 1, 2014-10-02 2 for example.

[^4]: Everyone knows you should do this as you go. However, I’m not going to lie, messing around with naming Sketch layers, (previously Illustrator and Photoshop) is often at the bottom of my to-do list. I know I should be better at this the same way I know I shouldn’t eat a cheesesteak, tacos, cookies, and an omelette on the same day.

Design Process