Mar 25, 2015 / Layout & Design

The Principles of Design: Clarity

Tell a clear story with your design.

Hi bloggers! My name’s Kjell Reigstad, and I’m a designer at Automattic. I’m happy to introduce the first post in a new monthly series on “The Principles of Design.” In this series, I’ll share some of the basic tenets of design, and we’ll explore how to apply them to your blog.

This week, we start out with a simple design concept: telling a clear story.

The main goal of any design is to get a message across. It may be a straightforward message (“Buy this product!”), or it may be a complicated one, but in all cases, there’s a story to be told. In an excellent design, every shape, color, photograph, and font choice works together to create a strong, clear message. Great designers add elements that contribute, and (just as importantly!), they weed out elements that distract.

The classic Joseph Müller-Brockmann poster below is a great example of design elements that work together to tell a story. The shapes flow like a symphony, while the simple, organized typography fills in the details.

Even empty space can be a part of the story! In the FedEx logo, the negative space between the E and X forms an arrow to convey speed and urgency.

Even empty space can be a part of the story! In the FedEx logo, the negative space between the E and X forms an arrow to convey speed and urgency.

Source: Design is History

Source: Design is History

What’s your message?

On your blog, your main goal is also to get your message across. That message could be a favorite recipe, a personal experience, or an amazing idea you’ve had. Whatever the case is, you have something to share.

Every image, block of text, and button on your blog tells a piece of the story. Sometimes, elements unrelated to your message can distract your visitors and obscure what you’re really trying to say.

Take these two screenshots for example:

Blogs-Comparison

Keep in mind that there isn’t necessarily a right or wrong way when it comes to design — the goal is just to tell the story that you’d like to be telling. Explore and see what works best for your blog!

On this blog, the story is about the author’s travel photos. On the left, some page elements get in the way of that story. The backgrounds are busy, and some of the widgets battle for attention. It takes some effort to focus on the real hero of the story: the photos.

On the right, the author has made a few changes that help clarify. The photos jump out right away to lead the story. The background is less overbearing, and the illustration in the sidebar helps reinforce the story rather than distract from it. Although the actual blog post is identical on both versions, the one on the right appears much more clear and concise.

Working toward clarity

We tend to build up our blogs over time, so it’s a good idea to take a step back from the screen every now and then and look at your whole design. What’s the main story you’re trying to get across? Does everything on your page work together? Or are there items that distract? If there are, it’s a good idea to start clearing them out. Even small things can have a big impact! Here are a few suggestions to get you started:

Interested in trying out some customizations, but don’t want to risk messing up your blog? Try experimenting on a test site.

Whenever you work on design, it’s good to experiment. Don’t be afraid to try things out and see how they look! It’s also a good idea to get feedback from friends, or in the Community Pool. Outside perspective can spark great new ideas.

Do you have other ideas on how to make your designs more clear? Feel free to share in the comments.

Show Comments

37 Comments

Comments are closed.

Close Comments

Comments

  3. Absolutely important to all bloggers, as @Anna mentioned in the previous comment!
    I’m a passionate photographer and programmer (next to my corporate job) and have decided to code my own theme for my photography blog (aydinphotography.com).
    I highlighted what was really important for me –> the image and took away everything that distracts (menu and widgets are hidden but accessible via buttons).
    Judging by the comments I get on my blog, it seems that I have hit a sweet spot.
    Less is absolutely more sometimes 🙂

    Liked by 2 people

  4. Are not these matters questions of fashion? At one point, blogging 101 tried to get us using lots of widgets, now minimalism is good? Also, it depends what screen the reader is using: mobile, laptop or desktop.

    Liked by 1 person

    1. Definitely a matter of personal preference, that’s for sure. There is no right or wrong approach. When we cover widgets in B101, the aim is to expose bloggers to the concept of widgets and how they can enhance a blog. Most folks are brand new, have never heard of them before, and aren’t sure what widgets do and how to use them.

      The aim here is to help you look at your blog’s design with a critical eye, with a view to re-evaluating widgets and other elements from time to time. As an example, maybe the “I voted” widget is still relevant to a given blog’s story. Maybe if the election is over, it might be past time to take it down. It all depends on what the blogger is trying to achieve.

      Liked by 3 people

      1. This will defiantly come in handy then. I think I have too many things on the sidebar but did’t know where to put them. I was taking a look at adding them to the footer. Kjell has a great idea for a new feature. Thanks

        Like

      2. So can I get the classic edit screen back? If I click “edit” beside a post, it goes to the beep-boop, which I find poorly designed, change for the sake of it, and which sometimes does not work, failing to save a post. The dropdown from “My Sites” used to get to the usable editor too, but now it goes to the useless Beep-boop.

        Like

  6. Thank you for this post. I am very interested in reading about design. I live in a rural area and my internet service is not always very fast. I tend to avoid blogs with too many photos, busy backgrounds, etc.

    Liked by 3 people

  7. Lots of interesting points. I’ve found the ability to hide widgets under different circumstances very useful: well worth experimenting with!

    Like

  10. Although I agree with this post’s overall message for the most part, the double-screenshot example just doesn’t work.

    The sample blog is called “At Home & Abroad” and that title does not lead me to believe that the blog, as a whole, focuses on photography. The only reason the minimalist design works is because the post being displayed is photo-heavy. For a post that consists entirely of text, the design might come across as more than a little vanilla.

    Any design must play nice with the diverse array of posts that appear on most blogs.

    I wouldn’t endorse the “before” screenshot as-is, of course, because a few elements are just too much. However, some types of blogs benefit from the visual interest that more involved designs can provide when done well. (Emphasis is on “when done well.” I’ve seen a lot of “when done badly.”)

    Like

  11. the one on the right appears much more clear and concise.

    Personally, I am drawn more to the one on the left because it feels more like a blog. The one on the right is too plain for a travel blog. It feels more like a brochure and less personal.

    All personal taste, of course!

    Like

  12. Great tips! I may cut down on my share buttons.
    I recently changed my blog to the Able theme. I love the cleaner and more modern feel and larger typeface. Some blogs are super hard to read!

    By upgrading, would our blogs be more easily optimized and searched through key words?

    Liked by 2 people

  16. I recently changed the theme of my blog. But actually it was more accidentially – thought I could try a new one and switch back to the old one – no way! I have to try this test version. Thank you for showing me!

    Liked by 2 people

  18. Hi Kjell. I am looking forward to your next post.
    Not only because this was very useful, but also because I was left wanting more 😉
    Wait, don’t go. I’ve got quotes.
    “Less is more.” by unknown
    “True elegance lies in the simplicity.” by yours truly
    “It’s a barbarity that clarity is a rarity.” Dr. Dude

    Liked by 2 people

  26. Although I’ve done some graphic design in the past, it’s been several years. My blog looks more like the simple one in your example, which, in my estimation, is good but after reading your post, I’m thinking maybe I need to change the shade of my background to darker or lighter. I’ll have to do a couple of tests.

    I hope I see more posts written by you. You tell things logically and simply. Two good pluses.

    Like

  27. Glad to read this – must say I have been a sucker for white space for as long as I design… less is often more – and there is lot of truth in this…

    Like

  30. Themes, themes everywhere, and which is the one to choose ?!
    Clarity, and an uncluttered appearance esp.on a writing blog is so imp.for readability. Looking forward to more tips. 🙂

    Like