Design Principles: White Space
Whitespace. I talk a lot about whitespace, and maybe you've been in a meeting with a designer or a colleague and you're talking about whitespace and things like that. And sometimes I think the terminology just gets thrown around as kind of a, I don't know, fancy way to get your point across, or something like that, or push through your idea. But whitespace really creates a balanced feeling. Again, a lot of this is just how it feels. So in addition to learning about how to think like a designer, you have to learn how to, kind of, feel things out like a designer. And the best way to do that is see these examples so that then you can be spotting these out in real life and kind of building up your design muscle. If that makes sense. So whitespace creates this balanced feeling and makes something a lot easier to visually scan. Back to the business card. Scout Bakery. Same information. Not terrible. Does it have good balance? I think so. Is everything grouped? Yes. Is everything aligned? Yes...
. But, the design eye in me, and maybe you're starting to notice this too, is that there's a lot happening here. It's crammed together. It's like, have you ever gone over to someone's house and you walk in and maybe the living room is there, and they have a couch that's probably three times as large as the size of couch that should be in that room, and it's all you see is this couch in your face? It just feels no welcoming. It feels cramped. That's the same with this business card. And maybe the average person is not feeling that, but as designers we are going to be making better things 'cause we're learning how to think like a designer. So, just by adding whitespace, it's like, breath of fresh air. (laughs) less, like look at it. Hopefully you're geeking out like me now, (laughs) but I just love it. It's so much better. And when you see them side-by-side, we'd have to have a serious debate as to why you think this one on the left is better. But I think most of you are now seeing, "Okay, I got it, the whitespace, big deal when it comes "to the business card example." Let's also look at that table of contents again. So, you've seen the after, but we can use whitespace, this was the before, we can use whitespace just simply, look at that. Here. Now. Now it's much easier to see the phases. To see each subsection. The other one felt cramped. And we have even indented it. On a previous lesson we had indented these. Sub one's were over here, so it was much more prominent. But just by adding whitespace we've been able to achieve a little bit more breathing room. It feels easier. It is not this tight cramped thing. But more importantly, if we were really just looking at this in an instant, most people would not realize that there is a phase two here. They'd think all of these are just, bam, bam, bam, bam. But there really are these two distinct sections, which we're trying to make clearer through this whitespace. And then, like we saw previously, we use indentation to create even more whitespace. But you don't have to take it this far, but just these little, little tweaks make such a difference. Especially, if you think of the user of this, you know, trying to identify, if you were just looking at this and you're kinda the manager reviewing this, and you quickly wanna see, "Okay, what's that email we're gonna send in phase two "of subsection, help you create a customer panel?" You can quickly scan, scan, scan. "Okay, phase two, got it. "Okay, page 37." Whereas this, this would be a lot harder if someone said, "How do you read the email for whatever?" You'd have to spend a lot more time thinking to find that section. And to take it a step further, we could really emphasize the whitespace, which sounds a little crazy, but by adding a line to further emphasize section one, section two, it creates even more whitespace for us. Before. After. Can you start to see the difference? Hopefully you can see. That's why I love to put these things side-by-side. So whitespace really helps give things the room they need, like we said, to breathe. So we don't feel like we're walking to that person's living room and the couch is gonna suffocate us. We want to make things feel less claustrophobic.