How to Create a Style Guide: Start with a UI Framework

Arya Srinivasan shares a discussion with UX Designer and coworker, Mason Lee about his work developing AdRoll's style guide.

The problem was design inconsistency, both across products and within a single product. For example, a button that should look the same everywhere but actually varies in color, font weight, and border style.

This tends to be a problem where (1) designs are created in silos, or (2) a style hasn't been defined yet. From the interview it seems AdRoll was experiencing the first scenario, where designers placed on product teams did not interact with all products under the AdRoll umbrella. The second scenario is what most startups, agile, or engineering-driven companies experience. This happens because they tend to move fast, iterate rapidly, and leave little time for a thorough design process.

There is one thing I would like to point out that is not made clear in this otherwise smashing write-up: let designers explore.

Research, iteration, and ideation are the foundations of design. If time is not a luxury you can afford, this exploration has to happen within the bounds of the product, and design variabilities should be expected. Design Synthesis is a project in and of itself; preventing exploration or defining rules too early can hinder creativity and the development of your brand. Some reasonable speculation: assuming AdRoll had forced the design team to observe an unrefined style guide, they would be having much larger problems than polishing the product; there is nothing worse than forcing questionable design metaphors onto fictitious or rudimentary concepts.