Six Stunning Style Guides
Web style guides emerged from the web’s evolution out of text-only webpages. In 1994, developers and early browser makers turned to the then-recently launched World Wide Web Consortium to enact standards for HTML specifications. With the creation of CSS in 1997, design and style on the web moved beyond its early limitations and into a very different (and seemingly limitless) world. But what works for 2015? Here are six stunning and essential style guides to help intone your next design.
The Modern Style Guide: Morten Rand-Hendriksen always has a finger on the pulse of web style. The Modern Style Guide focuses on all aspects of style and is a treasure trove of resources. Even a cursory reading will provide clear direction for your next website and siphon out any outdated ideas that may be lurking in your head. (Disclaimer: Morten is a contributor to the Media Temple Blog)
The BBC / Gel: “Design philosophy underpins everything we do as a user experience and design team.” Gel is the place where the BBC gives a peek under the hood to see how their multimedia-infused websites work flawlessly. From core site foundations (grids and mastheads) to the building blocks (typography and iconography), it’s easy to see not just “how” a design is achieved but “why” as well.
Max Quattromani: A front-end developer out of Denver, Colorado, Max Quattromani has created a style guide that works equally well for independent developers and start-ups alike. The guide leaves no stone unturned with a great pastel-based color palette, eye-catching buttons and margins, and a set of best practices to wrap it all together.
The Guardian / Pasteup: The Guardian, the Pulitzer-winning Manchester newspaper, remains iconic whether in print or online. Pasteup is where their “globally recognized design language is turned into code for the web.” Complete with their base CSS, layout styles, and module library, appropriating one or two tricks from this team may catapult your design to the next level.
Argento: Great brand designs can be both impressive and instructive. Argento is certainly the latter with a fantastic style guide that can be applied across any branding or design project. Heaping responsibility into their branding (“When you buy Argento you buy Argentina and when we sell Argento we sell Argentina”, they boldly state) works beautifully when you consider every possible use case of your color palette, iconography, and logo.
How to Create A Style Guide: Ok, after reading all these style guides, have you found your own style? If not, why don’t you create your own style guide, then? Smashing Magazine is one of the best resources for web designers and developers, and this step-by-step breakdown of the essential elements of a style guide will set you well on your way to teaching the next generation of designers how it’s done.
