There is something very pleasing and comforting about consistency to us humans. We don’t just like the familiar, we love it. That’s one reason why as brands we don’t change our logo every week, or use 18 different fonts across our website.

It’s why we create a brand style guide for our designers, but just as websites are becoming more responsive, and company files moving to the cloud, style guides are evolving with the digital era.

Not too long ago style guides were housed in the deep recesses of a company’s server. A PDF opened by designers, who would scroll through it, nod along in acknowledgement, close it and almost forget it existed.

If you go back further to the 70s, when some of the pioneering style guides were developed, designers would have to flip through massive binders. The hefty tome that is the 1975 NASA Graphics Standard Manual is one of our favourites. At least, these manuals had a physical footprint in the office.

But, that was the iron age of design, where paper cutting instruments went hand in hand with toxic solvents to create and print designs… We’re happy to say we have moved on.

A digital design system — The evolved brand style guide

A digital design system turns a style guide into a living-breathing part of an organisation. It houses a visual language and a library of components for designers to reference ensuring consistency and quality across all facets of an organisation's appearance and branding.

blog-add-on-websites

Imagine you had 40,000 software developers and 10 designers working on one project, that’s the situation GE faced, in 2012. Now, imagine each of those designers and developers crawling through the company server to find a PDF, or even a link to the PDF. That’s when GE decided to build their first design system.

A design system makes an organisation design scalable and capable of evolution. So, when an organisation is releasing a new product or introducing new pieces of collateral or just anything requiring the brand touch the design system can be updated.

The system is also highly accessible and can live within the creative programs designers use, such as Photoshop and Sketch. It puts a brand right at our fingertips.

Then, there’s the shareability aspect helping to create brand consistency with clients, agencies as well as developers.

As the modern style guide there’s one thing we think it must have...

And, that’s accessibility guidelines.

We have beat the drum in favour of the web accessibility guidelines (WCAG 2.0) before, but we think it's super important with all design considerations, particularly with the use of colour.

There are about 285 million people who are visually impaired around the world, and just in Australia an estimated 8.4 per cent of the population is colour blind. But, honestly, none of this even matters if your organisation puts some yellow text on a white background.

That’s not good for anyone.

Choosing colours that contrast well is web design 101, but sometimes designers get wrapped up in creative flair and design for beauty, not usability. Stating web accessibility goals in your design system is a good way to ensure all users have equal access to your site. And, at the end of the day that means more people have a positive experience with your brand.

It’s not just colour either, sometimes fonts present a problem for accessibility, particularly as you switch between devices.

Every device comes with its own pre-installed fonts based on its operating system, whether it's MacOS, Android, Windows etc.

So, if your designers are keen on a font that is not available across all operating systems, the system will default to its choice of font, which may impact readability and loading times on different devices.

The solution to this is to include a backup list of “web safe fonts” that appear across all operating systems in your style guide. This doesn’t mean the font will meet accessibility standards, but it does give you control over what font does appear, and you’ll hopefully choose a font that will be readable. We use Google fonts as much as possible because they render quickly and display well across all devices. It’s just a fail-safe, but it means more people will see your site as intended.

Want to see a digital design system?

We thought we’d give you a sneak peek of our recent work re-designing the Pause Fest website. Here are the brand colours and the integration with WCAG 2.0 AA standard contrast ratios.

blog-add-on-websites

 

If you’d like to know more about creating a digital design system or how to become WCAG 2.0 compliant, please get in touch.

Go back to Design