How to create design documentation for clients

It’s almost website launch time – complete with new styles, colors and typefaces – and a key concern for the client is how to maintain the look and functionality of the design after handoff.

It starts with clear design documentation that you provide to the client.

But it has to be easy to read, understand and apply on a daily basis. It also has to be easy to access, which is why you might consider making it part of the actual website.

What design documentation is (and is not)

Design documentation is a set of tools and guidelines that will help the owner of a site understand how to maintain the design and use backend functionality to make updates and changes.

This includes everything from logging into the website and changing a comma to adding content or substituting a logo.

While every website style guide might look a little different, there is a formula you can use to make sure that users understand the guidelines and so that you write documentation that clients can appreciate.

• Description of the project and purpose of document (1-2 paragraphs)
• Front-end functionality for users
  • Common features
  • Sitemap
  • Basic wireframe templates
• Back-end functionality for the client
  • How to log in and make changes
• Design specifications (because they are probably unique to the project)
  • Color
  • Fonts
  • Photo or image treatment
  • General style
• Usage examples
• Contact info for your firm (this is great for clients who want to make changes that you haven’t outlined elsewhere)

Documentation should start incrementally

Design documentation for clients takes on two forms.

1. The client needs to know and understand what is happening while a digital design is in process.
2. The client needs to know and understand how to manage the design on their own after launch.

Designers and developers who work with clients throughout the process are often creating this documentation as they go, thanks to constant communication and feedback from the client. Keep notes on small conversations and design details throughout the development process, so you don’t have to create a full guide from scratch post launch.

Designing documentation for clients

The number one goal when designing documentation for clients is creating something that’s highly usable.

• It should be a simple guide, not a novel.
• It needs to be easy to understand, not full of design jargon.
• It should include copy and paste elements and code snippets, not vague concepts.
• It should be broken into small sections and look like the actual design.
• It should be easy to access, such as a page on the website itself.
• It should be flexible and easy to update if design elements change over time.

Documentation should be usable

Design documentation should be usable. But what exactly does that mean?

Usable to a designer or developer is not the same as usable to an end user or someone who will add blog posts to a website.

Try to keep documentation for clients to a page when it comes to type of website or design function. (One page for blog posts, one page for basic design, one page for photo or image specifications.)

Then the real trick with design documentation — just like the design itself — is to show, not tell. Documentation should look like the actual design. That way users know to match the look and that they have it right.

Look at the example above. The documentation provides a screenshot of the exact look and settings for hero images and an image mapper tool. That way when the user goes to upload an image, there’s no question as to how to fill in the information.

Documentation should be accessible

When you provide design documentation to clients it needs to come in two forms — hard copy (printed or PDF) and digital.

This provides an easy reference point for users no matter what they are updating on the website or where they are updating it from. Clients also love having a non-indexed page on the website that includes all of the design specifications. It’s always there, easy to find and can include elements that can be replicated or copy and pasted right from the CMS.

Documentation should match other brand style guides

The biggest concern users have when it comes to design documentation is understanding how different brand guidelines work and come together.

A common misconception is that a brand will use the same fonts and colors on print and digital products. Often this is not the case, and there are print- and web-specific values. The typefaces might even be slightly different and you’ll need color values for CMYK and RGB, or HEX.

These aren’t always easy conversions for the average user.

Include a sheet that breaks down brand guidelines for each and what the complementary elements are, in a way similar to the chart above. You’ll see there are print and online columns. Some elements are the same and others are different. This can help eliminate any confusion about fonts or colors or sizes to help maintain and ensure brand consistency.

Finally, make sure that design documentation for digital products gets added to the overall branding guide. Handing off design documentation to a client isn’t enough; you need to help them get it to the right place so that everyone on the team uses it.

Documentation should be flexible

Finally, provide a way for design documentation to evolve once you hand it off to the client.

In addition to a PDF or printed copy, supply a working file in InDesign or Microsoft Word that clients can continue to edit on their own. Give access to the style page on the website to power or admin users so that they can continue to make changes.

And have a discussion with key players on the client team about the importance of using standards and how to update design documentation on their own. (Or offer to help them make updates in the future with contact information and rates attached to all design documentation.)

Conclusion

Providing design documentation to clients should be a milestone step in the project process. While you’ll compile information for this “living” document as you create the design, it is the final part of the designer/developer to client handoff.

It should come with some explanation so that clients understand the documentation and how to use it. Remember that it needs to be simple, understandable and usable to ensure that the client can reference the guide and maintain the integrity of the design as they make updates on their own.