WCAG friendly design systems

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.

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.

I 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.