How do you create a product design documentation?

Question

I'm working as junior UX/UI designer in a company. I'm in charge of (re)designing the application, and setup some design in the company process.

I want to create some sort of "design documentation" for the developers, but I don't know if there is some tools already created for that out there.

My goal would be to centralize the designs with explanations about how and when to use them, alon to a snippet of code to show how to create the component (css classe, HTML structure).

Is there a tool for that ?

Thanks!

Answer 1

Sounds like what you need is a style guide.

I've made a couple of these before (fair warning, it's a ton of work to make them correctly).

Personally, I use InDesign to put together documents like this. It gives you a lot of freedom with how you organize the content.

I've also seen a lot of brands publish theirs online. That makes sense if you have a ton of people in and out of the company who may need to access it.

As for a "how-to" on creating a style guide, I strongly encourage you to look up the style guides of big companies or any company you really like.

This link will take you to a section of one of Microsoft's style guides. Microsoft seems to split up their style guide depending on the application in question. If that makes sense for your company, you might consider doing the same.

More specific to developers

If you want the guide to be tailored to the developers, you might do something like Google has done here.

Their developer style guide is meant to help maintain a fairly consistent brand look and feel despite having countless devs in countless locations creating things for Google or in Google's style.

For example, in the Highlights section, Google talks about the tone that should be used in writing. Deeper into the guide, you'll see things like HTML formatting guidelines.

Whatever you end up doing, make sure you label the styles as guidelines unless it truly is a hard and fast rule (i.e. do not recolour the logo). I only say this because there's always going to be that case where the design works better a bit outside the original guidelines.

If you're worried about devs going way outside the correct style, add in conditions. For example, I always put in something like "If none of these colours are appropriate for your application, please consult the Marketing Team before choosing another colour."

Examples of more visual style guides/brand books

(btw also google "brand books")

You might do something like this for colour palettes.

Here's a great example for showing the style and size requirements for an element like a logo.

Answer 2

It all boils down to what you are trying to achieve. Different shops have different systems in place. If you want to communicate with your developer ask them what is valuable for them — is it annotated screens? or more complex styleguides or design systems? And are you working on a single product or a variety of products each different and with its own set of problems? Adopting complex systems make sense if you are in for the long run. If your projects are always changing perhaps a more nimble approach might do.