Why WordPress designers should consider design systems for their themes

Last week the UK Government design team published their website design system publicly and it’s a really good example of a huge public company trying to create consistency, and ease development, on a massive project.

I really like that the design system focuses on simple, easy to understand components that have been well tested. For example a few years ago they wrote about the design process for the date picker. The UK government are building web services for the entire UK population, so whatever they build has to be simple to use and easy to understand for people of all abilities.

There’s been a lot of talk over the last few years about Design Systems, style guides, and pattern libraries. They’re an increasingly important element of web design, but it’s something that is largely missing in the WordPress world.

I think there’s a couple of reasons for this.

First, building WordPress themes has more commonly been done by designers, rather than developers. People who think in terms of aesthetics, rather than code, reuse, and structures.

Secondly, WordPress doesn’t really lend itself to using a design system. There’s a lot of code that WordPress spits out that has custom class names (the Bemit project, by Sami Keijonen? is an attempt to address some of the shortcomings here), and inconsistent html structures that don’t play nicely with design systems.

However, things are definitely changing and now is a good time to start looking into them. Gutenberg, which is currently a content editor but will eventually be a site editor, is a good chance to rebuild the html in a more consistent form, better following current web standards so that we can more easily design new sites for them.

Since everything will become a block, we need to think more systematically so that the content that may have once been placed only in a sidebar will now look good in whatever location a user decides to put it. It’s going to be quite an interesting challenge since it’s so different to what we had before.