When we were tasked with redesigning Devbridge.com, we saw this as an opportunity to not only refresh the site, but the brand as well.
It was also an opportunity to create a better style guide — a living one.
In my experience, internal projects can often be the most challenging. There are many interested parties, all of which are passionate about the brand. Many things go into a re-design and brand refresh, including collecting user feedback and creating personas. This helped us understand who we are and how we want to be perceived as an organization. Where we landed, when it comes to the essence of the brand, was discussed here, but we needed to create a visual representation of that brand with our new website.
For this post, I’ll focus on the importance of a digital style guide when creating a consistent representation of a brand, as we did with Devbridge.com
Communication
One of the most difficult parts of any project is communicating design expectations to your development team. This is where a style guide can be a valuable asset for both designers and developers.
Consistency
Having a style guide forces designers to be more consistent with designs and helps us see the site and the brand from a bird's-eye view. This helps us create patterns and think in design systems.
Less documentation
Once the style guide has been created, it helps to cut down on documentation. Let’s face it, red line comps are tedious to make, and I doubt developers enjoy working with them either.
Future
One of the best things about creating style guides is that any designer can pick up your project and begin working with little or no briefing. As designers, we tend to forget that we’re not going to be the only ones working on these projects. Over the life of a site or application, it could change hands many times. A good style guide allows for the system to scale quickly and consistently.
"A style guide can serve as a watering hole that helps everyone at an organization speak the same language and builds awareness and appreciation of the system." - Brad Frost, web designer
About our style guide
I always find it interesting to read how people approach these kinds of projects. Since transparency is something we pride ourselves on, I’d also like to share the style guide I created for this project.
For our style guide, I tried something new. We recently started using Sketch. Instead of creating a style guide for static content, I created a responsive style guide. With Sketch's Artboards, I could design all three breakpoints on one screen. I ended up deciding on three breakpoints (large 1440, medium 768, and small 320) with three unique grids. This ended up being useful to communicate my expectations to the development team. It also allowed for me to have more control over how the site would look at different screen sizes.
Once this was created, the development team built a fully functioning version of the style guide. Now, our style guide is a living document that can be easily updated and used to validate design assumptions.
You’re welcome to download and use the Sketch file template I created for our responsive style guide. Every project has different needs, but I’ve found this to be a great starting point or template for creating an effective style guide.