There are websites that we could stare at for hours.
They’re different, addictive, and well crafted to the pixel. Before the Internet, brands had to rely on limited channels like print ads, TV commercials, billboards, and all sorts of print collateral to share their stories. These channels, however versatile, are no match for the level of depth that websites can offer.
Want to learn more about the team behind a product? Done. Need to contact the support team? It’s a couple of clicks away. Would love to watch a video about a specific feature? Probably right there too. In many ways, websites have become the natural hub for brands. As such, making sure that this “home” aligns with the brand’s overall identity is crucial. And that’s exactly where a carefully crafted web style guide comes into play.
What is a Web Design Style Guide
In simple terms, a web design style guide is a set of instructions and assets for everyone in charge of building your online presence. This includes developers, designers, content creators, and even partners that are collaborating on different online initiatives (contests, social campaigns, landing pages, among others). Because various design disciplines have to interact with them, you may have heard about web design style guides under different names: pattern libraries, UI toolkits, front-end style guides, human interface guidelines, UI guidelines, among many (many!) others. No matter how you call them, remember this:
Your web style guide contains essential building blocks for anyone in charge of constructing your online properties.
Let’s look at 10 inspiring examples of carefully crafted web design style guides:
Airbnb’s UI Toolkit (I told you there would be hundreds of different names for this!) provides a clear idea about how different form fields, inputs, menus, ads and toolbars should look like. Particularly interesting is how they’ve also included sample color harmonies like Rausch, Tirol, Foggy, and Hof.
What we can learn from Airbnb:
Web design involves playing with different levels of hierarchy, depth and contrast. While you may want to limit your primary brand colors to 3 or 4, consider adding a wide spectrum of secondary hues that can help web designers and other users shaping your online presence.
Mozilla, the talented team behind the Firefox browser, has made their web design style guide completely public. To unify their entire online presence, they created a framework called Sandstone. This comprehensive guide defines style and form for all of their web properties, addressing everything from their tiniest button to the overall grid.
The fact that Mozilla chose a unifying concept to guide web design does not mean that everything looks exactly the same. To prove it, their web design style guide also includes examples of their concept in use where it becomes clear that these building blocks can be used to create great diversity:
What we can learn from Mozilla:
When you think about your web design style guide, coming up with an overarching concept like Sandstone will help you maintain consistency. No matter which element you need to incorporate into the guide later on, there will always be a central idea that dictates an overall look & feel for the site.
To address both print and web design needs, the team at Disqus divided their style guide into two sections: Brand & Styles and Components. They included specific assets for icons, typography, and buttons. In this case, the web design style guide was created to inform both in-house design work and components created by third parties (using their API).
Designer Joshua Sortino, who was involved in the project, uploaded an animated shot that showcases their impeccable style guide:
What we can learn from Disqus:
Sometimes you are creating a product that is, in and of itself, a building block for something else. This is the case with Disqus, which has an open API that exposes their brand to thousands of developers around the world. If this is your case, make sure to display your web design style guide publicly and in a highly visible location.
This UI guide displays the most important elements that characterize Medium’s online identity: buttons, backgrounds, dropdowns, icons, tooltips, popovers, among others. Teehan+Lax, the agency who helped shape this identity (and has since joined Facebook), shared that there were lots of changes in the product development phase. This is the case for most new products. Rather than frustrate you, these visual changes should encourage you to constantly update your brand’s web design style guide.
What we can learn from Medium:
There is also an opportunity to bring your brand identity to seemingly small UI components like loaders, popovers, image uploaders, and progress bars. Even though some web development frameworks provide out-of-the-box skins for items like these, try to customize them for an added sense of authenticity.
Uber’s web design style guide pays special attention to typography and hierarchy. They have specific rules for the amount of weights than one can combine in a single design piece.
Also fascinating is how they’ve brought their brand identity to components like maps. Because they are a transportation-focused company, the use of maps becomes a crucial part of their user interface. Taking note of this, the design team established a set of guidelines to work with different kinds of maps.
What we can learn from Uber:
If your brand has a signature product or service (like maps for Uber), think hard about how you can portray your identity through it. Uber has not only set a fixed look for large components like maps, but also enacted its brand identity through the very lines that connect two locations on those maps. As you build your web design style guide, think about how you can bring your brand to items as small as dots and as large as hero images.
As your product becomes more complex, there will be more online components to take into account for a style guide. Mailchimp, for example, provides a fairly comprehensive analytics package that involves a ton of different graphs. It is only natural, then, that their web design style guide includes clear indications on the types of charts that fit the Mailchimp brand:
To add a touch of brand personality, they also created a custom set of icons dubbed “Freddicons”, after their mascot Frederick von Chimpenheimer IV.
What we can learn from Mailchimp:
In an environment where most sites seem to be using the same icon sets, take a risk and add custom iconography to your brand assets. While time consuming, creating a unique package of images to represent site functions allows you to cater to your product’s specific needs.
Buffer defines its style guide as “a collection of reusable styles and components for faster product development”. Interestingly enough, they are applying the principles of a practice known as Atomic Design. These principles indicate that web design style guides should start out with small, independent parts (atoms) that combine to create molecules and, eventually, the entire organism.
Aside from having such a unique approach to web design, the Buffer style guide includes a set of rules to create an increasingly important component: the Call to Action.
What we can learn from Buffer:
Web design is not all about buttons and grids. Designing effective online properties requires thinking about the actual intention behind setting up a site in the first place. What is your main call to action? How do you want to convey it? Add these considerations to your web design style guide for more consistent form & function.
Designers at Yelp open their web design style guide with the question Have You Used Your Style Guide Today? to emphasize how important it is to get in the habit of recurring to a set of visual rules.
Their comprehensive guide goes beyond simple recommendations and gives developers actual code to work with right away. In this example, the guide provides specific instructions for marketing blocks:
What we can learn from Yelp:
Go a step further and provide developers with useful code out of the box. Sure, anyone can understand what you mean by that image you included in your web design style guide. Here’s the problem: not everyone will execute it in the same way. Different developers will bring to life each of your components to the best of their ability, unless you provide some standardized methods. Handing them some standard code will help preserve a common language between everyone who interacts with your website’s front and back ends.
Dribbble has become an impressive showcase of living, evolving style guides for dozens of creative teams. The Evernote team, for example, is keen on sharing their evolving set of web components. They consistently upload shots to share their icons, illustrations, badges, layouts, user flows and much more with the design community. Unlike an internal web design style guide, maintaining a living, public portfolio is opening the door for feedback and continuous improvement.
What we can learn from Evernote:
Take the plunge and share your web design best practices with the community. You’ll be surprised at the amount of actionable feedback that creators thousands of miles away can share. There’s only one certainty in the world of web design: everything will change soon. As long as this is true, you are better off taking advantage of other people’s’ different knowledge levels.
10. VIRGIN AMERICA
This airline’s most recent web redesign was described as “the first radical rethinking of the flight booking experience in a decade” by Wired. Work & Co, the agency in charge of the change, shared a complete case study that tells the story of the brand’s new web design guidelines.
This example is particularly fascinating because it’s a case where a company’s web design style guide was so successful that it is also being deployed across traditional channels. This notion of “digital-first branding” is set to become more and more popular. Soon we could be talking about how a brand’s web design style guide should inform its print guidelines, and not the other way around.
What we can learn from Virgin:
Building a web-based product? Turn brand development on its head and consider your web elements first. What should certain interactions look like? Rely on the essence of your brand story to design an ideal set of web design assets. Then, go back to the drawing board and create other traditional brand assets (like stationery, ads and merchandise) based on this visual system.
Tools to Build & Maintain Your Web Design Style Guide
Keeping your web design style guide up to date is not an easy task, but there are tools that can help you save time and effort. Check out some of the following apps:
Stylify: An online style guide generator that scrapes color & typography palettes from any URL.
Bynder: Brand Management Software to keep your files up to date, centralized, organized and easily shareable.
Fabricator: A UI toolkit template for any team that needs to create a comprehensive style guide.
Frontify: Create and maintain your style guide with this fast, free tool trusted by brands like Lufthansa. Upload and manage your image files, color palettes, typography schemes and icon sets.
Style Guide Boilerplate: The name says it all. A template to create a living, evolving web design style guide.