Establishing baseline documentation

- Let me introduce you to three fundamental truths about the web design process. First, a website is a living thing. By nature, it will evolve with time. Its content will be updated and refined, new services will be included while others are removed and, as new technologies come online, the site will need to stay current to stay current. Second, a website is usually a team effort. In most cases, the web design process will involve a group of contributors and as time goes by, new contributors will be added while others move on to other projects.

Third, a website is also rarely built in a vacuum. The website is usually an online representation of a business or a larger brand with multiple other outlets. That means all branding, from the web to print and other media to storefront signage and beyond, needs to have a visual and linguistic consistency. To take all these three facts into account, I recommend the creation of content, style, code and process guides.

These are living documents that provide guidelines and reference for the current and future process and helps everyone work towards the same goals in a seamless fashion. Whenever new content, designs or code is created, these documents should be referred to to ensure consistency. When a new team member is onboarded or you need to consult material created by another part of the team, the process guides will help ensure that everyone understands how and why things are done and how and where elements are put together.

To give you a head start on establishing content, style, code and process guides, take a look at these examples all published on the web under various open source licenses. First, the Starbucks style guide is a great example of a living guide that provides not only graphics but also live code examples to use when adding new content. Code Guide by mdo and css.guideline.es provide two very different takes on how to write consistent markup for easily maintainability and onboarding.

Photoshop guide by Mobify is an example of a process guide created to ensure a design team has a consistent workflow and it also allows developers and other stakeholders to understand and access the content created by the design team. Finally, North is an example of a complete process guide that provides a comprehensive overview of the web design process from start to finish. With these examples as your starting point, you should take some time to establish content, style, code and process guides for yourself and your team.

The code and process guides can become baseline documents for all your projects, while the content and style guides will be individualized to each project. As you establish your own versions of these documents, it's also important to remember that like the web, these documents should evolve. They are not dogmatic laws but rather living references of the current states of doing things right.