TLDR; Stop debating if any particular UI element “needs to comply” with WGAG 2.1- Non-text contrast and just do it.

It’s been a few years since WCAG 2.1 was published and one point that causes more discussion than any other in my circles has been Non-Text contrast.

What is non-text contrast?

The spec says:

Success Criterion 1.4.11 Non-text Contrast (Level AA): The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

User Interface Components

Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined…

Before owning my first aircooled VW 5 years ago I had barely changed a spark plug. In the last 12 months I have removed my engine by myself twice! If you need to do some work on your Beetle or Bus engine this should hopefully give you the confidence to give it a go.

My 1500 single port engine after being pulled from my Splitscreen bus

What you’ll need

You don’t need much to remove one of these engines but some things are better than others.

  • Fuel clamps
  • Selection of 10mm, 13mm and 17mm and 19mm spanners and sockets (better to have all the spanners you have as no doubt you will have a mix…

Dave House is a product designer helping BT develop a design system that can help our developers and design team work more efficiently and consistently.

Workers on a VW Beetle. 1957
Workers on a VW Beetle. 1957

We’ve formed a new team in BT Consumer Digital to create a single design system for our three consumer-facing brands — BT, EE and Plusnet. We hope to create something that truly brings the many different disciplines within a product squad together and increases the focus on their unique goals by solving common patterns and problems once.

Working on a multi-brand design system team forces you to make important distinctions between what makes a meaningful, robust system and what's needed to retain the essence and style of each unique brand.

We’ll be blogging more about the design system as it…

Why I think design systems actually have more in common with an automotive assembly line than a graphics standards manual

The Wolfsburg VW factory producing the iconic split screen bus in the mid 1950s
The Wolfsburg VW factory producing the iconic split screen bus in the mid 1950s

There are two sides to the world of design systems.

One side leans towards the systematisation of graphic design, UI design or a visual language. This is to create order, meaning and harmony across design assets and to provide rules to design any new material from. I look at this as an extension of a graphic standards manual or even a detailed brand guidelines document.

The other has more of a focus on design rationalisation, standardisation, delivery and adoption. For example, making common components reusable across a product line and creating detailed usage guidelines for the design and build process…

It doesn’t matter how good your design is if nobody waits around to see it.

The waiting is the hardest part

There are varying degrees of need or desire to access a website or service online. For example, accessing a government service is usually out of necessity, while visiting an expensive watch shop would usually be about desire.

The willingness for people to wait for an experience might include:

  • If it’s something they have to do (pay car tax)
  • If it’s something they know is worth it (best stock of vintage car parts in the country)
  • If there is no other option (exclusive retailer on this limited edition vinyl record)

Common reasons for not waiting might include:

  • There are plenty of…

Spacing your typography and components to avoid surprises in development.

I’ve worked in organisations large and small, agencies and in-house. One thing that’s been common everywhere is the designers’ shock at how spacing has been implemented to their designs in production.

“The spacing is all wrong” — Designer during QA process

First off, it could be that the frontend developers have established spacing units that are different to yours, they’re using a “closest” or “looks about right” approach but that’s not what I want to talk about today.

Sorry fellow designers, the most common reason for this I’ve found has been a problem with the design files or specs themselves.

I’ve worked in small and large organisations. I’ve been part of a centralised team of designers, worked embedded in a product team and also been the only designer of any kind in a large business.

Some organisations fully embrace user-centred design, with every member of the team, regardless of job title, feeling ownership of the users’ experience. Perhaps more commonly, a designer’s job is to advocate for users in companies where there is some kind of disconnect between the business and its customers. Put simply, to be the voice of the user.

Even the most user-centred organisation can become immune to or disconnected from users’ problems. Messages sent through support channels may not be getting to the right people, stories get boiled down to a single bug report without context, individuals can feel of helpless…

If you’ve bought yourself an old Beetle, Split, Bay, Karmann Ghia or even an aircooled Porche, the chances are you’re going to need to do a little bit of maintenance yourself.

The good news is that the type 1 upright engines are one of the easiest engines to work on. I’ve gone from having zero knowledge a few years back to being able to diagnose and fix most of the common problems myself, you can do it too!

For this article I’ll only be focusing on the top end of the engine as this is where the majority of DIY…

Back in the late 60s Gregory Sylvester “G. C.” Coleman, the drummer of Washington DC funk and soul band The Winstons recorded a drum interlude that changed the world.

The Winstons released the single ‘Color Him Father’ in 1969, however it was the 6 second long drum break on the b-side ‘Amen, brother’ that would later become the backdrop to thousands of tracks and define entire genre of music.

The break

The YouTube link below will drop you into ‘Amen, brother’ at 1:26. At the point of reading this you either already know what you’re going to hear or you don’t.


Using emoji to explain the principles of BEM

I’d heard the term Block Element Modifier (BEM) used by many of the frontend developers I’ve worked with over the years. It wasn’t until I started on my current project that I actually needed to understand what it was or what the benefits of using it might be. After hearing the same questions about CSS class names from users of the product I work on, I decided to create a short intro to BEM primarily aimed at designers, although I hope it helps anyone else that’s new to it.

What is BEM?

The BEM methodology is a way of naming CSS classes.


Dave House

User Centred Design, Design Systems and aircooled VWs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store