fi-improve-blog-design-tips

8 easy changes you can do to improve your blog design

This guide is for bloggers who use WordPress. You don’t need to have any coding skills but you need to be familiar with your WordPress dashboard and theme customization options.

Set aside 15-30 minutes each day to do each changes. In eight days (or even less), you’ll be able makeover your blog by applying these free and easy blog design tips. Grab a cup of coffee or tea and let’s start the blog makeover!

pin-improve-blog-design-tips

Download a Blog Design Checklist

1. Limit the number of posts displayed on the front page

Does your blog’s homepage display more than 10 full length posts? If yes, then you might want to rethink limiting the number of posts and consider using the read more tag.

Scrolling through numerous lengthy posts on the homepage is not good for your blog, both aesthetically and technically. Take a look at your homepage right now and see for yourself if you find those lengthy posts on your homepage pretty.

Another negative impact is that the more posts you display the longer you blog will take to load.

Wouldn’t it be more pleasing to the eyes if there are only about 5-10 posts on the homepage with a featured image, intro and a read more button? Not only that this will make your homepage look better but it will also make page loading time shorter.

How to limit the number of posts displayed on a WordPress blog:

  1. Log in to your  blog’s WordPress Dashboard
  2. Go to Settings > Reading >
  3. Change the “Blog pages show at most” number

limit-blog-post

How to use the read more tag

  1. Open a post that you want to edit, Edit Post
  2. Place the cursor where you want to cut the post, click the Read More tag button
  3. Update post

insert-read- more

2. Simplify your navigation and content hierarchy

Think of your blog’s navigation menu as a road sign telling your reader where they are and the routes they can take. Make sure that the most important pages or main sections of your blog is easy to get to.

According to web design conventions, the primary navigation should be organized horizontally accross the top of the page. Yes, you can breakaway from conventions, inject your creative juices and be unique but your blog’s navigation is not the place to do this.

Keep menu names short, simple and user-friendly by using terms that are common and easy to understand. Avoid puzzling your readers and forcing them to click the link to know where it leads to. You don’t want them to feel frustrated and lost.

navigation-before
before
navigation-after
after

Studies suggest that too many choices “can lead to fatigue and make people to feel dissatisfied with the experience, or even worse, abandon the process altogether.”

3. Declutter your sidebar

I recently stumbled upon a design blog with a sidebar brimming with social media widgets, advertisements, feeds, badges, other blogging widgets and whatnots. My head spinned at the sight of this and I immediately left the site without even thinking twice.

What do you want your readers to give attention to?

Do you really need to showcase all your social media feeds? It might be good to keep your Instagram feed if you are a fashion or a travel blogger to feature OOTDs and recent trips. Remove that Twitter feed if you don’t even tweet regularly. If your readers are really interested on what you have to say on social media, they will click that social media button and follow you.

As for the ads, I don’t have anything against them and I understand that you can get earinings from ad placements.  But make sure that it’s the correct size with good image quality and it’s not squeezed between unnecessary widgets. You wouldn’t want to turn off prospective advertisers with a cluttered sidebar, would you?

sidebar-declutter
make space for the most important elements

Retain / add widgets that add functionality to your blog

  • search bar – make it easy for readers to search your site, put it in a conspicuous place
  • mini bio – introduce yourself and what you write about
  • subscription – build your mailing list
  • post categories – give your readers an overview of the topics your write about

Remove / lessen other unnecessary widgets and elements such as

  • recent posts – your blog’s homepage already displays your posts in reverse-chronological order
  • tag cloud – Have you ever clicked on a tag when you see them on blogs? Are they useful to your readers? If you think they do not offer value, then ditch it.
  • archive list – instead of displaying a long list of your posts you can create a page for archive and then add the link to the archive pages to on the main navigation or sidebar navigation
  • blog roll – you can also create a separate page for all the blog you follow or have exchanged links with
  • badges – keep the most significant badges on the sidebar, put the others on the About page

Again, less choices more action.

4. Use only 1-3 fonts

Fonts, like colors, can set the emotional tone of your blog design. Using fonts of different styles (serif, sans-serif, script and decorative), generally pair well.

font-serif-sans
serif heading, sans serif body (from fontpair.co)
font-script-sans
script/handwriting heading, sans serif body (from fontpair.com)

For a more simple and minimalistic look, you can use only one style with varying thickness and sizes to differentiate the headings from the body.

font-sans-sans
sans heading and body (from fontpair.co)

Tools for font pairing to give you more inspiration

Most WordPress themes support Google Fonts, check your theme documentation for the step by step guide on how to change your theme’s font.

How to check if your theme supports custom font

  1. Log in to your  blog’s WordPress Dashboard
  2. Go to Appearacne > Customize >
  3. You should see the Fonts tab and customization options
theme-font-02
font customization options

When picking out fonts, remember to use sans serif fonts for the body because it reads better on the web than serif fonts. You can still use serif fonts but reserve them for larger text like headings and subheadings.

(These are my suggestions when choosing fonts. Try to Google “serif vs sans serif for web” and you’ll see many discourses about their readability. Some people say that there’s no difference on the readability while some say sans serifs are more readable. Dyslexic people generally prefer sans serif.)

5. Use only 2-3 colors

Choose one to two primary colors and one accent color. More often than not, the color of the logo or blog header is used as the primary color.

The accent color is often bright and strong which makes it perfect for emphasizing items on your blog like a call to action.

Use basic color harmony formulas to ensure you come up with pleasing color schemes

  • triadic – three colors on separate ends of the color spectrum
blog-color-scheme-triadic
screenshot from paletton.com
  • split complementary – a base color plus two colors adjacent to its complement
blog-color-scheme-split-complementary
screenshot from paletton.com
  • analogous – colors in the same area of the color spectrum
blog-color-scheme-analogous
screenshot from paletton.com

Here are some blog color schemes that I like, simple palettes with a splash of color at the right places

blog-color-scheme-03
http://lovetaza.com/
blog-color-scheme-01
http://cupofjo.com/
blog-color-scheme-02
http://www.lostinflorence.it
blog-color-scheme-04
http://www.aheartyhome.com (not a WordPress blog but I like its light, fresh and welcoming color palette)

Tools to help you decide on your blog color palette

6. Highlight your call to action

What are your blogging goals? What do you want your readers to do?

Do you want them to:

  • Subscribe to your blog updates
  • Sign up to your weekly newsletter
  • Join your monthly challenge
  • Download your ebook
  • Enroll in your online course
  • Try a free 30 day trial
  • Contact you about a project

Whatever you want them to do, make sure you have a main call to action and highlight it.

This takes us back to your choice of colors and the use of contrasting colors to help focus your reader’s attention on a specific part of your blog. The A Hearty Home blog above (last color scheme example) clearly wants site visitors to sign up to the email list.

7. Give your posts structure

Remember that most readers only scan a new site they come accross, hence, you need to make you posts scannable. Break your lengthy posts using meaningful headings using the H2 or H3 heading tags. Some themes use H1 or H2 for the post titles so use the next level heading which is H2 and H3, respectively.

Left align the body text to make reading easier. A left aligned text starts each line at the same edge while a center aligned paragraph starts each line at different edges. This makes reading difficult because you need to work hard to locate where the next line starts to continue reading. Reserve the center alignment for small chunks of text like post titles, blurbs and quotes.

A justified body text is also not recommended. Doing so creates wide gaps between the words called rivers.

sidebar-post-before
before: centered paragraphs, poor post structure, sidebar brimming with widgets
sidebar-post-after
after: left-aligned paragraphs, post structure is improved with use of headings and bullet, smaller chunks of text, decluttered sidebar with highlighted call to action

8. Add a high-quality featured image that complements your post

Images can attract people’s attention. Articles with images get 94% more views than those without relevant images. Visual content also gets more engagement in social media.

I suggest using your own photos as much as possible, but if don’t have time to do photoshoots or if you’re lacking photography skills you can use free stock photos.

stockphoto-unsplash

High-quality images don’t need to be gigantic and have a large size, they just need to be not horribly pixelated. Most blog images are less than 1,000 pixels wide and under 100 kilobytes. To optimize an image for web use, you can resize using a photo editing software and save it as a JPG or PNG.

Lastly, avoid putting important text on images. It may not be readable when viewed on mobile screens.

Download a Blog Design Checklist

Do you have other DIY blog design tips?
Share them in the comment section below.

pin-improve-blog-design-tips

4 thoughts on “8 easy changes you can do to improve your blog design

    1. Hi Chiedza! thanks for dropping by 🙂 Don’t forget to subscribe to get more blogging tips and resources.

Leave a Reply