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.

Let me know what you think on Mastodon, or BlueSky (or Twitter X if you must).

Link to this page

Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.

WordPress News

The latest WordPress updates from the WPBriefs Podcast.

Related Posts

20 Jul 2016

Empathy in Web Design

I wasn’t able to make WordCamp Europe this year, but they’ve been really quick at getting all of the talks online, and so I have been watching some of them – and this one stood out.Morten Rand-Hendriksen is an experienced...
27 May 2013

WordPress: 10 Years Young, What Does The Future Hold?

WordPress is now 10 years old. I started using wordpress 9 years ago – which means I joined the WordPress community early on. The reason I chose WordPress is simply because of the fabled 5 minute install process – I...
08 Jul 2013

A Redesign for 2013

It’s only been a year since I last redesigned Binary Moon – I’m generally content to redesign, and then sit on things for a while, let it stew and evolve. However a lot has changed in the last year. Design...
01 Mar 2019

Open Source Sustainability

A lot of the internet is powered by open source technology. WordPress being a perfect example. This article looks at the practices behind open source development and considers just how sustainable it all is.One story looks at OpenSSL and how...
08 Apr 2019

WordCamp London 2019

This weekend I went to WordCamp London. I think it was my 5th WordCamp London and, as always, it was a really interesting weekend. I learnt a lot, and came away with a bunch of ideas for things to try...
25 Nov 2010

WordPress Advent – Seasonal WordPress Savings

In January or February this year I had the idea of making some sort of advent calendar website for christmas. I wanted to share something with the online community – I just wasn’t sure what.In mid October I started thinking...