Shifting Towards A Gridless Design System

My name is Donnie D’Amato, and I'm a design systems architect and the author of Grylls design. I'm a senior software engineer at GoDaddy, where I'm responsible for their design system and I also teach user experience at Parsons School design here in New York, where I live with my wife, who also happens to work in design systems, we like to call this, our design systems house. So today, we're going to be talking about shifting toward a grid list design system and hopefully, by the end of the talk, I've convinced you to get rid of your grid. So, I want to start the talk today with one big hot take. The design grid is not inclusive. That's it. That's the tweet. All right. So, I think we're going to have to prove that to you. So, in order to do that, I'm going to show you a couple of them.

The first number I want to show you is the number 4%. This is a representation of the world population that's colorblind and that includes this guy, I'm colorblind, too. So, I use this number to represent how important it is for us to get the right color contrasts for accessibility, to allow people to actually look at content and read it and absorb all of that, that we're trying to display on the web. So, I appreciate this because it directly affects me. However, I argue that there's a much larger percentage of the population that we aren't accounted for, 70%. This represents the number of people in the world who don't speak English. Now, I'm going to go a step further, and say that the Harvard Business Review has actually done a study on this, and has found that half of this number of people here believe that information in their language is more important than price. Let me say that another way. That means that half of these folks might actually pay more money for the same products, if it was found in their language. That's pretty significant, right? You could be losing out on revenue just because your product isn't translatable. So, let's talk about this. I'm going to create a button and the button is going to say buy now, right, because we have a product and we want them to buy it immediately.

Put that in a button. Now, let's say we were using the design grid, and that would take a couple of columns. Maybe like that, our happy little grid. Okay, so the buttons fit nicely within one of our columns. Now, let's say user from Mongolia decides that they want to buy our product, and they see our button here, but it needs to be translated into their native language. So, let's do that. Now the eight characters that was in this button, at the moment for our design, this turned into 20. That's a 250% increase, or two and a half times the size of the original button and you can tell right away that it breaks right out of the grid and if I, as a user saw this on a web page, I couldn't trust them to give them my credit card, they can't even get a button, right. So how do we support translations in our designs? Simple, we get rid of the grid. Okay, how do we actually do that? Well, we have to understand what the grid is actually providing us the greatest trying to provide us two things, layout, and spacing. So, we're going to talk about layout first.

I'm going to create two representations of a page. Now, on the left, this will be a representation of the web, you know, an HTML page, right with code and all that kind of stuff. On the right, this will be a representation of an artboard, something like figma, or even Photoshop. Now, if I was to add a button onto a webpage in code, where does it automatically wind up? Well, once right here, aligned to the page, top and left, it actually takes a lot more work to have buttons appear elsewhere. It needs a lot more code to go ahead and do something like this. It's not what the way, excuse me. That's not what the web was expecting, right? We're expecting alignment, because this actually works like a document. Now, if I was to add that same button to an artboard, well, that could wind up anywhere, we wind up on the artboard, the wind up outside of the artboard, there's nothing stopping it.

What we need to do is actually provide a lot more activity, a lot more guidance, in the form of a grid potentially, to show where these things need to be aligned. Right? A lot more work. So, I hope this visualizes that these two things are actually opposites, right? There's native alignment already baked into the web and we have to actually provide alignment in our artboards. Okay. So, what's the recommendation when it comes to a system? Well, actually, there is not. What we should be doing is allowing the web to work as its intended. All right, allow the content to dictate the size of the containers, so that if content needs to increase the size of why button, you can do so and then allow the natural flow of the document to be maintained, so that if there's no more room, it goes to the next slide. No problem. It's the way the web works. Trying to add additional guidelines, like a grid to an existing web interface is just going to have conflicting views about how to display that content. So, I would recommend that you just use the rules of the web provides. Okay, so that covers the layout.

Let's talk about spacing. Now, with spacing, you can imagine that you would have a designer doesn't have tokens to describe all the space in your UI, I'm actually going to argue you can only do it with two. That's all you really need. I'm going to have to, of course, explain this now. Let's start by talking about Gestalt principles of proximity, which basically says, items that are close together, are more closely related than items that are farther apart. It's pretty simple concept. There shouldn't be anything crazy happening here. But I'm going to take one step further and talk about social relationships. Let's say that these are people. So, here's a person here, another person here, one with big fat head, right here. Now, let's say that because these two people are close, they live in the same house, maybe their parents or child relationship, or maybe even siblings, they all live in the same house. Okay and then this person lives next door.

So, we could say that people that live in the same house are one degree of separation apart, socially speaking and we can say that people who live in different houses are two degrees of separation apart. Okay, again, socially speaking. So that's a way of us identifying the relationship between folks’ right, relationship between parent and child or siblings being one, and then folks in different families potentially being two. Okay. Now, keep that counsellor in the back of your mind, while I introduce an actual user interface. This example comes from Nathan Curtis's blog posts on space and design systems, it was important for me that his exploration aligned similarly to mind in terms of its visual result. So, as we can see here, it looks like these cards are similar, they're practically identical, really. So, in the same concept that we had earlier about having identical children in the same house, we can imagine that these two cards are one degree of separation apart from each other and same with these two cards. Okay. Now, with that same logic, you can also say that these tags are also identical, and therefore also one degree of separation apart. But as we can clearly see, this space here is marked as 32 and the space between these tags is marked as eight. So, here's the question, how can we represent the same relationship with different amounts of space? Well, the answer is something called a density context, instead of calling it a density context, so right now, I'm going to call it a house because we're more familiar with that metaphor at the moment.

Let's say that these cards are all living in the same house. Okay, they're all siblings in that house. So, they all have the same one degree of separation apart. Now, we could also say that these tags are also in a house, a different house inside of that larger one, you can even think of it as maybe a dollhouse. Now the relationship between the appliances and the furniture within each one of those houses, is probably going to be the same. But as the density that changes, right, the dollhouse is a lot denser, a lot more compact, but the relationships are the same. So, when we compare the space between the larger house and the smaller one, the amount changes, but not the relationship and that's the point I'm trying to drive home. We need to think about space in terms of relationships. So instead of providing t shirt sizing or numbers in terms of the relationships, I'm going to actually recommend that we use the terms Near and Away and near being that this is one degree of separation, they're close and away saying that they're in different houses right far and we can use those two naming conventions, those two tokens to describe the space throughout our entire UI. So, let's go ahead and show an example of that.

Here, I have a code pen that shows representation of the card we had earlier and as you can see, it has headlines paragraph with the tags on the button. All right and in order for me to do this, what I first accomplished is by identifying the spacing between all these elements, so identify if these were supposed to have a near relationship, one degree of separation in our previous example, or an away relationship, again, two degrees of separation and that's all I really needed here. Because after I'd defined all those relationships, then I could define the density of each layer. Alright, as we go down. So, you can see here, we start with the page at one particular density and I can drop it down using this attribute that I created called density shift, because we're shifting the density down, we're becoming denser in this area and then finally, I have one more here, that shifts one more level down and I do that level three times, right, one for the headlines, one for the tags, and one finally, for the button container and if this is a little bit easier for you to understand, maybe with a naming convention for each layer, so you can imagine that the tightest layer might be something like a compact, maybe a level above that could be something like cozy, and then finally, the one above it all might be comfortable. Something like Gmail’s density options, yeah.

But if you're really keen, you can actually tie in typography with density and that creates a nice pairing between your type styles and you’re spacing. You can imagine something like a data dense table that has really tight spacing, with really small text, and then a large hero image with lots of spacing, and really large texts, and having those sync up as you create your experience. So, in some, what I'm recommending here, from a spacing perspective, is providing two spacing tokens, one that describes the close relationships and one of the describes more distant relationships, and then identifying when the density should shift based on the content required. Okay. So, if you'd like to see this kind of stuff in action, I recommend visiting, damato.design and our family sites, which all uses approach to handle spacing and typography across the system and if you have any questions, please reach out to me on Twitter at Donnie D’Amato Otherwise, stay inclusive. Thanks.