Become a Master Designer: Rule Three: Contrast, Contrast, Contrast

Part Three of Seven Easy Principles to Becoming a Master Designer.

Read Rule 1 and Rule 2

0diggsdigg

Good contrast in your design goes hand-in-hand with your color selections. Contrast is the value difference between the colors on your design. Value is how bright or dark the color (ink) is. Ever see a blank white canvas and as a joke someone says: “Hey – it’s a white cow in a snow storm!” This is an example of no contrast. White on white is no contrast – you can’t see anything.

Elementary right? I mean what kind of stupid tutorial is this? I’m explaining that the piece I’m designing needs to be visible?? This is a retarded concept for a tutorial right?

Wrong.

Because unfortunately, I see lots of problems with designer’s contrast all the time. Not only that, but contrast, when used properly can be an important tool.

Here is one big mistake I see frequently: Designers use color difference to produce contrast instead of value difference. For instance… a medium value blue sitting on top of a medium value red produces some contrast. You CAN see the difference between the two. But when you have two colors together of the same value – it produces what is known as “vibrating.” You’ll notice that at the line where the blue and red meet your eye seems to oscillate back and forth between the two. It almost feels like the text is pulsing.

If your goal is to produce something really vibrant – you can use this technique. But it’s hard on the eyes and most people will find it annoying. Here is another example of the same design using different colors that have more contrast:

This second one is obviously much easier on the eyes.

A quick way to evaluate your design to see if there is sufficient contrast is to convert the entire thing to grey scale momentarily and see if the design still looks clear and easy to read. In Illustrator you do this by selecting your design, and select: Edit>Edit Colors>Convert to Grayscale. In Photoshop you’ll need to flatten your work then you can select: Image>Adjustments>Desaturate. This will convert it to Grayscale.

In either case, you’ll want to undo this action once you’ve had a chance to see how your design looks put to this test.

Here is a sample of the same design –one with good contrast, one with bad contrast. And just under each one is how they both look in grayscale.

You can clearly see how much easier it is to read the text in the design on the left, particularly when it’s converted to grayscale. The design on the right uses less contrast and more color difference to define the shapes.

One question I get all the time is: “what opacity setting should I use for a background water mark?” I think a good watermark background should be between 10%-15% opaque. Once again – this is all about maintaining contrast in your design. If the background is light – then the watermark should obviously also be fairly light and vice versa. Here is an example of a good and bad watermark:

The last little thing I want to note about contrast is how it can be used as a tool. If, for instance, you have a need to direct your audience’s attention to something specific on your design – you can accomplish it with contrast! You might keep the entire design relatively light and then make the one spot you want your audience to focus on dark. Here is an example of a well designed landing page:

This is a page on E-Harmony’s tour section of their website. While they want to give people a “tour,” what they REALLY want to do is get people to actually sign-up. So, when you look at this page – what is the biggest darkest thing on the page? It’s a non-clickable picture of a girl and the “Get Started Now” button. Obviously they want you to click on the “Get Started Now” button. Look at how much bigger and darker the “Get Started Now” button is compared to the “Next Step” button. The Next Step button is what someone on the tour SHOULD be pushing to continue the tour – but how tempting is that Get Started Now button? And why? Why does it jump off the page at you? Simple – CONTRAST!

This concludes a fairly basic but fundamentally critical lesson in design. Thanks for taking the time to read this. Four more basics to go. After that I promise I’ll teach you how to draw!

Go Media is a creative agency based in Cleveland, Ohio. Besides the GoMediaZine, we also work for clients and sell stock artwork and design files on the Arsenal.

Become a Master Designer: Rule One: Limit your fonts

22

Technique & Theory

Part One of Seven Easy Principles to Becoming a Master Designer.

Ok, “master designer” might be a bit of a stretch – but you can at least become a “proficient designer” by following 7 easy principles. This will be the shortest, most informative series of blog posts you’ve ever read on how to become a better designer. Please note: these principles CAN be broken… these are not laws, they’re just general guides that I typically follow when putting together a design.

Follow these simple design principles and you’ll be on your way to artistic excellence.

Principle One: Limit Your fonts.A big part of putting together a good design, as you’ll see, is making sure the over-all look is consistent. The best way to accomplish a consistent look to your design is limiting the number of artistic motifs (themes) that you use. The fonts you select are the first variable you want to limit. I typically like to pick just 2 fonts per design.

The first font can be fancy or artistic.This font will be used to give your design some flair, character and personality. It’s this font that sets the mood for the piece. Is it a fun font with swirls for a girl’s party, or is it a grungy evil font for a rock band? I would use this fancy font for the header copy – anywhere it’s big, I’ll use this font. The fancy font will be the focal point of the piece. You will usually have less copy in this fancy font, but it will be much bigger – so that’s what people will see and focus on.

The second font should be very basic.The audience shouldn’t take notice of this secondary font at all. This secondary font needs to be very easily legible. It’s this basic font that will be used for large bodies of copy. Obviously, it’s very hard to read large bodies of copy that are in some extravagantly artistic font. So, this second font is all about functionality.

Here is an example of proper use of fonts in a design. As you can see, there is only two fonts used here. The fancy font is used as the headers and the basic font is used for the copy. It looks clean and consistent.

Here is a Bad use of fonts. In this case I used too many fancy fonts. It just makes the piece look inconsistent. The sub sections don’t seem like they match with the main header.

Having too many fonts in a design is the biggest mistake. Nothing looks worse than someone who has used 8 different fonts on their flyer. Even worse than that is using a very fancy font for your body copy. Here is a sample of font use at it’s worst:

One last thought before I let you go. If your fancy font looks modern or contemporary, then your basic font should be a san-serif font. If your fancy font looks old fashioned, then use a serif font for your secondary font.

That’s it for this quick post. Thanks for reading. Keep an eye out, 6 more posts coming in this series (one post per week.)!

Become a Master Designer: Rule Two: Limit Your Colors

Sep 05

Technique & Theory

Rule Two: Limit your colors.
Part Two of Seven Easy Principles to Becoming a Master Designer.

Rule Two: Limit Your Colors. Sounds a lot like the last rule of limiting your fonts right? Exactly! We want to limit our colors for the same reason we want to limit our fonts. Reducing the number of colors we use in our design will make the piece feel consistent. Basically, everything will look like it goes together. Just like a sports team’s uniform or a company’s branding – we want a uniform over-all look to the colors.

As with the font selection, limiting the number of your colors is just a guide not a rule. You could very well have a rainbow of colors in your design and it will look great. But you need to start with a coloring strategy and stick with it. Use your color consistently throughout your design.

For starters lets talk about color values. A color’s value is how bright or dark the color is. A yellow for instance is fairly bright. A purple is fairly dark. Of course, a color can have a range of values. Purple for instance is a color that most of us think of as relatively dark, but you can also have a very light purple. Here is an example of some colors and their relative value. Then next to that you can see a range of values for one color.

So here is one rule I use when picking my color scheme: make sure you have a range of values in your color scheme. In any design you’re going to need some light colors and some dark colors to produce contrast. If for instance, the background of your design is dark, you’ll need a light color so that the copy can be easily read. Or conversely, if you have a bright background you’ll need a dark color for your art or text or whatever.

I will also typically only pick 2-5 colors to make up my color schemes. Reduce the number of options and you’ll typically have good results in the design. Here is a sample of a color scheme I put together. As you’ll see I picked One dark color, one middle-valued color and one bright color. Just to the right, I also set up a value range for each of these colors. It’s this collection of colors that I will use on my project as my palette. Once I have this color palette set up I will try my best to only use these color.

Ok, so now that we’ve addressed some technical color picking issues like how many colors to pick and what values they should be; what’s next? I’ll tell you what’s next, the hardest part; deciding what those 2-5 colors should be! I personally find this to be a somewhat difficult task at times. Here is a list of techniques I’ll use to help me pick my color schemes:

• Stick to a temperature range. As in… pick all warm colors or pick all cool colors. Warm colors are reds, oranges, yellows, browns, etc. Cool colors are blues and purples. I consider greens to be fairly neutral. If you pick all of your colors in one temperature range, they will probably go together fairly well.

• Use a website like www.colourlovers.com for inspiration.This wonderful site is all about picking color schemes. You can just click through page after page of color schemes.

• Keep an eye out. There are color schemes all around you. Look at packaging in the grocery store, look at the paint colors in your local Starbucks, look at Mother Nature! If you see something with a pleasing set of colors, just take a mental note and see if you can replicate it on your computer.

• Pay attention to pre-existing company colors.Frequently I am playing off of some pre-existing brand colors. I’ll look at their logo, color scheme and use that as my starting point. Then maybe just add a color or two.

Here are a finished design that I’ve done which show fairly restricted color schemes.

As you can see, the tight color scheme and limiting my fonts really pulls everything together.

I know these lessons are the basics… …but these remain cornerstones of design. So, it never hurts for a little refresher. 5 more rules to come. I promise the next 5 are a bit more interesting. Thanks for your time!