Patterns Day and my thoughts on design systems

A couple of weeks ago Clearleft hosted Patterns Day here in sunny Brighton. I don't often go to web conferences but I fancied this one as clearly Design Systems are becoming increasingly standard practice.

The videos from Patterns Day are available over here.

As ever at Clearleft hosted events, the talks were really varied; from the theoretical, to the practical, to the abstract (at which point I had to bail to go to my son's school fair). I think the main thing I got out of the day was don't get carried away with monolithic design systems; if it doesn't make your work quicker, easier or more maintainable, don't do it.

There were quite a few smaller outfits there, freelancers and people running tiny outfits like amillionmonkeys (I sat next to one poor girl who was just learning HTML and was slightly overwhelmed!) The cost / benefit of a design system when you're a smaller team / freelancer is very different. My policy is as follows:

  • However small the job, always do some kind of basic style guide. I do this primarily to help the designers I work with understand the issues around consistency and cascading styles. My starting point for this always Poor Man's Style Guide, which gives you HTML for every base element you're likely to use, then at the end of that I just add components. You can find an example of one of these here. Crucially there is very little overhead here; there are no partials to include, no compiling, it's HTML, CSS and nothing else.

  • For bigger projects, a more developed system is necessary, but I'm always careful to not use every feature of these. So for example, most of these systems allow you to provide text in JSON, but that's slowing me down, it's another file I need to open / edit / maintain. PatternLab also encourages you to work all the way up to displaying full pages in your style guide, again for the kind of projects I'm working on, that feels like hard work, especially when I'm generally not building my project in the same templating language as the design system I'm using.

One point that I think is important, which Rachel Andrew mentioned in her talk, is that when using a style guide, your workflow should enforce you to keep this maintained: in particular one build process should update both your style guide and website.

Show Comments