Graphics UI style guide

I’m a big process nerd. I enjoy thinking through how we can be more communicative and efficient on every project. I’m also a big believer in establishing styles that enable us to spend our creative energy on new features and visualizing information, instead of on user interface elements that repeat across projects.

For two years, I’ve led the development of the graphics team's user interface style guide. The guide includes anything from typography and buttons to instructional text and section dividers, and it's made our work more consistent and has been a big time saver for the team.

Design challenges

Each quarter, I do an inventory of all graphics and I identify elements that need to be standardized and incorporated into our template. The graphics team does a lot of bespoke work, so I work to create guard rails and consistency, while still leaving room for creativity and innovation. It’s also important for the style guide to align and evolve with the site wide styles established by the product design team.

After designing each new element, I add CSS to our template and HTML to our template documentation. This makes it quick and easy to include a UI element in any project. To avoid bloating our CSS files, I structured our template to separate template CSS — CSS needed on every project — and component CSS — CSS for UI elements you may not need on every project. The structure includes a simple way to include component CSS when you need it.

Favorite Takeaway

At the start, I needed to remind people to adhere to styles. But over time, the style guide has become an established part of our process and people reach out to me with suggestions for elements that would be helpful to have. I’ve also become a resource for my teammates when they are looking for design, UI and UX feedback. And even better, I’ve seen more people take ownership of the template and contribute too.

Role
Designer
Front-end developer