So yesterday was all about The Rule of Thirds and today we are going to be talking about hierarchy.
Just for reference, here’s were we are in the “basics” posts:
- Layout and Composition: the grid, the rule of thirds, hierarchy, rhythm, unity, contrast and positive/negative space.
- Typography: fonts, using different fonts together, adjusting font (using kerning, tracking and leading), using type.
- Color: color theory, using a color story/palette, primary, secondary and tertiary colors
- Line and Shape
- Photography
- Illustration and texture
Hierarchy:
Hierarchy is all about being intentional with what your viewer sees first, and then second, third, and so on. It’s just like giving your page a title, then a sub title, then copy, then breaking up copy with a pull quote, using bullets or number for lists, ect.
With your blog, you need to decide what it is you want the reader to see first. The recipe? Your header or logo? The other links on the page or the “About” section in the sidebar, for example? You determine the order of importance (to YOU and what you are trying to accomplish on that page or on your blog as a whole) and then design each element so that it naturally flows in that order of hierarchy.
And one more thing: usually you only need to change one thing at a time, meaning, start with scale to differentiate between elements. If that isn’t enough, add another design change, such as color, to further differentiate between each element. This keeps your design simple with out getting too visually confusing or crazy. If everything is bold, then nothing is bold. You’ll see more of what I mean in the examples.
How do we establish hierarchy?
Hierarchy is typically achieved by using one or more of the following:
- Size
- Color
- Weight or thickness (also italics or emphasis in fonts)
- Space
- Order on the page
And there are probably other ways too. When I was searching for good examples I came across this article: Achieving Visual Hierarchy
I have to agree with the article above:
Nail down the purpose of each page element, and then dress it up.
Now lets look at some examples from the food blog world:
JTB has a large emphasis on her header, and then my eye goes right to the photo or the round photo of her and the about link. So, knowing what I know about Joy The Baker (I’m a fan, I own her cookbooks and have been reading her for a long time!) I know that she cares a lot about her brand and works hard on her site and social media. Having her logo larger and prominent makes sense for her. And having photos be the next forerunner also makes sense, since she’s a stellar photographer and naturally her blog would show that off.
Here’s another example:
David Lebovitz has been blogging for awhile…. he has many books and it’s probably safe to say that he’s more author rather then blogger in this case. So it makes sense that his books would be up top, and with nice green buttons that say “Hey look at me!”
I also noticed that his menu bar has a grey background, which also draws the eye to it. David does so many things, that I can see why he would want you (the reader) to be aware of them and see everything he has going on.
Here’s one more and then I want to say something about these examples:
Now Budget Bytes is clearly more about the text, or the story rather then the photo. While the photos are nice, this blog is all about saving money, hence the title, and dollar amounts for each recipe are right up at the top. The date also has that green shape around it, giving it emphasis, intended or not. I also like how the tagline is right up under the logo. Because of its placement, it’s been given emphasis too. Right away, looking at the large, crisp logo, you go to next to the tagline and understand the purpose of the blog.
OKAY now, I want to point out something. Have you noticed that all my examples are kinda… squatty? I’m only doing screen shots of what you can see above the fold. This term is used in design and comes from newspaper printing. It basically means that all the important stuff goes first, before you have to scroll (or turn the newspaper over). There’s a little debate about this in the design world, some say the whole “above the fold” thing doesn’t really apply any more because people understand that you have to scroll down. Well I say that what you put first—above the fold—gets the most attention, not that people won’t scroll down and see other things, but they will see what is above the fold first.
So what do you want people to see first? Your photography, your book pre-order button, your words? Think about it, then design accordingly.
More in Layout + Composition tomorrow….
Resources for this post:
Blogs mentioned: