Good Design Needs Contrast
“I have no idea what makes a good design,” is something that I hear often. “I just don’t have an eye for it.” But, this isn’t true and I’ll show you why! Even if you aren’t sure what principles make a strong design, you can probably spot a great one from a not-so-great one and that’s a good start. Let’s get visual and you’ll see what I mean.
Which one of these flyers looks better?
I would be willing to bet that you chose the second flyer as the better design. See? You do have an eye for it! Now that we agree that #2 is better, let’s discuss why.
There are a few basic design principles at play here but in this post, we’ll focus on the importance of contrast. In the next few design tip blog posts, I’ll also cover repetition, alignment, and proximity in relation this flyer and how these principles make for a strong design.
Giving your design contrast might be the very most important thing you can do to make that design strong. The basic idea behind contrast is that if elements on your page are different, make them very different. Don’t allow your audience to wonder, “are those supposed to look different or the same – I can’t tell. Do they go together? I’m unsure.” Even though your viewer is probably not consciously asking this, subconsciously they know something is just off when there isn’t contrast.
Contrast can and should be applied to nearly every element of the design: font, color, size, shape, line thickness, etc. Again, let’s take to the flyers.
The first flyer has very little contrast. The color of the headings and body text are different since they’re black and grey, but only very subtlety. The viewer won’t be sure if it was intentional and their eye won’t focus on the headings as they should. They don’t stand out. They need something, right? It’s contrast!
The second flyer uses great contrast, as the headings are very clearly different (much bigger, a different color, a serif font for the headings and a sans serif for the body-text). Your viewer knows where to look, as their eyes will automatically be drawn to the bold headings.
The contrast doesn’t end there. Check out the “intro” text that introduces MavroCreative’s services. By coloring this differently than the body text, it clearly stands out in the second flyer. In the first flyer, though, it’s just lumped together. Look for additional contrast in the footer of flyer 2, where the address is white text on a colorful background in the better design. I can barely find the address in flyer 1.
Subtle contrast isn’t enough. Be bold! Check out the contact information in flyer 1 versus flyer 2. Sure, there is a bit of color contrast on flyer 1, but that’s not enough here. Flyer 2’s contrast is much more apparent because it plays on color and font style and weight. The contrast is more obvious and, therefore, more effective.
- Effective design uses contrast!
- Make different elements look very different
- Don’t be subtle when applying contrast. Instead, be intentional and make it obvious.
- Contrast can be applied to all elements of a design: type, color, size, line thickness, shape, space, etc.