Great UI Design Requires Smart Style Guides

How big do we make our headers? What hue of blue is our logo? Where’s the reusable code base for new pages?

Website and app building is full of minutiae that even Rainman couldn’t keep track of, and for designers it gives new meaning to the phrase “the devil is in the details.” Thankfully, style guides can keep track of this data for you, so that when you need it, it’s just a few clicks away.

True, style guides require extra work to create — especially at the beginning, when you’re busy enough already. But in the long run, that extra work early saves time later: it makes referencing a lot smoother, and prevents confusion and misunderstanding among teams.

Don’t think of style guides as an academic PDF for onboarding new hires. When used properly, they’re collaborative tools that complement aspects of the design and add the following advantages:

Visual consistency – As explained in Web UI Design Best Practices, style guides help you create a cohesive design that reflects a common visual language. Elements like color palettes, typefaces, animations, and navigation menus all contribute towards a unified user experience.

Context – Great style guides account for explaining the reasoning behind design decisions. For example, in addition to explaining the technical details for pages with scrolling navigation and those with tab navigation, you should also explain that scrolling are used for storytelling, while tabs are used for product displays.

Collaboration – Having a set reference manual for each member of the team will ensure that everyone’s on the same page. Collaboration is easier, with less repeated questions and back-and-forth emailing.

Singular vocabulary — Another collaborative trait is streamlining communication through a singular vocabulary (i.e., defining what a “widget” or a “module” might be). Nailing down proper naming conventions can spare a lot of unnecessary miscommunication.

Code standardization – Front-end style guides help standardize the (X)HTML, CSS, or Javascript, so designers and developers can see if a new design deviates from established standards. They also help you discover if existing markup easily expanded.

Consolidation – Designers only need to look one place to reference all components, as opposed to losing time sifting through different notes and questioning which documents say what.

New employee orientation – Rather than repeatedly teaching new hires the standards, you can send them a style guide for reference as they ramp up. With the style guide as an anchoring document, follow-up conversations will be more meaningful.

Helps with design decisions — Don’t overlook that the process of making the style guide can draw your attention to some crucial design decisions that you may have otherwise forgotten.

Most relevant to web and mobile UI designers, the front-end style guide is what most people think of when they hear the term “style guide.” These are much more detailed than rougher style guides (like mood boards and style tiles).

These robust manuals usually live as a section on a company’s internal or public website, including snippets of code alongside more common guidelines about typography and branding, etc.

5 Examples of Style Guides Done Right

While currently being updated, the BBC GEL style guide lists more than just technical details. Their design philosophies are outlined in the beginning to create the proper context for the described tactics. Each platform section even contains subsections for discussing a more specific philosophy, technical details, and downloadable assets for that platform.

Of course, style guides can also be purely technical reference guides. Yelp’s style guide, for example, systematically lists out black-and-white details with the corresponding HTML coding.

Their style guide is a good example to follow for teams on a time crunch – they outline all the relevant information they need, whether typographical to stylistic, and accompany each with the proper coding. To ensure proper implementation, always address developer needs in your style guide. .

The style guide for Ubuntu includes everything from a slider that determines tone based on audience, to reusable sections of Javascript code. It also divides itself into several smaller guides — for the brand, web, apps, etc. — a structural choice that improves searchability.

The Atlassian Design style guide is beautifully organized while still functional. Aside from technical details for product design, user interface, and branding, they provide extra information such as their step-by-step approach to design, core personas, and additional resources for visual design. As if that weren’t enough, they also include basic descriptions of their design principles to give their style guide a philosophical edge.

Like Yelp, the style guide for Lonely Planet sticks just to the facts. Their section on color above leaves no room for error, with coding-specific hues. Each page of their elaborate style guide is equally detailed, including several pages listing out all of their icons.

Takeaway

At heart, style guides are design and development aids meant to make the lives of you and your team easier. With that in mind, don’t do more work than necessary. Browsing through example style guides, it’s normal to feel overwhelmed by the wealth of detail some companies include.

But you don’t need to include everything, especially if you’re a smaller company. Ask around with your team, so you know what’s helpful and what’s unnecessary — shorter style guides make it easier to find what you’re looking for.

This article is just an overview, but we dive into the more practical tips and analysis for creating style guides in our free e-book, the Critical Components of Web UI Style Guides. Learn from examples from 22 companies such as Yelp, Starbucks, Facebook and Mailchimp.

Found this useful? Share with

Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily
design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.