Guide users through your page.
Hi bloggers! My name’s Kjell Reigstad, and I’m a designer at Automattic. This is part two in my monthly series on “The Principles of Design.” In this series, I share some of the basic tenets of design, and we explore how to apply them to your blog.
Last month, we explored Clarity.
As I mentioned in last month’s column, the main goal of any design is to tell a story. Just as any good story has a beginning, middle, and end, a good design story does too! It’s up to a designer to make sure that people progress through their stories in a way that makes sense. One of the key ways to do that is to establish a clear visual hierarchy to guide the viewer’s eyes through the design.
Let’s go through a quick example. Take a look at the image below. Which of these two shapes do you notice first?
Chances are, you probably said the one on the left. Why? Because it’s bigger and easier to see than the small star! That was easy, right? Let’s take this one step further:
My guess is that you noticed the orange one first this time, right? Orange grabs people’s attention much faster than black does. After that, your eyes shifted to the large black star, and finally to the small one. That’s a simple example of how visual hierarchy can guide your eyes around.
Visual hierarchy in practice
Things get a bit more complicated when you’re dealing with a web page full of shapes, letters, and colors. Luckily, hierarchy still works similarly in practice to the exercise above.
We’ll start out simple. Feelosophical features a clear, minimal article layout based on the Spun theme. I’ve included a screenshot of an article page on the left, and distilled the page down to simple colors and shapes on the right to help illustrate the flow. The arrow indicates the path someone’s eyes will typically take through the page.
Some of the shape colors here represent their visual weight. Visual weight is relative: even though the font color for the quote and the article text is the same, the quote shape is slightly darker to take the font-style (italic) and the larger font size into account.
When I look at the page, I’m first drawn to the dark orange shape (the post title). This stands out because of the dark color, and because the font size is larger than any other on the page. After that, my eye drifts down to the next-most-prominent item: the quote. This part stands out because it uses the second largest font size, and also because the white space around it lends it prominence. From there, my eyes drift into the body of the article itself. This happens because of its proximity to the quote, and because of the general weight of the copy. This design tells a very clear story! We’re drawn to the title first, then an introductory quote, and finally we jump into the article itself.
Faces (or even objects that seemingly resemble faces) almost always grab our attention first. We can’t help it, it’s human nature!
At first glance, my eyes are immediately drawn to the face in the center. From there, I drift up to the nearby title of the blog, and then the blue menubar pulls me back down through the article title and into the article itself. This is another great flow — the image and blog header start you off with context about where you are, and then the blue navigation bar pulls your attention back down through the article itself.
Hierarchy on your own blog
Here’s a quick way to test hierarchy. Head over to your own blog. While you’re there, squint your eyes just a little bit, until things look a little blurry. That will reduce what you see to simple colors and shapes. Just like the examples above, you’ll be able to pick out the elements that jump forward, the elements that recede backwards, and those that are somewhere in the middle.
When you’re looking at your blog from that new perspective, it’s easier to assess visual flow. Depending on what you see, here are a few tips for how you can tweak the hierarchy on your blog:
- Inside of posts, use different font sizes, colors, and styles (bold, italic, etc.) sparingly. Just a little tweak here and there will do the trick.
- Empty space can come in handy when establishing hierarchy — it gives the eyes a little break while jumping around, and makes the page feel calmer overall.
- If your header is too bold (or not bold enough!), learn about creating a new custom header.
- Maybe you need to move things around a bit. It never hurts to try out a new theme and see how that affects things.
- If you have a Premium or Business plan, you have much more control over the colors and sizes in your layout through custom CSS.
Like I mentioned last month, creating a test site for experimenting is a great way to make sure you don’t mess up your blog.
As always, it’s important to experiment! You’ll never really know if something works until you try it. Don’t be afraid to get feedback from friends, family, or in the community pool.