3 Ways to Improve Your Blog Design

When you take a step back and look at your blog’s overall look and feel, what comes to mind?

Does it feel organized and easy on the eyes? Or does it feel cluttered and chaotic?

If you’re thinking it’s more on the verge of cluttered and chaotic, this post is for you because I am going to show you 3 simple ways you can improve your blog design by looking at it differently.

This post is not about choosing the right fonts or choosing a cohesive color scheme, I’ve covered those already. This post is more about looking at the entire design as a whole. So let’s get on with 3 ways to improve your blog design!

#1 Use Visual Hierarchy and Contrast

Our blog pages consist of a lot of different elements: logos, navigation, sidebars, images, blocks of text, calls to action, etc. Each element on the page is there for a reason, but some are more important than others. That’s why it’s really important that we make it easy for our readers to distinguish which elements are most important. We do this by creating visual hierarchy.

The first step in determining visual hierarchy is to ask yourself:

What is it that I want people to do when they land on this page?
Do I want them to leave a comment? Subscribe to my email list? Buy a product? Read the post?

Whatever it is, make it clear what action you want your visitors to take. Don’t confuse them with too many options.

People are lazy by nature and believe it or not, they actually like being told what to do! This reduces their need to make a decision, so help them out and make it easy for them!

Here are a few examples of ways you can help guide your readers through each page by helping them to clearly understand what are your goals are for that page. Is your goal…

• to get them to subscribe?
  Great! Then make sure your opt-in form stands out on this page.
• to get them to keep reading?
  Then be sure that your subheadings stand out visually and invite them to keep reading down the page.
• to buy a product?
  Then there should be some calls-to-action (buttons) spread around the page with mentions of the product and links to its landing page.

Establish Order of Importance by Making the Most Important Element Stand Out Most

It sounds obvious doesn’t it? But you’d be surprised how this gets missed so often! Once you’ve established what the most important element on the page is (button, opt-in form, etc.), make that element brighter, bolder and/or bigger than anything else on the page.

Creating visual hierarchy is best done through contrast. Contrast in size, color, light vs. dark, etc.

Hierarchy can also be created by giving breathing room to an element that you want to stand out. Don’t crowd this element with a bunch of stuff. Surrounding a brightly colored button with lots of white space makes it stand out quite clearly.

After people see the most important element, their eyes will move around to look for the next thing to rest their eyes on. Make it obvious for them by making the next important element slightly smaller or less bold than the first.

For example, in an article, you can use sub-subheadings, bold and/or italicized text to further indicate importance.

Don’t Forget About the Other End of the Spectrum

Less important items, like disclaimers, copyrights, etc. should be the smallest items on the page.

#2 Less Is More

Following on the last step, another way to avoid giving people too many options is to simply not give them too many options. We do this by making sure our blogs are not too cluttered with unnecessary elements.

Cluttered layouts are overwhelming. Give people’s eyes a clear and natural path to follow down the page. If there is too much to look at, they won’t see anything at all.

This is where White Space comes in. White space doesn’t literally have to be “white-colored” space, the color depends on the background. A more accurate way to put it is “negative space.” It’s a design term that refers to the breathing room found between the elements on the page.

Ensuring that each element has the proper spacing around it will make it easy to figure out which elements are related to each other (i.e. a heading and it’s corresponding paragraph; a photograph and it’s caption; all pieces of a single sidebar widget; etc.).

White space can have a big impact when used correctly because it helps to make each area easy to identify and stand out from each other.

Things You Can Do to Have a Less Cluttered Layout

1. Take a step back from your blog and really look at it. Maybe even blur your vision as you look at it. Does anything stand out apart from the rest?
2. It may help to try and remove everything from the page, then one by one, add things back in, in order of importance. Do this with each element in your header, your sidebar and your home page.
3. Add more white space between groups of elements. Don’t crowd things together. Don’t be afraid to add extra margin or padding between them to clearly distinguish one element from another.

#3 Use the Grid

When elements on your blog page are not aligned to a grid, the lack of cohesiveness can make your design appear haphazard and random. This causes mental discord for your visitors.

Websites are two-dimensional and when designed well, are designed on an invisible grid. Look at your blog as if it were laid out on imaginary grid paper and try to align your elements to it.

Elements in one column should aim to be about the same width and aligned along the same vertical axes. Likewise, elements that are laid out in a row should aim to be about the same height when possible and aligned along the same horizontal axis.

Lining things up vertically and horizontally gives your blog a clean look. It feels unnatural for things to stick out so our eye is drawn to it and it can be distracting. If you’ve got an element sticking out of the grid that you don’t actually want draw attention to, try tucking it back in where it belongs.

However, you can also use this trick to your advantage when trying to catch your reader’s eye. It’s a great way to create visual hierarchy! Magazines use this trick a lot, so pay attention next time you are reading one.

Follow the Rule of Thirds

This rule is a simplified version of the golden ratio. Just like in photography, compositions on the web are also more interesting when laid out according to the rule of thirds.

When laying out your blog or web page, start by splitting your layout into 3 equal columns. Then split it into 3 equal rows.

What this means to you as a blogger:
It means that the best way to set up your content and sidebar columns is to have your sidebar width be equal to one half of your content column.

Ways to Better Align Your Website to a Grid

1. Look at your blog post columns. Are the headings and paragraphs vertically aligned? Are your images the same widths as your paragraphs or at least the same width to the rest of your images?
2. Try justifying your paragraphs. This isn’t a must-do, but I think posts tend to look cleaner when the text is justified, meaning they align on both the left and right sides.
3. Look at your sidebar. Are all items aligned to the grid or are some elements left aligned, while others are right aligned and/or centered? Are the widths all over the board or does it feel symmetrical?
4. Do you have elements of varying widths in your sidebar? Try tying them together by placing a lightly colored box (or bordered box) of the same width behind each section or widget. See if any of the elements can be resized or realigned to fit together better.
5. Add a Chrome extension that overlays a grid over any website and take a look at the grid overlaid on your own blog.

So, Those Are Three Ways to Improve Your Blog Design

You can make a big impact by adjusting a few small things on your blog right now. Find the time to make these changes and you’ll be amazed at how much better it feels to look at your blog.

By the way, if you’re looking for more ways to improve your blog and it’s design, there’s a great opportunity coming up very soon for you to get your hands on a bunch of great resources at a very low cost.

Remember the Genius Blogger’s Toolkit from Ultimate Bundles? It’s baaaack and it’s your one chance to grab my Crush CSS: Code School for Bloggers course plus a bunch of other great resources for less than you’d pay for my course alone – say what???

Here’s a sneak peek at some of the other great resources you’ll get to help improve your blog design:

• The Ultimate Styled Stock Photo Bundles for Female Entrepreneurs by Elley Charles
• How to Build a Beautiful Blog: Graphic Design Building Blocks for Bloggers by Menucha Citron Ceder
• The Editing Bundle: Learn Photoshop & Lightroom by Stacie Vaughan & Randa Derkson
• Blog Photography: Learning Through the Lens by Jessica Cramer

That’s just the tip of the iceberg friends. There are actually 77+ products in this year’s bundle, worth over $5800 (I’m not kidding) for…. just $97. I KNOW!! So it’s a serious NO-BRAINER.

The only caveat is that it’s not on sale yet. It goes on sale Wednesday, October 10th. But to tide you over (and remind you when the cart opens), the folks at Ultimate Bundles are giving away tons of freebies this year.

This week be sure to grab the free ebook, How 40 Professional Bloggers Grew Their Highly Successful Blogs. All you have to do is click the link and it’s yours.

What are some other ways you have found to improve your blog’s design? I’d love to hear how these tips help you, let me know below.