Keeping your ever-evolving brand consistent: the digital style guide
If you haven't noticed - and I'm betting you have - we recently launched the new Devbridge.com. Not only did we launch this new website, but we also took the opportunity to refresh our brand; the two go hand-in-hand. Our organization has grown and matured, and we needed our brand to reflect this.
In my experience, internal projects can often be the most challenging of all. There are many interested parties, all of which are extremely passionate about the brand. Additionally, there are many things that go into a re-design and brand refresh, including collecting user feedback and creating personas. These things 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’m going to focus on the importance of creating a digital style guide when creating a consistent representation of a brand, as we did with Devbridge.com
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.
Having a style guide forces designers to be more consistent with designs and helps designers see the site and the brand from a bird's-eye view. This helps us create patterns and think in design systems.
Once the style guide has been created, it helps to cut down on all of the documentation. Lets face it, red line comps are tedious to make, and I doubt developers enjoy working off of them either.
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. I think 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 many hands. 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
About our style guide
I always find it interesting to read how people approach these kinds of projects, and since transparency is something we pride ourselves on, I’d also like to share the style guide I created for this project.
For this particular one, I tried something new. We recently started using Sketch, which I found to work very will for this. 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 very useful to communicate my expectations to the development team. It also allowed for me to have a lot 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. Of course, every project has different needs, but I have found this to be a great starting point or template for creating an effective style guide.