Design Principles: Contrast
So what is contrast? Contrast really helps create a distinction and relationship between elements. So what does this actually look like? Without contrast, our eyes and our brain really need to work to figure out what is important, what information should I be focusing on first? You're noticing a trend there with alignment. It's about helping us understand where to focus. Contrast is another principle that helps us understand where to start, what is important, so we're not left there guessing, back to that book Don't Make Me Think, we don't want to make people struggle and think. We just want them to naturally look at something and know, and flow through whatever it is. So contrast really helps us communicate and replace a ton of explanation that we sometimes might have to give, when we could achieve that explanation through just using contrast to make our point in a really, really visual way. And contrast helps us, we'll see this: highlight importance of things in a design, show compar...
ison of things, create interest or even intrigue, it can convey context, and it can really just help catch the attention and add focus to whatever we are doing. So let's go back to our very boring boxes. But look, there's contrast. And which one really jumps out at you? And it could depend on you, especially this is no real content. To me, I'm drawn to the dark one. It's bold, it's jumping out. Maybe the light one stands out to you, but that contrast, you're gravitating towards one of them because they're no longer the same. We've added contrast to make them different, so we're going to naturally look at one or the other. Also, it could make one seem, appear closer or further, depending on how we're looking at it. Another way to achieve contrast is not just by kind of shading, but by shape. All of a sudden, we still have the two boxes, and now are contrasting them through size. Another great way to achieve this, especially if you're trying to convey, think of this as a chart or a graph or something like this. It's communicating a lot without a ton of text, closer away, further away, even. Again, we could use contrast, achieve contrast just with a different shape. One is softer, one is harder. One maybe is more friendly, one maybe is more rigid. And we can also achieve contrast with layout. Slightly different number of boxes, but still, we're contrasting, so likely we're drawn to the large one maybe, or maybe you're drawn to the other ones. But contrast through shading, shape, things like that, size, can help us gravitate towards one thing or the other. So let's go back to the content calendar for that cupcake bake shop. And this is the little bit better version of that content calendar, and we are only looking at one week, so it's pretty easy right now. But what could we do if we wanted to make it a little easier to understand the status? To me, status would be important. If I am the manager, and I have content people working on this, I want to be able to jump in here once or twice a week, and have an understanding of what the status is for these days of the week, right? So here's a few ways that we could really create some contrast, or use contrast to help me understand the status of each of these things. So we could use color, we could label, fill in, scheduled is green, in review is yellow or orange, and production is reddish purple. So we've added color to create contrast, and now it's a lot easier. Imagine if this is five weeks' worth. If you quickly had to glance, okay, which one is in review, I'm not sure. Oh, you know the ones, then, in review are yellow. But the cool thing is, and we'll get to this principle later, is now just by introducing that color, we're training ourselves, so now we know, okay yellow means in review, so we don't even really have to read anymore. When we're coming in, we just know yellow means review, green means scheduled, and our ability to understand this spreadsheet in the future is now a lot faster, 'cause now we're not looking for the words. We just know it's in review 'cause it's yellow. But it could kinda look a little busy. Do we really have to highlight the whole row? Maybe not, again, we might not always stay true to these principles 100%, so maybe we need to just highlight the word. Could be a lot to highlight each row, it could start to look pretty rainbow, especially if you imagine five weeks, or something like that. So maybe we just highlight the text. Same impact, just a little, maybe, easier on the eyes. Again, we're getting a little bit into the subjective world here, but I think either one could be a really great solution to use contrast to help us understand just that status column, for example.