featured-post_part-4

So, again, just to recap where we are in the layout series:

So yesterday was all about Hierarchy and today we are going to be talking about rhythm! So fun, right?

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

Rhythm:

What exactly is rhythm in design? Well, similar to in music, rhythm is the use of repetition. When designing something complex, there needs to be some sort of repetitive elements to bring it into order, or give the reader a sense of what’s coming next, so that it’s easier to read.

Rhythm can also mean the “pace” of something. Like how often do you have a photo vs. copy? Is there a photo after every two lines, or after a large paragraph of text? Is there a lot of blank space (a.k.a. whitespace) between your elements in the sidebar? This also attributes to the rhythm and pace of your blog design.

I found a great article on rhythm that includes more definitions and fun vocabulary words.

A really clear example of rhythm is rooted in repetition. The best one I can think of is Tastespotting:

Screen Shot 2015-10-07 at 7.37.09 AM

Talk about potential for chaos! Their site is run off of blogger/writer submissions (you should totally create an account and submit posts, btw, it brings me traffic when I do) and could be so chaotic—if it wasn’t for their already established rhythm and templates. Through the repetitive use of squares, they bring order to the chaos and allow the photos to shine through. And isn’t it easier to look at? Yummly has a similar set up.

Here’s another example from the food blogging world of rhythm.

Screen Shot 2015-10-07 at 7.46.26 AM

Talk about a site that would need some serious structure! Food Network has a lot of stake holders, information, recipes, shows and stars, and they need to be organized in a way that makes sense for the reader (and helps promote their top stories.) So this site is a great example of repetition and rhythm.

Take a look at the use of type to create hierarchy and flow your eye down the page as well, and then the use of boxes (both with image and with gray background boxes) to add emphasis where needed.

Rhythm isn’t just about repeating elements, it’s about working together WITH hierarchy so that the reader flows down the page in a natural progression. And they both work together on the grid to give organization to your page. Is this making sense yet?

Here’s another example of rhythm in design, and perhaps a more subtle one… I think you need to read it to get the flow of it.

Screen Shot 2015-10-07 at 8.15.42 AM

The rhythm is in the photo/text/photo/text interplay, but it’s also in the story and content. There’s a great story being told here, but it’s juxtaposed by the images on the page. It creates a rhythm and flow that draws the reader in and makes them keep reading! So rhythm can be created by your words as well.

Homework:

Take a look at your blog with a critical eye. Is there a rhythm there? Is it the one you want? What about the other elements we’ve talked about so far (the rule of thirds, the grid, and hierarchy)? What things need some shaping up or tweaking? Start thinking or even writing down some things (feelings, energy, messages) you want your site to say about you and your content. Is your site saying those things now? What are some areas you want to change? Don’t worry too much if nothing seems right. We are going to get into how to use all this and start making design changes on your blog after we go through this “basics bootcamp” part. Please, hang in there with me! Don’t be discouraged, friend.

More in Layout + Composition tomorrow….

Resources for this post:

Vanseo Design on Rhythm

Sites/Blogs mentioned:

Tastespotting

Yummly

Food Network

Love, Cake