Shifting Towards A Gridless Design System

Donnie D'Amato at UXDX USA. Video: https://www.youtube.com/watch?v=V_FfUrmLnQ0

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

The design grid is not inclusive

[00:00:00] My name is Donnie D'Amato and I'm a design systems architect and the author of Gridless 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 of 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.

[00:00:20] So today we're going to be talking about shifting toward a gridless design system, and hopefully by the end of the talk I've convinced you to get rid of your grid. 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.

[00:00:39] All right, so I think I'm going to have to prove that to you, so in order to do that I'm going to show you a couple of numbers. 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 contrast for accessibility, to allow people to actually look at content and read it and absorb all that we're trying to display on the web. I appreciate this because it directly affects me.

[00:01:22] However, I argue that there's a much larger percent of the population that we aren't accounting 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 product if it was found in their language. That's pretty significant, right? You could be losing on revenue just because your product isn't translatable.

[00:02:09] So let's talk about this. I'm going to create a button, and the button is going to say Buy Now, 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, in our happy little grid. Okay, so the button fits nicely within one of our columns.

[00:02:37] Now let's say a 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 were in this button at the moment for our design has turned into 20. That's a 250% increase, or two and a half times the size of the original button. And you could tell right away that it breaks right out of the grid. 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.

Layout: the web already aligns for you

[00:03:17] So how do we support translations in our designs? It's 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, and the grid is trying to provide us two things: layout and spacing. So we're going to talk about layout first.

[00:03:40] I'm going to create two representations of a page. On the left, this will be a representation of the web, you know, an HTML page, 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.

[00:04:07] Now, if I was to add a button onto a web page in code, where does it automatically wind up? Well, it winds up 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. That's not what the web was expecting. We're expecting alignment, because this actually works like a document.

[00:04:37] Now if I was to add that same button to an artboard, well, that could wind up anywhere. It could wind up on the artboard, it could 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. It's a lot more work.

[00:05:03] So I hope this visualizes that these two things are actually opposites. There's native alignment already baked into the web, and we have to actually provide alignment in our artboards.

[00:05:16] So what's the recommendation when it comes to a system? Well, actually there is none. What we should be doing is allowing the web to work as it's intended. Allow the content to dictate the size of the containers, so that if content needs to increase the size of my button it 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 line. 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 the web provides. Okay, so that covers the layout.

Spacing: two tokens are enough

[00:06:06] Let's talk about spacing. Now, with spacing you can imagine that you would have a designer's dozen of 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.

[00:06:25] Let's start by talking about Gestalt's principle of proximity, which basically says items that are close together are more closely related than items that are farther apart. It's a pretty simple concept, shouldn't be anything crazy happening here. But I'm going to take one step further and talk about social relationships.

[00:06:49] Let's say that these are people. So here's a person here, another person here, and one with the big fat head right here. Let's say that because these two people are close they live in the same house. Maybe they're a parent or child relationship, or maybe even siblings, and they all live in the same house. And then this person lives next door.

[00:07:20] So we could say that people that live in the same house are one degree of separation apart, socially speaking, and we could say that people who live in different houses are two degrees of separation apart, again socially speaking. So that's a way of us identifying the relationship between folks: relationship between parent and child or siblings being one, and then folks in different families potentially being two.

[00:07:43] Now keep that concept in the back of your mind while I introduce an actual user interface. This example comes from Nathan Curtis's blog post on space in design systems. It was important for me that his exploration aligned similarly to mine in terms of its visual result.

[00:08:04] 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. Now, with that same logic you could also say that these tags are also identical and therefore also one degree of separation apart.

[00:08:38] 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 spacing?

Density contexts, near and away

[00:08:53] Well, the answer is something called a density context. Instead of calling it a density context for 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. 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.

[00:09:25] Now the relationship between the appliances and the furniture within each one of those houses is probably going to be the same, but it's the density that changes. The dollhouse is a lot more dense, 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.

[00:09:50] 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. Near being that this is one degree of separation, they're close. And away, saying that they're in different houses, far. We can use those two naming conventions, those two tokens, to describe the space throughout our entire UI.

[00:10:18] So let's go ahead and show an example of that. Here I have a CodePen that shows a representation of the card we had earlier, and as you can see it has headlines, a paragraph, the tags and the button. In order for me to do this, what I first accomplished is by identifying the spacing between all these elements. So I identified 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 defined all those relationships, then I could define the density of each layer as we go down.

[00:11:01] So you can see here, we start with the page at one particular density, then I can drop it down using this attribute that I created called density shift, because we're shifting the density down, we're becoming more dense in this area. And then finally I have one more here that shifts it one more level down. And I do that three times: one for the headlines, one for the tags, and one finally for the button container.

[00:11:27] And if this is a little bit easier for you to understand maybe with a naming convention for each layer, you can imagine that the tightest layer might be something like 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.

[00:11:51] 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 your 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 text, and having those sync up as you create your experience.

[00:12:15] So in sum, what I'm recommending here from a spacing perspective is providing two spacing tokens, one that describes the close relationships and one that describes more distant relationships, and then identifying when the density should shift based on the content required.

[00:12:36] So if you'd like to see this kind of stuff in action, I recommend visiting themotto.design[?] and our family of sites, which all use this approach to handle spacing and typography across the system. And if you have any questions, please reach out to me on Twitter at 9dmotto[?]. Otherwise, stay inclusive. Thanks.