Get it Done: Breaking Down the Production Process
By Kat Craig, Designer
Take a look at your favorite website, app, or mobile game. Does it load quickly? Are those images nice and clear? Are they in the right place? They didn’t get there by magic folks. This was done by a process that’s rarely spoken about, and honestly, not always done very thoroughly. However, if you want your project to get out of the door on time and look great, you would be wise to add it to the quick access menu in your brain for safe keeping. I am talking of course about production.
In this article I’m going to explain best practices for getting production done easily and smoothly starting with important questions for the producer, both creative and technical directors, and ending with final export and visual QA/cleanup. I’ll also discuss the best tools for faster and more efficient production, such as Sketch and Specctr. Once you get a handle on production it will make the rest of the team’s jobs easier and they will thank you…maybe even call you more often than their mother-in-law.
The tools: learn them and love them.
The power of Sketch.
One of my favorite pieces of software is not only great for UI design, but AMAZING for production. Feast your eyes on a little tool called Sketch. I could list hundreds of reasons why it should be used for design, but in the interest of an article on production, I’ll stick to the main points.
- Exporting is a breeze. You can export assets in multiple sizes and formats with a click of a button and the quality remains intact. Not only that, but you can select all of the layers in a file once and export them with virtually no lag. That’s right folks, no file bloat!
- Plugins are your friends. One of the many reasons Sketch is so great is the fact that there are many plugins that make your job even easier and faster. One of my favorites is Sketch Measure. Not only will it export the specs for you, but it will also generate an html document of the file that devs can use to pull the specs by just clicking on anything on the document. This was such a time saver and it also made the dev very happy.
Use Specctr for ‘traditional’ redlines.
If actual redlines are still needed it will get done a lot quicker and pain free with the use of Specctr. It is really simple to use and it gives you plenty of options for giving measurements of elements, call outs for copy and color, etc. One downfall is that it’s only available for Adobe products, but if you’re using Sketch check out www.sketchappsources.com for a plugin that will produce similar results. Here are a couple of important things to note about Specctr.
- Measure percentages of a page. Often times you’ll need to let your devs know the spacing between elements on a page and pixel measurements won’t cut it. Enter percentages. Specctr can do the math for you with little set-up.
- Keep your layers neat. Specctr does a great job of keeping your files organized by creating a group at the top with all of the spec layers. It makes for cleaner files and easier edits to the spec layers themselves.
Get the deets on the project, give deets on how to make it better for production.
Before you begin pushing pixels you want to get as much information as possible from the creative and technical directors on the project. This will help you make informed decisions on the best course of action and production will be smooth sailing. You’re also going to want to speak to the lead producer on the team to see how many hours they have you booked for so you can determine if those hours are enough. Here are some questions that you’re going to want to ask the key members on the team:
For the creative director:
- Who is the archetype?
- What devices will this be on? (desktop, mobile, etc.)
- What software is being used and why?
The first question is good to know for your own information, to get a better sense of who will be using the app, website, etc. The next two questions are crucial. You want to know if this project will be seen on multiple devices because assets will need to be exported at sizes that will fit those screens and at resolutions that will work well on those screens. Obviously you need to know what software you’re going to be working in, but this could also be a great opportunity to suggest using Sketch and explain why, noting that it would make production flow more efficiently and quickly, which will help the devs, which in-turn will get the project shipped faster.
For the technical director:
- What specs do you need? (redlines )
- What assets do you need?
- When do you need the assets?
Get cozy with your dev(s) and the technical director because you’re going to be working with them a lot and you want to be on their good side. These questions will give everyone a clear understanding on what is needed from either side and things will go off without a hitch.
For the producer:
- How many hours have been booked for production?
Your producer is your go-to person for all things related to timelines. They are also the buffer between you and the client. It’s best to speak to them after you’ve spoken to the creative and technical directors so that you’ll have a better idea of how much time you’ll need to get everything done. If you find out that you need more time let your producer know right away so they can adjust for that.
The production process: get it done right the first time.
Now we get to the meat and potatoes of this article…how to do production quickly and efficiently. These steps are by no means written in stone, but I find when I use them it leaves little room for error and more room for happy co-workers.
Production prep: recipe for success
When following a recipe you don’t just throw everything into a pan and hope for the best right? You have to get all of your ingredients together, chop your veggies, etc. The same goes for production. Setting up your folder structure for the project will keep you organized and in control of the overall production process. At the start of the project the producer or creative director will generally have a folder started. If not, ask if you can get it started. Within the main project folder add a folder named ‘Production’ and within that folder you will add a subfolder for each page/layout of the project. This of course will grow as you go along, but it’s a good starting point. Once those are created you will then create folders within those for comps, source files, redlines files, html files, and of course, assets. You may not end up using all of those but they’re already setup for you if you do. You can break down the assets folder even further by adding folders for the asset type (jpeg, png, etc.) and the sizing. You’re done! That took what, all of 10 minutes? Next!
Housekeeping: clean up the files before diving in.
Before you start exporting assets and creating redlines in your project, go through everything with a fine-toothed comb and make sure all of the assets (including text) is on grid, is the correct size, etc. At the same time, ungroup the asset and make sure its on its own layer and name it appropriately for the project. Check with your dev on this as they may want the files named a specific way. Normally I name files like this: “img_circle_blue” or “FPO_txt_header”. This step can be a bit tedious at times, but it’ll save you a big headache later of having to do it again. Plus, if assets are not on pixel when they’re exported, it could cause them to look ‘off’ in build.
Redlines (or orangelines, bluelines, whatever).
After your files are cleaned up, your dev may want some redlines for reference. As I mentioned earlier, Specctr would be your best tool to get this done much quicker than painstakingly drawing each line and typing the measurements. The tool is pretty self explanatory so I won’t go into detail here, but I would suggest adding a layer filled with white and lowering the opacity a bit so you can see your redlines better. In my example above I used orange since it was a bit easier on the eyes, but you can use traditional red if you are so inclined. Once the redlines are completed, export it as a jpeg or pdf and you’re good to go.
You’re ready to export!
At this point your best bet would be to work with your dev and double check sizes and file types the assets need to be for the project. This, of course, will all depend on what devices the project will appear on. Sketch has a handy feature that lets you export assets at multiple sizes at once, in a variety of file types. Just select all of the layers you want to export, click the plus icon in the inspector panel at the bottom to add sizes and formats, click the export button, and you’re done. This is one of the reasons why I love Sketch so much, it’s so simple to export. I would suggest resizing photographs in Photoshop though as Sketch is mostly a vector based program. We’ll get to that in the next section.
Compress your images so your dev won’t hate you.
We all love beautiful hi-res imagery in our apps and websites. But if we upload those high res images, all you will see are not-so-beautiful loading screens and your potential customers will leave your site, or close your app and never open it again. This is bad. You don’t want this to happen. There are a couple of things you can do to keep your images looking good, while keeping your file size down. If you can help it, export your images as a jpeg rather than a png. Pngs are much larger in file size and will bog down the site or app. If you need to export it as a png however, there are a few websites that you can use to compress them to a smaller size without losing quality. One of my favorites is https://tinypng.com/. If you have large hero images for your website, a fun trick that a dev told me about was tripling the size in Photoshop then exporting it with a quality of zero. Sounds crazy, but if you test it in build it looks just like the original comp at a smaller file size.
Run some visual QA.
Once you have your assets exported and put in build, take a few hours to sit with the dev and lead designer and go through all of the assets and see how they’re rendering, take notes, and if anything needs to be updated now would be the time to do it.
Final smoke checks.
We’re at the home stretch! At this point all of your assets should be exported, redlines done, etc. Before you pass everything off to the devs to place in build, do one more sweep of all of the assets and documentation to make sure all of the sizes are correct, the naming conventions make sense, etc. In production you always want to go through everything carefully so you won’t have to go back and do everything again. However, if you followed these steps you shouldn’t see too many problems.
That’s all folks! Well, not really. It would be in your best interest to stay close by if any assets need to be changed, but the hard part is done. Once you have this process down, I can almost guarantee that your production will be much easier and quicker. You don’t realize how important production is to a project until you actually go through it yourself. It’s the go-between design and development, so it requires you to wear a couple of different hats along the way. But to me, that’s the fun part. This, my friends, sets you on the road to unicorn status. Now grab that production process by the horns and show it who’s boss.