Welcome back! Here we are in our layout and composition journey:

So yesterday was all about unity and today we are going to be talking about contrast in design.

Just for reference, here’s were we are in the “basics” posts:

  1. Layout and Composition: the grid, the rule of thirds, hierarchy, rhythm, unity, contrast and positive/negative space.
  2. Typography: fonts, using different fonts together, adjusting font (using kerning, tracking and leading), using type.
  3. Color: color theory, using a color story/palette, primary, secondary and tertiary colors
  4. Line and Shape
  5. Photography
  6. Illustration and texture

Contrast can be used to add energy to a layout. It can be contrast between type and image, light and dark, stillness and motion, or color. Contrast can stop readers in their tracks, so use it wisely. When you use a lot of contrast, you need to be really clear in your hierarchy so that readers don’t get confused. You could probably consider using contrast an “advanced” technique, but there are ways to use it effortlessly.

Let’s look at some examples!

The first person/blog I think of when it comes to contrast is Shutterbean! Tracy loves black and white and she uses that in her blog and her brand. She does a great job of creating a fun, energetic feeling in her blog with out it being too chaotic. Mainly she uses type size and treatments to create hierarchy.

Screen Shot 2015-10-08 at 8.45.15 AM

Here’s one from A Brown Table. Nik uses beautiful contrast in his photos.

contrast eye flow

The first thing I noticed is that the contrast generally leads the eye down the photo, and then keeps the flow going to the text and right into the next photo:


And he uses color in the title to draw a little attention and give hierarchy (you are probably sick of that word by now, it’s arguably THE most important design principle you could learn!)

So what are some ways YOU can use contrast in a simple, effective way? You could make your columns or page have a little bit of a background. You could add a contrasted banner to the top of your page that highlights your blog header or logo. Or adding contrast to your post content, like when you add a list or subtitle/header. Just a word of caution… don’t go overboard, and keep your hierarchy in mind!

More in Layout + Composition tomorrow….

Blogs mentioned:

A Brown Table