3. Analyzing Public Styleguides

Pascal Heynol
Guidance is a Journey
7 min readFeb 17, 2017

In order to create a product that is up-to-date and not lacking behind current developments, possessing in-depth knowledge about the work of others in a field is a necessity. With the intention to find similarities and common ground as well as positive exceptions, I analyzed the present state of public styleguides. Therefore, I went through a total of 31 styleguides that are all publicly available on the internet.

The publicly available styleguides I analyzed

As a result, I defined three categories in that I could find strong recurring patterns:

  • Content: What kind of information is documented?
  • Integration: To what degree is the styleguide integrated into development?
  • Abstraction: How concrete is content being explained?

For each of the three categories I will highlight the specific recurring patterns that stood out as most characteristic. Of course, not all of my findings are completely new. Among others, Debenham (2013) describes similar results for the types of style guides regarding content . The term Design Systems is being mentioned more often in discussions and articles recently, though has not been defined or described in other publications yet. The categorization in levels of integration as well as content abstraction of course are based on current developments in the field, though to my knowledge have also not been categorized in a publication before.

Benefits of a Public Styleguide

All styleguides that were analyzed are available online, publicly and to their full extent. While it was long common for companies to be secretive about their guidelines for communication, there is a clear trend emerging among digitally operating companies towards publishing these rules for everyone to see. As noted by Frost (2016) publicly presented and branded styleguides have several benefits for a company internally as well as its public appearance, such as:

  • Generating commitment and excitement within a company: Showing off work to the public is an additional incentive to put in extra effort and do exceptional work on a project.
  • Showing support for the styleguide: A great product gaining public attention often leads to a company seeing its value and directing more funding and resources towards its development.
  • Promoting the styleguide: Generally, internal interest throughout other departments grows. Subsequently, this enables for broadening the scope of the guide, including more information on the company, ultimately making it more useful.
  • Fostering a public brand image: It helps in showcasing the company’s dedication to design and reflects its internal culture publicly. This draws in the attention of like-minded talent, eventually simplifying recruiting of great people fitting the team.

Above that, having a publicly accessible styleguide makes sharing it with collaborating agencies and freelancers equally easy, eliminating yet another barrier towards continuity in communication. While the downside of intellectual property theft of course is apparent, anyone dedicated to copying another business will do so either way. In my opinion, the benefits clearly outweigh the potential downside. Therefore I would recommend any brand to publish their guidelines once they reach a level of sophistication that they feel can be shared.

Types of styleguides

The term styleguide is used very broadly in its meaning, referencing various different kinds of content. That is why there oftentimes is no descriptive separation between the different types. Though changing requirements through technological progress brought various new requirements with them, there has not been shared consensus of what such a guide should ideally contain by definition.

Until the late 1980’s styleguides usually were printed manuals serving as a manual for how to utilize the brand identity at its main customer contact points, mainly print products, magazines, radio and TV. With the spread of digital production techniques and the rise of the internet, styleguides moved to a digital presence as well. The old print manuals went and got replaced by digital, versioned PDFs along digital brand assets collected on local storage (Budzaki, 2016). This model was employed for better or worse up until around 2014, when a new kind of styleguide emerged. Static models were not fit to support the by now heavily mobile, interactive and social environment of business-to-customer communication. With highly diverse communication channels, where almost every employee contributes to a brand’s perception, guidelines have to be easily accessible anytime, anywhere. Subsequently, online styleguides got widely accepted as the de facto standard for any kind of modern company guidelines (Budzaki, 2016). Due to the inherent obsolescence of other, static media for documentation, I focused solely on online guides for my research. In the following, I will briefly introduce the most relevant of the various types.

Brand & Identity

For most people, brand and identity guides are the definition of the term styleguide. They were among the first to be used for documentation of company communication. Essentially, they contain a detailed description of all visual assets associated with a brand. Logos, fonts, colors and imagery as well as how to use all those in conjunction. Traditionally, brand and identity guides mostly covered print products, offering precise specifications sizes of fonts, logos and spaces. Especially companies that mainly operate through digital channels such as web services and apps, and value strong brand recognition, have transferred these kinds of guides to the web. Dropbox is a popular and equally simple example, showcasing brand colors and usage guidelines for its brand assets.

Relative Spacing — Copyright @Dropbox

Due to the vast array of available devices and specific requirements for branding within online services such as Facebook and Twitter, absolute sizes concerning the use of logos are close to impossible to predict nowadays. Dropbox, as an example, handles this by defining all spacing requirements as relative to the company logo. Firefox offers similar guidelines for usage of its brand across channels. Due to the high complexity of its logo, however, they offer detailed explanations on composition and usage of the logo. Another example are the WhatsApp Brand Guidelines, that offer app screenshots and rules on how to use them when referencing WhatsApp in addition to the usual type of brand documentation.

Development and Coding

In contrast to most other common types of styleguides, development and coding guidelines don’t focus on structuring customer facing communication. These types of guides describe the precise stylistic specialties that all developers of the team should conform to when writing code for the product. Just like designers, programmers have their own unique style of building products. Unifying them through overarching rules helps make the final code more stable and maintainable. Publicly shared coding guidelines in most cases describe open source projects, outlining the stylistic specialties for contributors. GitHub’s Primer CSS library, for instance, comes with detailed but brief coding guidelines that enable anyone to contribute consistently. Other popular coding guidelines are the Android Open Source Project’s Code Style for Contributors and Mozilla Developer Network’s Coding Style. While an important and necessary part of any scaling tech product, the most directly noticeable, and thereby more pressing, impact appears to lie within documenting communication directed towards the end consumer.

Human Interface Guidelines

Human interface guideline by now has become a well understood term and is used by various companies throughout the industry. The term was first used by the original, now iconic Apple Human Interface Guidelines published in 1987 and is still used by Apple today. These guides usually cover a specific device environment or operating system. Essentially, they describe the principles of user interaction and system response through psychological reasoning, as well as how to incorporate the same design metaphors within other applications. With their help, developers and designers building for a specific system should be able to create an application that feels and functions seamlessly within the environment. The most iconic, as mentioned, are the now called OS X Human Interface Guidelines as well as its mobile adaption, the iOS Human Interface Guidelines. They cover all aspects of the system’s user interface (UI) with detailed reasoning behind design decisions, and therefore are a valuable resource for any designer or developer. Other notable examples are the Windows 10 Desktop Applications Design Guide and the Ubuntu Mobile App Design Guide that are both highly detailed and insightful. Ubuntu’s guide is especially interesting because of the heavy focus it puts on gesture input. One notable exception of the norm is Lynch and Horton’s Web Style Guide (2009), that draws up a fundamental framework of approaches, rules and principles for web design in general. In contrast to all the other guides it doesn’t describe a fixed proprietary platform, but rather focuses on industry standards and tested best practices.

--

--

Pascal Heynol
Guidance is a Journey

Designer, writer, researcher, engineer — computational product person. Loves art, paints all too rarely. Tries to talk to computers, but they just never listen…