Blogs, Style guides, and the Bytemark Brand

You may have noticed something different (yet familiar) with the Bytemark blog today. If you haven’t, clear your cache because it’s had an overhaul!

Previously, this blog used a modified version of the WordPress TwentyEleven theme. Whilst it served its purpose for the past five years, it needed upgrading. We’ve kept it simple, with two goals in mind.

  1. Make it easy to read.
  2. Make it feel like part of the Bytemark website as a whole.

The latter of them two goals is something I’ve been working on across the Bytemark platform for the past few months. It’s nearing 6 months since I started at Bytemark and part of my mission here is to bring some cohesion to our brand.

It’s no secret that our styles are quite mis-matched between our products and websites, so we ran an audit. We took screen grabs of our nine biggest websites (which has since become my hit-list). Whilst the Bytemark branding was there, they were still disjointed. There were around 20 different button styles, several form treatments, and six different nav-bars. There was even a whopping 81 different colour variables used on the main website alone!

Exercises

Something had to be done. We needed a style guide.

collating all the button cutoutsWe decided to use the website as a baseline. It had recently been re-designed and was a good representation of Bytemark as a brand. The first task was to follow Lotte Jackson’s pages to patterns exercise. I saw her talk about it at Upfront Conf and it couldn’t have came at a better time. So we broke out the scissors, swore at the printer a bit, and got to work.

collating all the cut out components from the website. This exercise helped us to identify, collate, and name the components that made up the Bytemark website. We weeded out the duplicates, combined similar components and scrapped unnecessary ones. We even managed to get that massive list of colours down from 81, to a more manageable 18. Doing this on paper allowed us to get away from our screens and have a proper, human discussion over the problem. Something I’d recommend doing whenever you get the opportunity.

Once we had all the information we needed, we started pulling together a style guide. We reused code where we could, refactoring when necessary. Once we had something that could cover basic uses, we put out an internal release.

But a style guide is only as good as the use it gets, so it was time to give it a trial by fire and apply it to a project. Looking at the landing pages it was obvious where to target—the blog. We learned a lot about writing style guides (and the weird world of wordpress theming) by doing this. Some things we thought would work well, didn’t. Some things we thought would be difficult, were easy. There were spacing issues, bugs, battles with plug ins, and more bugs. But writing this theme was much easier with the style guide there to back us up.

Announcement

So with great excitement we’re making the Bytemark style guide public! It’s still in beta but you can check out v0.4.4 today. We have lots of work still to do, but we’d love your feedback on what we have so far. Now, on to our next target.