Web Style Guide Examples From 5 Expert Sites

When designing your website, it’s helpful to create a web style guide. A web style guide is a document that contains guidelines for formatting a site.

As DesignModo explains, “It is beneficial to have a style guide in order to create a cohesive experience among different pages.” Following a style guide will guarantee that every page of your site uses the same design.

Fortunately, many popular brands share their design or brand guidelines. The online world is packed with web style guides meant to inspire your site design.

Below are five well-known style guides that you can use for inspiration when creating your own.

1. Material Design

Material Design is “a unified system that combines theory, resources, and tools for crafting digital experiences.”

Developed by Google, Material Design was inspired by the “card” motifs that debuted in Google Now. Google rolled out Material Design methods to all of its apps, giving it a strong brand identity.

2. BBC GEL

BBC GEL is the BBC’s shared design framework. It enables the BBC to create a consistent and delightful user experience across all of its digital services.

The GEL website contains the foundation, design patterns, and “how to” articles that guide the BBC’s designers when assembling online services.

3. IBM Design Language

This digital giant recently rocked the design community with a revamp of its brand and design standards. Designed with the motto, “We believe human experiences drive business,” IBM reveals the importance of understanding how a good user experience helps to promote a good brand experience.

4. Carbon Design

Carbon Design is the design system used specifically for IBM Cloud products. It’s a series of individual styles, components, and guidelines used for creating a unified user interface. If you are building content for multiple platforms (perhaps a website, social media, and even an app), you may want to take a look at the Carbon Design system.

5. MailChimp Pattern Library

The MailChimp Pattern Library is a byproduct of MailChimp’s move to a more responsive, nimble, and intuitive app. MailChimp distilled most of its interface into a set of individual, reusable pieces.

While the MailChimp Pattern Library is specific to MailChimp’s requirements, understanding how and why MailChimp chose specific design elements can help you plan your own.

Browsing through these well-known web style guides can help you to understand design fundamentals, giving you the knowledge and resources needed to create your own.

ABOUT THE AUTHOR

Jonathan Bossenger

Developer educator from Cape Town, South Africa with a passion for open-source software.

More by Jonathan Bossenger