Improving Design to Development Workflows: Developer Guides

Posted on Oct 24, 2016 in Design
Kaitlin Portrait
Kaitlin Powell
Lead User Experience Designer

Let's face it, documentation is not fun, but it's something that every designer should be taught in school. As a lead designer, I have to be able to communicate with others to execute my team's designs. 

Moby tends to work on larger, more complex websites and mobile applications. On these projects, a lot of decisions about the functionality happens during the UX and design process which the developer may or may not be a part of. To add to the confusion, the assumptions of how the product should work are not always obvious. As the project progresses I become the single core repository of these assumptions. At some point, all that stuff that's in my head has to come out so my developer can build it.

That’s where documentation in the form of developer guides come in. They provide a quick hit of design plus functionality, written out and collected in one place for the developers to reference while working on the project.

Developer guides with screen shots are extremely valuable when building out an application. I can quickly see how each screen should look and that communicates most of the key information about the features I need to implement.

How to Create a Developer Guide

Now, let's get into how to make your own developer guide. Pictures are worth a thousand words, so work from screenshots. Let the images do most of the talking. In this document you should explain the logic of the product. What state changes does this button go through? Where is the user sent after they complete this action? What parameters are in this filter dropdown? These are all questions that the developer will need answered at some point, so it makes sense to lay it all out beforehand. 

Just be careful you're not going overboard. Obvious design choices don't need to be spelled out, but hidden functionality does. Anyone can see the button is blue with rounded corners, but only you know the awesome custom interaction that happens when you tap it.

A page from the developer guide for Pocket Prep

Making a document that explains the major interactions for even a small app can be daunting, but I promise it will make you a better designer. When I'm putting together a document like this new questions always come up. When that happens, I can sit back and think through it. This is a much better environment for problem solving (not to mention easier on the budget) than being surprised by the question near the end of development.

This document doesn't have to be pretty. Just make it functional. Don't forget the table of contents and page numbers for easy reference later. Keynote is my personal favorite for this but InDesign would work as well. Whichever program helps you create this document in an efficient manner is the one you should use.

If this basic form of documentation isn't part of your process yet, give it a try on your next project. Just remember to ask your developers what they think. Together you can dial in the level of detail to match what your developer needs.

Download the Template

And now, what you really came for: templates! Below is a downloadable keynote file with the basics all ready to go. Just add your awesome content.

Download the Keynote Template

Templates are licensed with Attribution-ShareAlike 4.0 International.

Get caught up by reading my first post on how adding asset sheets to your workflow will make your developers very happy or jump to my last post about designer and developer collaboration.

Improving Design to Development Workflows: Collaboration Improving Design to Development Workflows: Asset Sheets