Grid

[00:00:00]
>> Sarah Drasner: So there's a book called Making and Breaking the Grid. If you want to learn about grid and composition, this is the best material. It's like unlike the 20 million version I think because people still go to, people still teach it in design school. If you go to a design school the first thing they're gonna tell you is to buy this book because it is really, really important.

[00:00:23]
It is really important to understand grids. Even if you don't wanna use them. Even if you don't wanna use them, you should understand why you're breaking those rules, right? It's kind of like the design version of best practices, right? You should know best practices, and then if you don't do them at least you know why you're not doing that or why are the best practices important?

[00:00:46]
Actually there's a good joke about this that somebody asked. Do developers have any superstitions? And the answer is yeah, best practices. [LAUGH] So this book is really a great one, and it's kind of an old-school one, but they keep it up to date with new examples and stuff and it's really awesome.

[00:01:07]
So what do I mean by using a grid and making a grid? Well, one of the things that we're doing when we create with grids, and it doesn't necessarily have to be just one solid grid that you're following every piece of that grid. But it's really this idea that you're anchoring things to one another, that things aren't just thrown around on your design, that you have many different elements, they all have a thing that they're locking to.

[00:01:35]
Because look at that line at the top, right? That's like a really curvy, not part of a grid system line. They're breaking the grid in order to bring that line. But everything is anchored to something else. Nothing is just thrown onto to the page. And if I took this design and just moved things a little bit, so they weren't anchored anymore.

[00:01:58]
You wouldn't like it anymore. I know it's sounds crazy, but you would be like it feels disorganised, it just feels little chaotic. So this idea of anchoring things to one another in order to bring them on to the picture, and they're not even anchored in a way where like A goes to B, goes to C goes to D it's not the thing at the bottom is anchored to the thing on the side.

[00:02:22]
The patterns in design baseline, is lined up here, that nationwide remember we talked about curves and circles needing to etch out a little bit from those lines, that's what they're doing right there.
>> Sarah Drasner: This is another one of those things where once I explain this and you see it, you will not stop seeing it anywhere.

[00:02:42]
So you can pull down designs from Kripal and start to draw lines across them and be like, look at all the anchoring. [LAUGH] People are anchoring all the time and that's a way that people keep those designs consistent. So when you're working with a UX designer or a UI designer and you're a developer and they're like that needs to be brought up just by this amount, and you're like no it doesn't, why?

[00:03:08]
That's so hard for me to do, it doesn't matter. It actually kinda does [LAUGH]. There's a lot of these things that actually when a product manager comes over to a designer and is like move that to the right. And they're like why do you wanna move it to the right, what are you?

[00:03:23]
They are trying to ask, so that they can solve the problem. Because it's not as simple as just move this thing to the right. The whole design starts to break apart if you do that enough. If I kept moving these things out of their anchoring, eventually the design breaks down.

[00:03:39]
So when you hear a designer asking those questions, they're like let me solve that problem for you, but we're gonna keep it anchored and keep it cohesive. And I'm gonna use all of these design rules that. They're not saying that out loud, right? They're thinking in their minds.

[00:03:53]
Like I need to still follow some rules here while solving whatever problem you're trying to have me solve.
>> Sarah Drasner: So here's an example of Grid, right? This is right out of the book, Making and breaking the Grid. It provides a systematic ordered layout, we mentioned this before and there's this a phrase that is used a few times over and over again in this book, that's called the architecture of space.

[00:04:21]
And I really like that, I think it does breakdown how you think about having spacial awareness within a thing. You notice that when you walk into a building, right? You'll notice whether a hallway has a high ceiling and whether or not you can find your way into. You may not think this place has a high ceiling but you're like, wow, this place is so open or like wow, okay, I can't really find my way around here or these hallways are crazy.

[00:04:51]
You don't know why the hallways are crazy but that's all pieces of architecture. Same with layout. If you visit a design and you're constantly confused as to where to go the architecture of that layout is not kind of working the way that you had expected. So in this making and breaking the grid book, there's a lot of these kind of sections that go over alignment logic.

[00:05:13]
And we're not gonna go over all, again, we don't have time to go over all of these things because that would probably mean that we were gonna be here for the next like four years. [LAUGH] But this is a really great way of checking out how to make and break grids for your own projects.

[00:05:32]
And some reasoning behind each one, you're gonna be making some of these in just a minute. So this is the kind of idea that you're gonna be employing. We have sketchbooks that you can use where if you have something like Photoshop or Illustrator on your computer, you can use that as well.

[00:05:50]
I don't assume that you do, so we've got sketchbooks instead. And you're gonna basically be drawing out these compositions and just taking some good old fashion lines and coloring some good old fashion squares to play around with layout concepts in a way you that might not. And I think that's important to do away at first from the browser.

[00:06:14]
Designing in the browser is something that people can do but I think that you shouldn't start there. And the reason why is when I'm developing, I'm in problem solving mode. I'm trying to find the quickest, most efficient path to making things layout on the page, right? That doesn't make for a very good design cuz the quickest, most efficient way of laying things out on the page is [SOUND] just putting it on the page, and design takes a little bit more care than that.

[00:06:45]
So in order to kind of compartmentalize and think differently about things, I have to kind of put on my designer hat, think of it one way. And then think of it from a developer's perspective and say, okay now how do I get that done? Its almost like setting up challenges for yourself.

[00:07:03]
So you have to not think of the developer as yourself in some ways because you don't want it to be the most efficient path. Laying any one of these things out might not be the most efficient path if you're thinking about it in terms of CSS lab. But it will really payoff when you're starting to create these designs that people are like, wow, that is much more interesting and unique than something that I've seen before.

[00:07:32]
>> Sarah Drasner: So I like this quote, the grid is like a lion in a cage, and the designer is the lion tamer. It's fun to play with the lion, but the design has to know when to get out before the lion eats them. [LAUGH] So the book is called Making and Breaking the Grid.

[00:07:46]
It's important to actually break the Grid as well to kind of break the rules as you set things up, because if it's too systematic it's too predictable.