Trends

How to Use Styleguides in Web Design

We offer some applicable tips with live examples for crafting your own digital style guides for your brand or business.

Branding is a pivotal aspect of launching any type of company. Although design seems like an afterthought, it’s really a very important piece to the overall puzzle. Style guides are just one method of organizing design & brand concepts into a unified location for easy access.

I’d like to cover some applicable tips with live examples for crafting your own digital style guides. The majority of examples pertain to company branding and web design, all of which are important to a business’s image.

Style guides are meant to offer guidance and a series of resources for designers crafting apps, websites, documents, or content related to a product or service. When built properly, style guides become a powerful marketing tool for all forms of digital media.

Covering the Basics

If you want to create usable style guides from scratch, you must first invent the universe. But let’s skip ahead a few millennia and focus on the modern purpose of digital guidelines.

Style guides have two main orientations: internal & external use. Sometimes a company might create two separate versions with distinct information in each one. An internal style guide is generally private and used within the company. An external guide is contrarily public and used for the general masses.

When discussing the topic of style guides there is a lot to cover. Most internal guides will have a more detailed collection of information related to the logo, typography, icons/imagery, and color scheme. These internal guides are rarely seen by anyone other than employees of the company. But now that digital design is such a huge field, style guides require more serious attention.

google developers style guide resource

In this post I want to focus primarily on external public style guides built for the web. This creation process is a little different because the final output is meant to offer guidance to developers, designers, writers, and anyone who needs resources from a company. Every style guide should be neat, organized, and easy to peruse at leisure. (Need a place to publish your style guide? Check out our free WordPress themes for writers). 

Knowledgebase Collection

To simplify the process you may think of a style guide much like a knowledgebase. The webpage should contain enough information to help people determine a proper course of action on their project. The KB articles from IM Creator break down each major step into a list of stages. This is a great example of how to structure ideas so they can be more readily absorbed.

When talking about design there’s a lot more to consider. Design patterns are often considered more of a language, as explained in Yelp’s styleguide page. Each design pattern ranging from regular typography to grids and buttons is organized with code samples and live demonstrations. What I like most about Yelp’s guide is that everything has been fitted onto a single page.

yelp styleguide fundamentals screenshot online

You’ll notice that everything is easily accessible from a series of links. This style guide is meant for anyone who wants to build a Yelp-styled app or API service. On a similar note Yelp has their own brand guidelines which are separate from the style guide, yet operate in a similar manner.

yelp branding logo guidelines website

There’s a lesson to be learned from Yelp’s branding guidelines: tell people what to do and what not to do. After Yelp’s logo gallery you’ll notice examples of what not to do with the logo. Every company has their own set of ideas regarding how to properly display branded icons and logos. Take advantage of this by putting together a knowledgebase of do’s and dont’s with graphics, slogans, and anything else that’s important to the company image.

For further examples t the Medium, Starbucks and BBC style guides are worth exploring. And if you would like to see something really cool, you should check out our own living styleguide.

Page Copy & Typography

Aside from graphics and logos there should be an important textual piece to every guide. The Internet is primarily a text-centric resource where people can publish and share information around the world. Major websites are also mostly based in text and thus require some form of typography design.

Possibly one of my favorite examples is the Tuts+ style guide. Writers are expected to follow along with specific rules for putting together the best-possible quality content. The Tuts+ guide pushes beyond just typography and moves into style formatting like headers, lists, links, and images.

tutsplus webcopy writing guidelines

I point out this example because it combines the best of both worlds. Webpage copy is a focus on the writing itself – how words flow together, the size of paragraphs, use of HTML formatting and content structure. Typography is a focus on the design of content which is an important yet completely separate issue.

To understand more about page copy & writing style I’d recommend checking out the MailChimp style guide. This includes a laundry list of interesting topics related to the tone and structure of writing. Whenever you’re constructing a guide which expands upon page content you really want to break down all of the important categories.

mailchimp guidelines writing style guide

This might include notifications, microcopy, FAQ pages, explanatory text, blog posts, really anything that requires written content. It sounds like a style guide would be primarily meant for visual design, but this isn’t always the case.

If you’re confused about structuring copy and written styles then use MailChimp’s guide as an example. I revere it as the highest quality guide on web copy since it covers a broad spectrum of writing styles with depth and precision.

There are some free tools available that will help you create a style guide for your site, you could try the Style Guide Boilerplate or even Stylify Me, a web-based style guide generator.

Conceptual UI Design

Both web and mobile designers have a deep-rooted interest in style guides. Designing concepts for an existing brand is often easier than starting from scratch – but there are usually rules to be followed. A well-formatted style guide offers a comprehensive resource to sift through all of these rules and put together a design from an existing template of ideas.

mozilla sandstone website style guide

Quite possibly the best example of this can be found on Mozilla Sandstone. It’s meant to showcase Mozilla’s various interface styles from tabs, links, buttons, forms, and practically anything else you could imagine. The guide even includes a list of example websites that use Mozilla Sandstone techniques.

I’d also like to point out that Mozilla’s official style guide is much bigger than just Sandstone. It includes branding rules for every Mozilla product along with media and web copy guidelines. I love their guide’s layout because it’s really simple to use and offers a hell of a lot of screenshots. But the Sandstone guide is quite possibly the most practical and user-friendly interface style guide I’ve ever seen.

Extensibility

Perhaps the most effectual outcome of creating a style guide is dynamic extensibility. Offering a method for users to expand upon your website is a great way to improve features. When offering a set of open source code it becomes available to the public. This code may then be used to construct something related to the company without using any internal man hours to do so.

css github style guide open source

The GitHub styleguide has three distinct sections related to CSS, JavaScript, and Ruby. There are also HTML styles which pertain to internal content and page structure – but this is of lesser importance. Regarding extensibility I feel that GitHub offers an immensely powerful guide to both novice and experienced developers alike.

If you’re able to comprehend these styles then you could build anything with GitHub’s design library. Every interface style is adaptable to any website or mobile app. Although most of the information is very technical and meant for developers, it can still be utilized with terrific success in that demographic.

Being able to quickly expand upon an existing website is one of the most significant factors of a style guide. When putting together a guide like this it’s important to aim for a design that reaffirms the website’s branding & message. By accurately portraying a company’s voice through their style guide you’ll draw more attention and offer a much clearer vision of the bigger picture.

Whether you’re creating a unique style guide or working from an existing one, I certainly hope these tips will prove useful throughout the process. Digital style guides have been around for a long time but have only recently gained vast popularity.

As more services and websites continue to grow, I feel that style guides will be growing right alongside them. Use the examples from this post combined with your own ideas to start building some truly valuable online style guides.


About the Author Jake Rocheleau

Jake is a passionate writer & digital designer frequently researching the latest trends in UI/UX design and user behaviors. You can find work samples on his portfolio and follow his tweets @jakerocheleau.