Are design systems worth it?

[00:00:05] Nathan Wrigley: Hello there. For the last couple of episodes, we've been looking at components that make up a website. In doing that, we are building a library that we can refer to, particularly for the next time we build demo websites on the show.

This could be considered a part of a design system, but apart from knowing this is a hot topic, we're not sure what a design system is to try and unpack this, we're delighted to be joined once again by our friend Paul Lacey. He, unlike us, has actually managed to put some form of design system together for his own work.

apart from my usual, hello to David Wamsley. Hello, David Wamsley. Hello. I'm gonna also, yeah, thank you. I'm also gonna say hello to Paul Lacey. Lovely. Hello. Now that we've got the introductions out of the way, Paul, I just a second because our listeners, if they haven't heard a previous episode, they won't know who you are.

So I'm gonna put you on the spot. Give us your potted bio quickly, if that's all.

[00:01:01] Paul Lacey: you're correct to first of all say I've done some form of a system, so I'm glad you said that. also, I'm not a full, on expert in this. I'm much like yourselves just knowing about it, see and aware that I'm doing some aspects of it, interested how I can improve it myself, and looking to see where things are going.

And I know David does a lot more probably academic study of this sort of thing because when we talk, I know he's read books on it, which I haven't. And, but yeah, so what I am a web designer developer, probably started around 1999, I think it was. I've seen a lot of change from the, using, non breakable spaces for design for instead of, CSS.

So when I started, there wasn't really any CSS right at the beginning. There probably was, but we weren't using it at the beginning. Then CSS comes in and then the.com boom and burst and all that sort of stuff. And then I think we're still. We're still recovering from that now, just in terms of how the whole western world seems to think what web design is or should be.

And I think this whole design system thing is called because it's lays down some rules that if we all, if everybody got on board and followed it, it would make for much better websites, I think. And, but where we are, I think these days is that certain level of organizations are good at, dealing, implementing these things and running them because everybody's on board.

And then as you go down and organizations get smaller, you get to a point where, the web designers are on board with these sort of things, but perhaps not everybody else is. So it's a real challenge to figure out how you can have these systems in your mind and use them.

but there are lots of factors that can derail these sort of things. So I'm hoping that we might get to the bottom of some of that today. we might not even get as far of defining what all this stuff is, but we'll see.

[00:03:08] Nathan Wrigley: Yeah, indeed. So as is always the case, David has put together some show notes, which I'll share on the screen, but you can find them.

Oh that didn't work out so well. There we go. You can find them at no script show and then slash the number 2, 2 22. So no script show slash 22. Shall we should we pop that on the screen, David and crack on and I'll basic hand the bat on over to you at this point, I think.

[00:03:34] David Waumsley: Yeah, it's only basic notes so we can try and get some definitions 'cause.

Honestly, you say, I read some books on this stuff. I, when I read articles and I hear terms like design systems used in different contexts, I don't know what people are meaning by it. There's other things like, DI design tokens, I dunno what that means. And there's different definitions out there.

So I thought it'd be good to chat because Paul and I have had some conversations before. 'cause it's the holy grail to try and find some way, particularly if you're just working on your own, to efficiently create your own websites and backing out. WordPress days, we've always tried to get some starter website.

Anyway, let's go. I, put a couple of definitions up there, which may be Nathan, you'll need to read because I'm on a very small screen and I can't read what I've written. That's

[00:04:21] Nathan Wrigley: fine. Yeah. So again, I'm reading off the screen, no script do show forward slash 22, and the, headline for that is, are design systems worth it?

And so we're gonna begin by asking the question, what do we mean by design systems? There's a couple of quotes, which I'll just read out. The first one says, A design system is a complete set of standards intended to manage design at scale using reusable components and patterns. And I can, that's the Norman Nielsen or Nielsen Norman, I can never remember group.

and then a source. From Figma, the design tool, a design system is a single source of truth that reduces design redundancy and accelerates the development process. So I guess they're broadly similar in a way. Do you want me to read the other bits about the, who uses a design system, or should we dwell on the, what do we mean first?

[00:05:12] David Waumsley: Yeah, I, I like these definitions. I don't know about you, Paul, because they're, pretty vague. So under this definition, what you've been doing with the page builder that you've used, you've created this whole system to be able to put together websites through these kind of row templates, haven't you?

So you can do that and there's nothing there that would say, that's not a design system, I don't think. And you could argue even what we're trying to do at the moment, which is, it's interesting because our series that we've done before, I was model it on the idea of what you did.

Paul, in a way was thinking, okay, what I want to do is to have not necessarily row templates because I'm working much more with grid and, my page layouts might be different, but the fact that I thought I needed something so I could grab this bit here and have a header here to here about, a middle section, some, accordions and stuff like that.

As I've gone on, you realize for, us, that a component ends up being an examination of what the HTML and CSS options are when you are constructing something. It doesn't turn out to be something I can easily drag and drop in.

[00:06:28] Nathan Wrigley: So does that, when you say that, so obviously rows, we understand what that is.

That usually represents from the left to the right of the screen and it's a horizontal block of stuff. But a component is the, bits, if you like, that might sit with inside that. But are you saying then that the component, when you really get to it and you do this work over and over again, you realize that even that sort of definition and clarification doesn't work because it might be that you want to take out a little bit with within that component itself.

And so really what you are forcing yourself to do is forget how it looks, forget the bit that you could drag and drop onto the canvas for want of a better word. You are saying worry about the actual code that makes that up. That's the component. The ht

[00:07:12] David Waumsley: Yeah. we started ourselves trying to do the accordion and straight away we realized that where the accordion is used and what we expected to do, so we'd have to have a whole series of them.

So in terms of us getting some sort of design system was really a. But we're putting together something as part of our series, which ends up being nothing more than a few sort of bullet points about how this will work for accessibility, when this is appropriate to use, and not that is more useful than the drag and drop component itself, So it's been quite interesting, our own attempt to build a design system, which gets more naughty the. The more you get into it. But anyway, sorry. I, no.

[00:07:51] Nathan Wrigley: I'm gonna, I'm gonna keep this going if you don't mind. 'cause I think this is interesting because the word design by definition, I think is the use of the, I, at least in my head, I'm, imagining what I can see more than anything else, as in what is put on the screen.

And obviously you've got tools like Figma, that's their bread and butter, isn't it? Is what is the whole point of that tool is to create things that you can send to people and you can see it. But what you are saying is that for you, that definition, you've gotta atomize it a little bit further and go, into the code.

Because it might be that, okay, there is an accordion, you can see that's fine. But because of the various different ways you could use an accordion, it might not look the same each time. And design system already we're we've come against some trip wires because I'm thinking that's what you look at.

And it, and not really, that doesn't live up to the definition you've just described of code. So that's interesting. I think.

[00:08:49] David Waumsley: Yeah, it's quite interesting. If you look at the design systems, well-known design systems that are out there, like there is, the material design system by Google. there is, there's Nord Health there, there have a big design system, which is perhaps more about the look of things that you might bring in.

But then when you start to look at, I think interestingly there's been a move, if you look at the, there's design systems as well for the UK government, so there's one that will go with gov UK and is now the same with us as well. And when you look at those, they. There, there will be, there's elements about their own, but they're very simple.

their public sites have to be design-wise, quite simplistic. But there, when you look at it, it's often seems to be a lot more about the rules about how to make this particular thing accessible. it'll be, and it, gets much more closer to the component of the design system, if you like, is really the raw H two ML, Okay. More often or not.

[00:09:59] Nathan Wrigley: Yeah. Okay. That makes sense. Paul, do you wanna do any more on that before we move on to the next section?

[00:10:04] Paul Lacey: Yeah,

sure. The, definitions, I much prefer the n nng one with a complete set of standards intended to manage design at scale using reusable components and patterns.

just 'cause it just, It just gels with me a little bit better. I would like, personally in my life, I would remove the word complete and it would be a set of standards. And I, because it has the word intended, I like that. 'cause it's, saying that we're trying to do this rather than the, other definition from Figma.

I think that will definitely ring, will definitely vibe well with UX and ui, designers who use that Figma product. I think, this whole concept is a single source of truth that reduces design, redundancy, accelerates development of process, et cetera. I just, what comes to mind with all this sort of stuff is that the, whole concept of design system can turn a lot of people off immediately because it immediately goes, sounds technical and immediately sounds like, ex exclusionary to people who don't know what you're talking about as such.

So I'm thinking, when you take any of the companies that we might have mentioned, If anyone who's not a designer or developer and not thinking about the HML or these, global colors or variables and stuff like that, it's are we even part of this conversation? So if you take the actual, the end user audience, how can someone in the audience or the audience of a website contribute to a com conversation and feedback on the design system and how well it's used being used?

How can HR feedback on that? How can CEOs feedback on that sort of thing? So I quite like the NNG one because it's more open also, I know we don't have it up on the screen, but the, looking at the, a couple of those, design systems, David, that you highlighted. I really do the, Gov uk, the UK government.

design system. because it, it's accommodated everybody that needs to understand it. It's, given the code. It gives you the code snippets and it shows you what you should be doing on that level. But the way it communicates about its design system, patterns or components is in human language.

whereas the three of us might talk about, we need a design system for an accordion, what's the point of the accordion? whereas the UK government website tends to say things like, here is a, design system for when you need to get somebody's credit card details for them to pay a bill.

And then, so it gives you the kind of point of why you would even care about this. And so then the finance department is saying. Oh, this sounds good. So we've got a more efficient way to get the money from people who owe the money, or we also have included in that design system a way for them to, present to the user what to do if they have a problem paying this bill.

And so everybody's benefiting that, the different departments are understanding where, what the point is for them. what's in it for me in the finance department to be, to care about this design system that, Dan from head of Design was going on about in that meeting that I was falling asleep in.

so I really liked that because, and that this is maybe why, if you've struggled to get started yourselves, it might be because. why it might be easier for me is because I don't have to worry about the HTML too much because I've essentially made a decision to not care about it as much, which I know some, if somebody might listen to this and be like, what the heck?

what kind of professional are you? But essentially, I'm living in the world where I need to use WordPress themes and WordPress page builders, and a bunch of those decisions are taken away from me. So I'm straight into the point where I'm thinking about, I've got a decision, I've got two options at this point.

I can go straight into thinking about the elements that I want. So do I want a row, let's say with, a call to action in it and those sort of things? Or do I, do, I go into purpose led thinking, which is what I've been trying to do more recently. Essentially, it's the same stuff, but the, purpose again, of a pricing table.

So you start with the purpose and it is to present the. options and recommend an option to a user. So how do we present the options of our product and recommend which one is probably right for them? And if we think about it from that angle, then we've in, we've included into our design system, the point of the element or the pattern or the component, and then we work backwards from that.

And then eventually. You can take that, rationale of why you need this component and you can stop at the point that's comfortable for me, I stop at the point where I'm dragging these elements in and designing them in Beaver Builder. Whereas if you want, you can go further back and ditch that, aspect and get, and then go, we know the point of it, we know what the users want.

So now we know what HML tags we might need as opposed to just looking at some other, I'm not saying you do this, looking at some pricing tables and seeing what elements appear to be there and then coding those up. So you've always got, like the government, UK government website has, you've always got this design component or this component or pattern can, be measured as failing or SU succeeding because there is a mission for it as such.

So I dunno if any of that made sense, but that's, That's where the two strict ones, like the Figma one to me is, a, I'm reading it and thinking that this is less inclusive as the one above it from NNG because the NNG one is talking about its managing design at scale. It's reusing components and patterns, and it's intending to improve that process rather than be a kind of, elitist sort of set of Figma documents that nobody else understands.

And if you don't know, and if you come in as a designer to our team and you don't know what this is, gosh, what's wrong with you?

[00:16:34] Nathan Wrigley: Can I try to just encapsulate what you've just said, I think in one sentence? no, It's no. But in order to just clarify in my head. Yeah. Yeah, absolutely. So I think what you just said then would be something like this.

So we'd have a Paul Lacey quote on that page, and it would say something like, A design system is a text description of design of the purpose. Of design elements, visual design elements, which are reusable, scalable components and what have you. So it's, got that kind of description bit in text as the focus, like the Gov UK one that you were describing.

And yeah. And because you've described its purpose, you've made it more accessible to people who don't have a, a background in graphic design for want of a better word, because you've, explained what its point is on the page. Is that about right?

[00:17:26] Paul Lacey: Yeah, it means that you could have a conversation with the finance department that Informs how you should make this, these components and patterns that fit into your design system. like further down this document is probably some stuff about the ingredients of a design system. Like the finance department doesn't need to contribute too much about the brand colors. In fact, they don't need to contribute about that at all.

And they probably don't need to. I forget what it's called. There's, the components, the patterns, there's, the really little things. They're like the variables. What are those called? tokens. Tokens. So that stuff is to me, for the, brand and the design team to know that, green means go, red means stop.

Amber might mean, think about it, blue means information. they might make those sort of decisions based on the brand and, but the, actual HML elements that, so the HML feels that it's more of a, it's more of a human conversation with, the, stakeholders and then the brand element is more of an internal design, creative, side of things.

but yeah, I think Nathan, what you more or less said, is, probably a better definition just, for me because, I'm, I have to have conversations with clients all the time and I have to try and justify why I've done something and I can't just say, because Figma told me to, based on their amazing design system As such, no, no offense to Figma.

They know exactly what they're doing. but to make it c communicable to who? The people I'm trying to convince to not have a slider.

[00:19:14] Nathan Wrigley: David, should we move on? Or If you've got things to Yeah, let's,

[00:19:16] David Waumsley: yeah, we can actually, because we can widen it up. I think once we've covered some of the points we've put down here, so we've just quickly, who uses a design system? So I mean there's, I guess there's two different types in that sense.

There is the large sites that need consistency as they keep changing their website, regardless of who's employed at the time. So they need some. Set of rules, if you like, about how this, the styling and the content is added to a particular style to a site. And then we've got the, people like us, maybe were solo designers or maybe small groups and that who want quick ways to assemble websites and might use a design system like that.

And that's where you might, borrow something that's already existing out there. nor, or the material design or something from Google as a starting point, or effectively even as a lot of us do, we use a, it's not exactly a design system, but effectively it gets close to it. Something like Bootstrap becomes a design system tailwind, they become, even though they're CSS based, they become a sort of design system we can borrow, And then of course, and then the big question about design systems, and that's why you see a lot of debates about, you don't need a design system, you're wasting your time with it. And those people who say you absolutely do need a design system. And I think this is where you hear all these different conversations.

'cause everybody has a different idea about what that might mean to them. So you if you invest too much, you can invest. As I've done before, invested a lot of time trying to copy Paul and what he managed to do with his Beaver builder. I'm so sorry.

[00:21:01] Paul Lacey: I'm so sorry. We'll have led to nowhere.

[00:21:04] David Waumsley: No, but I'm just trying to do the same thing when we were both using the same page builder. Yeah. And I was trying to do the same thing as you, and you actually managed to get something that was useful, that worked for the jobs that you needed to do. I was envious of that when I started doing something in a similar way.

I got myself so caught up in. Sort of little elements. And the same thing has exactly happened in this series as well. When you get into components that I talk myself out of ever getting a system that works. but maybe one day I'll get there and it'd be very thorough and it will work for me, but it's quite interesting.

So I'm definitely in that. Gotta invest in the right thing for the job that I'm doing. I think you've balanced that, right? And I, that's why this interests me how, to do it for us

[00:21:50] Nathan Wrigley: anyway. Sorry, I'm going off a bit there. That's okay. No, that's fine. So this is, the section who uses a design system?

have we finished on that one? There's something

[00:22:00] Paul Lacey: interesting on that. I just would say like the large sites that need consistency, regardless of who's working on them. This reminds me of my old, company that imploded Dicky Birds. this is why you should listen to me. I such success.

but it reminds me, 'cause, myself and my business partner both had different roles. we were working with totally different clients. my. Business partner Piera was working with a major, car manufacturer. One, the, one of the biggest ones in the world. And that was like our, probably our biggest client technically.

And that was pretty much all he did, apart from a few other bits where he would contribute to some of the work I was doing. And I was working with SMEs and charities. And so we, we would argue actually when we collaborated on my projects, because his mindset was way more, long term than, mine. And I would be asking things of him that were borderline offensive to the way that he was learning to, he'd learned to work, working as kind of part of a team at Nissan because essentially he was, he became integrated in the team and was leading UXs and UIs and stuff like that.

So it was a lot of separation. In these things, there was a lot of, rules and you couldn't break the rules because if you did, you would be, someone would hold you to account. And it's interesting 'cause you've got those two first ones, large sites that needs con consistency. So we could say large companies or brands and then solo designers who want to assemble websites quickly.

but it's the lifespan of the design system for the large brand is basically infinite. It changes, but there's always a design system that is being used every single day. Whereas the web designers who are doing a client job, they might have a design system that's a lot looser than that, and they bring that design system into the job.

They do the job, and then the design system essentially semi-retire. And the designer hopes that if the client goes off with that website that they carry on and try to make use of the systems that were put in place there. In most scenarios, they possibly don't. And that's why you have websites that launch and then they just degrade over time and become stale, and they lose the, initial, effectiveness that they might have had on day one.

And so there's a lifespan that goes through these design systems that is very short with web designers. They have a drop in design system that doesn't use all the ingredients, but it helps 'em get the job done effectively and quickly then. Is gone. And the website just lives there. But with these big companies, the design system is part of every single decision.

And nothing goes on the website unless it passes the design system. So it is just, we would argue, because I would say things like, I need a design for this by Friday, and it might be Tuesday already. And he would be like, so what do you want? Do you want, are you gonna give the UX to the client first? I was like, no, we just need to give them the design.

And, I'd be, and I would be trying to, he'd be saying, we're skipping the stage. And I'd be saying, we're not skipping the stage. What we need to do is. Internalize that stage with our experience and just get it done and we need to use our experience to get the UX done. And he would say, no, we need to do the UX and get sign off on that before we're doing any design.

And I would be saying, we will get fired. So it just is the kind of the friction and just like none of us were wrong in this. I was just, we were just living in different environment and he was right actually. And, but I was looking after the wellbeing of a company surviving in a, world that doesn't appreciate design systems.

okay. Should we move? Yeah, let's move on. Yeah.

[00:26:11] David Waumsley: The next section, once largely, I've taken the main bullet points actually from an article that is, that I've linked to, which is the Nielsen Norman Group one. So it's basically there, 1 0 1 on what is a design system. I did add something extra to this, which is design tokens, which is a term that's banded about, but what makes up a design system.

So largely it's got style guides, design tokens. You could argue that they overlap with each other, component libraries and maybe pattern libraries. That might be one way of breaking these things up. does that sound right to you, Paul?

[00:26:45] Paul Lacey: Yeah. Do you know what, I didn't even know what design tokens was until I saw this a few days ago.

So I had to, I, understand what it is now. It's almost the technical layer between the brand guidelines or the style guide. So it could be like a CSS variable that is, saying, let's say a success variable. And that might be that the style guide informs that to be a green color highlighting.

So am I right about that? It's the,

[00:27:14] David Waumsley: yeah, I think it, it depends. I think the term comes from, I believe Salesforce and their own design system. And there's a particular, I think a name Gino and I've forgotten their name, who's, really championed that. And she would very much see those as separate to, a CSS variable, where other people might see it as akin to the same thing.

She would see it as, do you know, can I step back and just, talk about why I think. This is interesting or where it gets confusing. 'cause I would think 2014 was such a significant year for, revitalizing the idea of getting, so you've got this whole bunch of people. You had Brad Frost Atomic Design, which we talked about on this show, didn't we, Nathan before, which is, a way of thinking about how you build up a website out of Lego blocks, and at the same time you had reacts JavaScript component library appearing.

So you've got that whole way which you love your

[00:28:17] Paul Lacey: favorite.

[00:28:18] David Waumsley: Yeah. But these two things, without a doubt they influence, the future of things like Gutenberg for, WordPress. It was only in the next year when, Matt Mullen, we was talking about, blocks and the idea that JavaScript was the future.

So you've got that. At the same time, it was about the same year where you've also got this. Country thing going with, I think gov uk it was the year that they won the only design award, national design award for a website before for going almost the completely opposite way with their own kind of design system.

So I think a lot of, when we talk about it, we have different ideas. So people think it's made up of, we're, thinking of react when we talk about components, people think of react even though there's web components. Yeah. Which predate it. So there are, I think that's why a lot of our, disagreements on what we think that is.

But yeah, design tokens is a word that I hate using because in a way, I don't know what I mean by it. It, I think that they would see it as one of Brad Frost's, the smaller atoms that make up a section of a website. but style guides, and this is where I think we mix things up because I think style guides is something that could stay, couldn't it?

for a company for all time. When you try to realize those style guides, that's fine. They can be turned into CSS that you go by. But when it comes to the, there's a gap in here, I think, when it comes to the rest of the design, because you either take the view that you're making up with Lego blocks, these components, but then you're failing to see the designer as a whole If you work that way. and it's the same when you build pattern libraries. it's making an assumption that pattern will remain true for all time. Where I think we already know, technically this is very difficult as we see CSS particularly changing at the moment. it. the design system that I was working on, that you are working on is based around the fact that the only layout system we had for the web was Flexbox.

Now we have grid, it throws that out. Now we have container queries that throws it out soon. We are about to get into more things with, if statements where we might be able to program in all sorts of different types of arrangements for our website. So I do think, if you try to invest in a design system at the very technical level, it's very difficult at this time.

You could waste a lot of time, but style guides maybe are something that can remain in a company as you always use this particular color for your, your links and for your header and your photo or whatever.

[00:31:09] Nathan Wrigley: I'll just point out that if you, if you go to no script show slash 22, there's a couple of links on the what makes up a design system, section.

One of them links out to, the Norman Nielsen Group as an article called Design Systems Versus Style Guides. And the other one, heads off to Figma, docs Token Studio, tokens Studio for Figma. So there's a couple of links provided by David there if you want to explore further. Yeah. Okay.

Should we move on to the next bit? How do we get the design system? All right. Okay. Three options off the shelf, adapted from other sources or custom, I'm guessing off the shelf, is what most people are gonna use.

[00:31:55] David Waumsley: Yeah, I, I. I guess so. I dunno, we've always tried to build and in effect, what Paul's done and what I've always been trying to do as well, the same time was always a, to some degree off the shelf in the sense that we're, held to the platform that we, using there.

So we've got some restrictions that come with that. I do think it's interesting though, with things that change. I think with, when you get sonic off the shelf, you are trusting that company. So when you look at, there's been some huge errors with, material design. they totally broke the web's accessibility with forms.

They decided that placeholders were a great thing to do and you can remove your titles from your form. making forms terrible for ages. Same with Bootstrap. It decided, bootstrap, I think four or something. It decided that. They were unsightly to underline our links, effectively breaking the site for whole, breaking the web for a whole bunch of people.

So I do think, there is an issue when you look for off the shelf. Where can you, particularly as things change, particularly as we become more aware of getting back to the basis of the web, making sure that it is truly inclusive, that it does, look at accessibility. This is something that I think has grow.

It wasn't there so much back in 2014 when I think we had this resurgence of the idea that we could have great design systems. So I think now getting something off the shelf would be quite tricky unless, unless it was something I would get great ideas from, the UK Gov side or Gov UK side because you know that they, as a, they've learned the lesson that they need to make sure that what they put there serves everybody.

[00:33:50] Nathan Wrigley: so are you a bit more, so there's three bullet points there. again, this is for people listening to it off the shelf, adapted from other sources. And custom, David is your plan to do a bit of two in the hope of getting to three. So you're adapting from other sources, but doing it in a custom way. So

[00:34:07] David Waumsley: it'll be interesting to see what we build up if we actually end up with a design system.

'cause we're doing this series where we're looking at different bits of websites effectively, where, we started with the co word components, but it's bits and bobs of websites that we're talking about. next time we're talking, we're gonna be talking about the head as a component, something you don't see even on a website.

But I see it as a component because there are certain rules about how you might construct your head in your document. So I would, so I'm going there. Whether that turns into a design system, it is already for me because of the fact that I'm saying. Okay. I've got little notes in my, 11th at the moment, but it could be equally in a WordPress version of the same thing.

Little notes in this section where I put my head code and where I put certain things. So there is a sort of design system building up. But yeah,

[00:35:01] Nathan Wrigley: anything to add there, Paul?

[00:35:03] Paul Lacey: yeah, so off the shelf is probably, like David said, always a little bit tricky because off the shelf is normally a digital product type thing or something to that effect that is trying to help you get from A to B super quick.

And it has to promise certain things that make sense to the person who is trying to cut some corners to get somewhere quickly. So I think that's when, we've all lived in the WordPress world for quite a while and we're aware of the amount of templates you can buy or get for free, for different page layouts, row layouts, that sort of thing.

However, I, think that the most of the three of us. We have been exposed to all of those, bought a bunch of them, look, use the free ones. And then we still end up building websites with our own layouts. And we, it's, and we perhaps just look at those for design inspiration sometimes. I think, oh, that's quite a nice, but I'm not gonna actually use that row because it's got this problem, or it's not really, it, looks completely different than the rest of my raise, but I'll take some ideas from that.

And so I think that's one of the problems with design systems, off the shelf is not all of them, but, they can suffer from having a, an agenda that is based around them getting sold as opposed to long term solving the problem. Nothing wrong with that. It's, they do some good, but I just think that's why so many of them just don't, don't succeed perhaps. I know when you look at a lot of the template packs within WordPress, they have to, their agenda has to be bling. They have to appeal to the person who can't design, let's say, who needs to look like they can. And we'll be like, oh, that looks cool. I'll just grab that row.

And then, and that's why you see some absolutely horrendous websites that look like, do you know those, that those kids toys where you ma match the different head body clothes and, you can put like the, put a skirt at the bottom and then a top hat at the top. So you get this kind of thing that the, somebody just doesn't realize is a complete Frankenstein website.

so me, I'm probably doing custom to, but I. Using, using a system that locks me into how I have to use it. But I'm probably essentially trying to create my own ones that work for me. So I'm, eating my own dog foods, I think is it or whatever, but creating systems that work for me and then distributing them to a few other people.

Yeah. but I'm totally taking influence from other things that I see. for instance, within the WordPress space, I think one that does quite well is, I think there's a theme called Ollie. Is it Ollie? That's right. Ollie. That's

[00:37:55] Nathan Wrigley: right. Yep. Yeah.

[00:37:56] Paul Lacey: And they've had to work very hard to.

I try to reduce, I assume what they're trying to do is they've got a product and the big challenge they've got is that they, the system that their, website is built on is the Gutenberg block editor, which has tons of cognitive dissident for end users. So people go into it, hearing all the hype, and then they bounce off and then they go straight back to Elementor or something like that.

So Alias had to work very Ollie. the theme alias had to work, and the team now have had to work very hard to try to onboard customers who then they hope will find this totally usable. Make sense? Because the UX is very good in the templates that they provide. The onboarding is very good, and so they're trying to create like a good experience to stop people from bouncing back to elemental.

So when you look at their templates, you can see that they've put a lot of thought into it to try and stop people from failing at the first hurdle, compared to templates that you'll see elsewhere. yeah. My, just for, information, what it is that, when you've mentioned I'm creating things?

There's a number of systems that I've been creating. They definitely wouldn't tick all the boxes of the, hardcore elite, design system gurus. They'll be problematic in all sorts of ways, but there's probably three different levels of, that I've been doing. The one that I'm doing at the moment is for Beaver Builder, and it's because Beaver Builder has the ability to have global colors and variables and stuff like that now.

So I can now build a kind of wire frame type set that is built around purposes, like I said, on the government. Website. So the purpose of this route or this page is to achieve this and that, page will have patterns in it, and then it'll have patterns will have components in it that are all reusable and they are feeding their style from the style guide, for instance.

but mostly it's pattern libraries, I would say, and the component libraries are just natural to me to put into those. So that's one thing that's my favorite one because I really feel that'll be super useful to me, to use. So I know it'll be useful to other people. the other one is commercially out there not to buy, but it's with, it's for an agency who do a lot of websites within the kitchen and bathroom design industry.

So I created a design system, or you could call it a starter website. Essentially it could be called a design system. And that means that they internally no longer have to come to me every time they want to launch a website. I just deploy the system. And I've trained people who are not web developers and designers to build websites, and they are building whenever they've tried to do it.

Before this, they were building, Frankenstein websites that they thought look fantastic and their clients love too because they were letting their clients tell them what to do and everyone was happy and they got paid, but the customers weren't buying for the kitchens. now they're making, websites that look really cool and have a following all of the templates and are based on all the things that we learned for the last four years, developing kitchen websites, kitchen design company websites.

And they're able to deploy these websites in a couple of days. And now they're design systeming their content as well, if that's possible. so because they know now, okay, when we have a page that has a showroom is about the showroom, we have two things. We have a company that has one showroom or we have a client that has multiple showrooms.

This is how we deal with a company that has multiple showrooms. This is how we deal with a company that only has one showroom. So that will then mean that when they have multiple showrooms, there'll be a choice page, which showroom do you want to go to? And then that will lead to the page, which is the, this is a showroom page, which tends to be all about telling a story of how beautiful your experience is gonna be when you come in and have a coffee, rever us and sit down and have a look and try out the different appliances and blah, blah, blah.

so that's the second one. And the third one is a template set that is based on a content. Copywriting, copywriting framework. I won't say which one it is 'cause I probably get in trouble. but it's loosely based on, a copywriting framework. that basically is another in ingredient to these design systems.

So you've got the end use, you, then you've got, where does the words come from? And then you've got the design aspects. So I've mixed it up and I don't have one yet that is all three of these things, but that's where I'd like to work to at some point. But I think that's why if you really want a good design system, perhaps you start off the shelf for your inspiration and then start creating your custom one that is adapted from the things that you're learning.

Maybe that's the right way to do it. 'cause if it doesn't work, it's gonna be a total waste of time for everybody. There's a

[00:42:40] David Waumsley: bit of all three there, isn't it?

[00:42:42] Paul Lacey: Yeah.

[00:42:43] David Waumsley: it's really interesting what you're talking about. the thing you didn't mention is that StoryBrand?

[00:42:49] Paul Lacey: Yeah, that's the word I was trying not to mention.

'cause I think if you use StoryBrand, you were supposed to pay a license to StoryBrand. So I don't think it was that one David. Actually, I think it was something similar StoryBrand, but it was, I built a system that uses, an idea similar to StoryBrand in which is based loosely also on the, what is called the, pain agitation solution system.

Yes. Yes. So define the pain that the customer is feeling why they would want their product. agitate that a little bit. What is the problem that will happen to them if they don't do something about this? This doesn't have to be a negative thing. It can be that you are missing out on the amazing thing that can be the agitation and then the solution as you present.

the thing that you offer that takes, that turns 'em from the loser that they are, if they don't go with your product to the absolute hero that they will be if they buy it. And then you provide evidence of other people who were losers before they chose your amazing product and are now massive heroes.

so, I think some of the technical design systems, are design and code focused. And then when you hit the, when the rubber hits the road, you have end users and you have, how should we communicate to those end users? And that's why I think like a design system needs to be a bit looser and include end user goals, business goals, and a copywriting, direction.

Yes. What are you, what's the, what's the consistent tone of voice that you can have throughout this? And we've, StoryBrand, for instance, it's, always about making the end user feel like the hero. Yeah, so if, if you say, we're using StoryBrand, this design system, and here are our end user goals, then everyone can get on board who's involved, and you can even communicate it to a client.

I've found things like using StoryBrand or paying Agitation solutions super useful when I'm going into a Zoom meeting with five different stakeholders from a company who've all gonna have opinions, but I frame the whole meeting around, let's just do it like this. And then they all love it because they can all contribute to that and they can contribute to how we make the user feel like a hero.

They can all contribute to how we, I identify the pain that the user has got or the customer's got before they buy the product. And it really helps get people on board. And then when I show them a wire frame or a design using a secret design system that I've got for them, they see what they said reflected in the design rather than.

That, if five people are all disagreeing, when you show those five people the design, they're all gonna disagree on the design because they didn't see, each of them saw the thing that they disagreed about in there. I dunno where I was going with that, but, essentially it was the, I think you've gotta have an inclusive design system.

otherwise, you're not gonna get buy-in from the stakeholders that will need to sign off on it and make it work.

[00:45:50] Nathan Wrigley: Okie doke. I think that was a full investigation of that part, wasn't it? Should we, should we move on to the potential benefits? David, you ready for that?

[00:45:59] David Waumsley: yeah, absolutely.

Okay. Okay. I've just, I'll just jump in. I just thought that was quite interesting 'cause that's not Yeah. Definitely what you are describing. There is something that I think you need, this system, but it's not included in what, what the articles I look at say what makes up a no design system and that, a kind of copywriting system goes in your design system.

It's all part and parcel of the same thing.

[00:46:24] Paul Lacey: Yeah,

One of, one of the ones that are built is, yeah. Starts with that because a major problem for web designers and end user clients is tone of voice and how they communicate. So you could throw a load of call elements at a page that have got a fantastic design system in there, but, You might just be doing that based on that you thought it looked cool. so it, if you use a system like StoryBrand, it takes you, it tells you your top row should be, your top, line should be a, unique value proposition. your second line should outline in very brief bullet points, the key benefits.

The third line, the third row outlines the problem and possibly agitation in the same row. So you have this kind of, so I need to do a unique value proposition. What are my possible design patterns and components to do that? Yeah. And the obvious one is gonna be like a hero banner and then a design component of that is gonna be a heading, but it shouldn't just say the name of the product.

Like the design system, in my opinion, should include a. the, big heading isn't just a H one HML tag that's big. It is that HML tag should have a point to it, which is to convince somebody if they only read that one heading on the entire website before they decided to bounce or click forward, that it also told them the important thing.

So to me, like content and the end user goals is totally part of the design, but I don't see that included in a lot of the sort of more academic talking around design systems because it's, a design industry talking about it. So whereas, whereas I have to hit the, meet the rubber where it hits the road and deal with CEOs and opinionated marketing execs and cousins of the CEO or nephews and nieces and all that sort of stuff, and I have to try and keep them on track.

So that I don't retire from the project with an excuse if something came up because I've lost complete control. So I have to say, that's why I think, bringing some of those elements would be really useful to design. And I think gov the UK government does that to this extent. With, its, with, its the purpose of this one is this, they don't necessarily, they even give the content examples, because, especially for these more transactional sort of things that you should say this and these are the words that you can say, I think it's fantastic.

[00:49:03] David Waumsley: Yeah, no, I think that's a, fabulous site. And I think that the US have pretty much adopted this kind of thing. How, I my understanding is that the US kind of went more down the, whole react route and it lost money. I think there's a sort sense that when you are losing billions as they do, you, they've had to work.

In an agile way, and they have to work, to these kind of more fundamental systems that, start with a html first approach to everything, in terms of the technicals.

[00:49:36] Paul Lacey: Yep. I think this just highlights it. Just, stay on that reacting just for a second.

[00:49:42] David Waumsley: I

[00:49:43] Paul Lacey: think, this is possibly what you think as well, but it's certainly what I think is that as soon as the, concept of web components became tied verbally to react or similar, so it is like, what JavaScript library do you use to create your web components?

I was out of the conversation at that point. I, they, I was lost to it because I'm not really a JavaScript developer and, but I, but think how many other stakeholders downstream of. And not very good JavaScript developer are now completely out of the conversation of loss control. So it just made this, to me, this, and I think this is what W three C has identified, that, as soon as this kind of culture of JavaScript libraries got mixed up with design systems, it made, web dev high, highly skilled web developers, gatekeepers Yeah.

To, decision making. Yeah. And it seems that was the wrong way to do this.

[00:50:47] David Waumsley: Yeah. Going so high level really, that you lost it. And then, and I think now as we become more. conscious of accessibility and getting back to that web, that it should serve all people. That's its unique selling point above all of the mediums is the fact that anyone with a computer then can adapt it and get the same information.

It's truly inclusive and that got lost. When all your developers and all the people are thinking about JavaScript first they skip over to, then they find something to solve CSS maybe Tailwind that will plug in. That's a system that will work. And then, the last thing they're learning then is HTML.

And as we learn more, HTML doesn't cover us full accessibility. We need to learn a little bit of Aria to get there. And and I think that's where I like those kind of, like you say with the UK ones, because they have to start from that basis of inclusivity. Yep. So it builds up on those foundations.

[00:51:45] Paul Lacey: Yeah.

Their mix seems really, thought out. And, inclusion inclusionary, if that's a word. it is now. It is, yeah. It makes sense in my context. I think with the ARIA tags and the h, like you say, the H ml tags that get you to 80% and then the aria takes you over the line to truly define what this content is, as opposed to with the JavaScript route, which you sometimes can't even see the content behind the scenes, it's dynamically changing in the document.

[00:52:23] Nathan Wrigley: Yeah.

[00:52:25] Paul Lacey: and, it's, yeah. Yeah. Let's move on. Sorry. Okay. No, that's

[00:52:29] Nathan Wrigley: fine. That's absolutely fine. a couple of sections we've got left, so potential benefits and finally considerations. potential benefits have been listed out as follows. We'll just, I'll just read them out and then we can Yeah, you can explore them.

The potential benefits are as follows, four things Dave has listed. Efficiency and cost saving, reducing tedious tasks, maintaining quality or reducing errors. And finally reducing staff dependency through documentation. I suppose they're all fairly self-explanatory, but do we wanna open those up?

[00:52:59] David Waumsley: No, I think we'll go on to the considerations, which I think the next thing, there are benefits obviously, if you can have some sort of system that you, that's really what I feel like I'm trying to work out is a way of avoiding errors.

When you get into looking at everything I put on a website, I'm, I made the no script show one, and I'm, but going back on it, re correcting things as I go through this series on components here. 'cause I realize, oh, I forgot about this. Oh, yeah. It's it's getting built. but yeah, so I think there's something to have some documentation even for yourself that reminds you of when you do certain things, even if it is, as I say, what we'll do next time ahead of which you don't even see.

Hey, one thing that did cross my mind, with style guides and branding, I said earlier and I think this is open for question now. a company might need a, some, something might stay there in terms of a style guide and it might be a permanent thing. But I question this these days because we are moving so rapidly towards this idea of users choosing their own journey on the web.

light and dark mode is the one that's taking off the most that you even that isn't so true these days if we're moving forward with this idea that there are different presentations for different types of users, depending on their own preference of how they want to consume the web.

[00:54:33] Paul Lacey: it sounded like led into the first two points actually quite nicely.

[00:54:39] Nathan Wrigley: okay. So let's go through those then. Yeah. So the considerations, first of all, long term efficiency in an ever changing industry. Second one where design consistently stifles creativity.

And finally, how do we build the right foundations again, because it's your, both of you have significantly more experience. It's over to you.

[00:54:59] Paul Lacey: Can I say something about these? These actually, so David, your approach is. Much more resilient to point number one, long-term efficiency in an ever-changing industry where you are going as deep as the H TM L code and the aria.

So when this comes back to this whole lifespan of a design system, most of the systems I'm using should all page builders suddenly disappear. At least I can take some of the thinking and then apply it to HTML and I'll be one step behind you on the tech, but I can probably get there, in time, given time sort of thing.

but this ever changing industry, it's not even really the, the industry is like us, we are the people who make this stuff right. But to me, I think the, like the word industry could be interchangeable with, the, I dunno what the word is actually, but, so for, instance, web, currently we use website in a browser and that's how we look at it.

Or on a phone. And then content now is, can be fed into things like apple, newsreader, those sort of things. So basically some of the websites I would make would not farewell in some of these situations where content needs to adapt to a different device or something that isn't a web browser. Everything I'm doing is assumed that it is been consumed, probably on a web browser or a mobile phone.

Web browser. Okay. Yeah. whereas, I can totally see that, especially with ai. I know that this is controversial, topic as such, but if it gets to the point where you don't even really look at websites anymore. We spoke about this on the last one, I think, where you just say, Hey, where basically websites are made on the fly in some kind of, they're made in real time.

So when you ask something about, Hey, can you tell me about what's the best fender guitar from the JA made in Japan in the eighties? Chat. GPT will currently give you a kind of chat about that at the moment, but it's not an inconceivable that at some point it will create a custom webpage for you that you just look at as if that page had been made with pictures and videos and all that sort of stuff.

But it would, you would imagine it would need to be able to query its sources and see h TM L tags, find aria, attributes and stuff like that. And it would only really pull in that content where it was confident that it was the correct content because it could see how it was marked up. It's not gonna go to, one of my websites where a client has told me to put this over here and make this thing flying over there and then this popup comes up or something because it's just too much chaos and noise for a future device to understand.

So I think, The, gov website is perfect example again because you can see that those elements could transfer into other devices that we don't yet know that people want to use. So you could equally, they could plug an API into chat GBT for instance, and have you pay your, council tax straight fire, via chat EBT if you wanted to.

And I think that's where we'll end up going. That different systems will just be plugging into things and APIs and, the current SME and charity and nonprofit sector is gonna struggle with that because we're all stuck in that sector, both the clients and the people serving it like me in this relatively short term view of everybody wants to go to your website and a web browser.

So make a website for a web browser and when it becomes a problem, they'll ask me to make a system that works in chat GPT so they can, do you know what I mean? but we'll be playing catch up massively at that point. David, your approach of thinking about this HML structure. you might not have the content that chat, GPT or whatever system wants to pull in, but at least you'll have the structure correct.

That it can understand and interpret and know, oh, basically here's some prices of those guitars that you want and it'll put it in a component pricing table and it'll know to recommend this guitar and it'll have a pricing table, right? That isn't even from a website. It's just gone does this Mexican guitar, USA Fender and then the Japanese one recommended with a little tag on it, most popular for people who are thinking like you.

And it is presented as a pricing table with benefits and stuff like that. so I think that's I think that we'll see the ever changing to me is that everything's gonna be much more dynamic and on the fly using components and patterns that are marked up. I don't know.

[00:59:51] David Waumsley: Yeah, we would probably, That's, I don't like the idea that, that search engines are now providing the ai, I feel they are. It's broken, the deal with people, because at the end of the day, it's making us dependent on our content, stolen our content. Basically, AI is stolen everybody's work. And it's remarketed to us.

I don't know if it'll ever be able to. I think the more you get into, the skill of writing a website, I've only become more appreciative of this recently, particularly as you get into the accessibility, because there isn't. machine isn't gonna quite do it because it has to make d you have to make decisions about how you will label your aria or where you will label it a, according to your imagined audience for the content and the different circumstances that they might be in.

I find it hard to imagine that anything will automatically, do that. We'll be able to present random content and get that right, not if CloudFlare has got anything to do

[01:00:58] Nathan Wrigley: with it,

[01:01:00] Paul Lacey: because CloudFlare is, providing a system to block your website from AI bots. Yeah. Unless you pay. Yeah.

[01:01:06] Nathan Wrigley: It's like a paywall for

[01:01:08] David Waumsley: AI systems.

Yeah. It's just hot off the press. Yeah. Yeah. I mean we, we can, if there is a set of rules, but I think this is always where we want to go with design systems and it's even with ai, it's my thought on things at the moment. It's a very materialistic view of the world where you think that everything can be explained if we get down to a certain set of materials that we understand.

And obviously when we've got Jeffrey Hinton, the sort of godfather of AI now panicking about, general intelligence, as a reality, I don't know if it ever will be. Obviously it poses a threat to us. Depending on how we use it. This is another conversation here. Yeah. This is complete, yeah.

Ton of words, but it's in the same with the, design systems. I think, the idea that we're seeing certain things are making us feel like this is going to provide the solution. Like we're not far away from Google. That it can now grab the information and it's really useful in that, and now it'll be able to present it in a way.

I just don't believe that's ever going to be the case,

[01:02:16] Nathan Wrigley: in, the same way that in physics there's always this, there's always this rush to, there's always this idea that you'll get this grand unified theory. It feels a bit like that's what we're describing here, this grand unified theory of what the internet is and what design is.

And maybe it'll never. being

[01:02:34] David Waumsley: achieved. it's always a problem. And, for people like Jeffrey Hinton or Materialists who explain things, so they say, I can explain everything in science and this is how it works. And then you go, yeah, but okay, so I explain the body and you go, yeah, but why do I think, why am I conscious?

And they go, that's just, phenomenal. Don't worry about that. Forget that worry. We've solved it. The whole thing about having a conscious conscience is, or consciousness is, irrelevant to this conversation. And I think sometimes that's how you get, when you look at things scientifically, when you comes to the art of communication via the web, we start to think, it will serve the stuff, but will it really communicate with real human conscious beings?

And I never quite convinced, I always think that it's just a bunch of scientists thinking they're going to nail this. There's, a formula here.

[01:03:27] Nathan Wrigley: We will, we'll probably revisit this topic in two years time when our robot overlords have taken over. Yes. And, we will just be simulations because we've been scraped on the internet.

do you think we've achieved what we set out to achieve? Are we at the end of that episode, do you imagine? Or is there more to say? I think we're

[01:03:44] Paul Lacey: still confused as, as ever. Yeah. But, that's never, but we,

[01:03:48] Nathan Wrigley: that's never gonna change. Yeah.

[01:03:52] Paul Lacey: that's 'cause we're normal, people. But, the, that consistency stifles creativity on there.

Oh yeah. that's an interesting one to me. 'cause I don't think consistency ever does stifle creativity. I think, I think, just, mashing things up and throwing them all over a page isn't creativity. It's just, I. It just, it gives, it's like a, gaslighting version of creativity that some that, an end user doesn't appreciate, but the owner of the website appreciates more.

So it's, web design, consistency stage creativity. I don't think it starts create creativity. I think design consistency helps to get rid of, vanity aspects nicely. You can still be totally cre creative. You shouldn't just be, you shouldn't fail to be creative if you've got consistency. so I like that.

[01:04:52] Nathan Wrigley: That sounds like a great meme. Yeah. There you go. We'll probably parcel that off as the, as the, little, the bit that this episode goes out under. I will try to, I'll

[01:05:02] David Waumsley: try to make that happen. No, I think that's what you do quite well on it because of the fact that you've do got a design system where you've got row and they're spaced out in a logical way because you are using a lot of your own CSS to make sure that s space is consistent through it.

Yeah. And for users, there is a, certainly if you understand the, how people perceive space and what they mean to them, this, it drives us mad and we can tell a bad design because they've used the page builder and just drop something in and it's, half a centimeter off or something, how it was on the other page and it's jarring and we know this, and that kind of consistency helps us with our perception.

But I think sometimes that consistency in a different way, a consistency of doing things in a certain way, then leads to. as we can see with design, they, we might have thought we've got the perfect design in 2000 or something, and none of them look like that any longer. unless we're doing it for comedic effect, So we constantly change. So I think that's the problem with the design system. You build a whole load of layouts that you're going to use, and you just think these were just web layouts, then they don't, some, that's more interesting thing that you'll see in print and in other places.

[01:06:16] Nathan Wrigley: Okay.

I think I am gonna knock it on the head in that case. At that point. so that was episode number 22, or at least you can find it at no script show slash 22. You can head to the URL there and hopefully you will be able to find the relevant show notes there. it only remains for me to, to say thank you to, to Paul for joining us today.

Yeah, thanks Paul. I appreciate your, your contributions to the debate today. That's great. So we'll see you on the next one. Thanks guys. Yeah, you're very welcome. See you soon.