Day 6—Layout and Composition Part 5

October 6th, 2015 Posted by Design 1 comment

featured-post_part-5

So yesterday was all about rhythm and today we are going to be talking about Unity 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

Unity:

Much like rhythm, unity can help to create a layout that is cohesive. Creating unity can be done in a lot of different ways, kind of like how creating hierarchy can be done in many ways. The trick is to pick one or more ways to create unity, yet allow for some diversity/contrast as well. So kind of like with hierarchy, we start by adding in one or two elements that create unity, and then take a step back (or have others look at the design) and then decide if it needs more, or if it’s good the way it is!

To see examples of unity, we need to take a step back too. Let’s look at the design of some sights as a whole. Screen shots don’t really work for this, so I’m going to provide a link for you to go check out, and I’ll give you some hints/point out some ways the designer of the site is using unity.

Here’s the first one, The Faux Martha. Melissa is a designer and blogger too! So I especially appreciate the details and the ways she created unity through the use of very simple colors and icons.

She uses little “title” flags at the top of each post to let you know what type of post it is. She also has clear colors and repeats them in the same places (certain titles, post publishing dates, ect). Through just a few simple (yet meaningful!) touches, The Faux Martha has created a sense of unity. Okay, so here’s one screenshot to show you what I mean exactly:

Screen Shot 2015-10-07 at 9.00.56 AM

She also carries those fonts, colors and some graphic elements, like arrows and flags, into the sidebar design. It all looks like her, not a site with a bunch of ads on the side.

And here’s another example, Hummingbird High.

Screen Shot 2015-10-08 at 7.54.44 AM

Michelle uses some simple tactics to achieve unity here. She uses Open Sans for all her fonts (using just size, color and weight to differentiate… that’s a lesson in hierarchy too!) and she also brings unity into her photos, with the same background, similar angle and similar props used throughout.

There are lots of ways to bring unity to your blog design, and it’s something you should strive for because it’s part of having a cohesive brand. It’s like adding in your own little touches, sort of sprinkled here and there in your design, to remind the reader that they are on your site, and that this is part of who you are.

Homework:

Brainstorm ways you add just a little more unity to your site. Maybe it’s just a color, or a consistent post format. Maybe you always use a certain angle in your photos.

More in Layout + Composition tomorrow….

Sites/Blogs mentioned:

The Faux Martha

Hummingbird High

 

Tags: , ,

One comment

[…] yesterday was all about unity and today we are going to be talking about contrast in […]

The comments are closed.

Subscribe to the Pickle Jar Studios Newsletter for updates and podcast episodes!

Instagram @PickleJarStudios

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.