Breaking Down And Reviewing Important Blog Design Elements

Posted in Blogging, Tips, Web Design, WordPress4 years ago • Written by 9 Comments

Title Breaking Down Web Design ElementsThere are a number of design aspects to your blog you should be thinking about.  Each element on your blog has more going on than you initially think.  Doing your homework and looking at other blogs in the industry to help brainstorm ideas, and see what works/what doesn’t will be essential to designing a blog that is stimulating and attractive.

In this post, we will go through each main section of a blog and talk about the design elements, what you should be thinking about, and relevant resources related to that section.

Header

Your header, the first chance you have to make a lasting and unique impression on your readers.  Typically the area where your logo will live and for new visitors, the place where users will interact with your brand for the first time.  Having a well-designed logo that is easy to read and is catered to your target market, will help give your blog a more authentic and professional feel.

Be careful though, some designers can go a little overboard with making the header so large that it takes up a big part of the main real estate on your blog.  If you blog is taking up half of the users screen, it can lead to people bouncing because they are having to scroll down each time they want to find content.

Header Resources

Main Navigation

Your main navigation will typically be the categories that organize the content on your blog.  It will be extremely important to understand who your audience is, and design a navigation around what those users are looking for.  If you have 20-30 categories, it will confuse your readers and they will have too many options to choose from.  Try to keep the categories broad and simple.  This will help the readers drill down into your content because they will not be bombarded with lots of category options.

Sub Navigation

Having a top or secondary navigation will be key for static pages for your blog.  This is a perfect area to have those “About”, “Advertise” “Write For Us” “Contact” etc…pages.   Remember, your content should be the most important aspect of your blog, not a sales pitch, “Advertise With Us”.  If users are engaged in your content, they will find how to contact you to advertise or to write for your blog.  So do not make this extremely prominent, but make sure it is there and accessible.

Navigation Resources

Sidebar

1.  RSS Subscribe

What is probably the most important aspect of any blog?  To gain loyal readers.  Make sure you have your RSS subscribe option at the top of your sidebar and anywhere else you can put it across your blog.

2. Newsletter

Your blog newsletter can be an outstanding way to keep driving your loyal customers back to your site.  Place your newsletter sign-up in prominent location on your sidebar so users can easily see it.  Don’t just say “Sign-up for our Newsletter”, give them a reason to sign-up.  Tell them they will receive insider tips, discounts, premium content, etc… this will make users think they are getting VALUE.

3. Advertisements

Ads on your blog can be an excellent debate as to whether you should have ads? how many ads? at what point should you put ads on your blog?  These are all great questions.  Initially when you are trying to build up your audience, I recommend not putting any ads in your sidebar or blog for that matter…it can devalue your brand.  Once you start earning a loyal readership, then you can start to incorporate ads.  I would start with 4-6 125×125 ads.  I would suggest putting it about half way down your sidebar, this way you can still add more important aspects like your RSS feed, Twitter Button, and Newsletter Sign-up about it.

4. Popular/Archive Posts

Users like easy ways to get to existing content on your blog.  There is no easier way that by putting quick links in your side bar to your “Popular Posts”, “Monthly Archives”, “Category Links” and “Most Discussed Posts”.  This will make it easy for users to search for previous content from a multiple array of search options.

Popular/Archive Resources

5. Tag Clouds

Users may also want to read content on a certain keyword or topic.  Having a small tag cloud in your sidebar can allow users to easily find keywords that interests them.

Tag Cloud Resources

Sidebar Resources

Post Preview Section

This will be your chance to try and capture your reader to get them to give into a blog post.  The intro snippet should be enticing, give the user an understanding of what the post is about, while leaving them thirsty for more.  Using a relevant image along with the intro text will make the post more appealing and likely that someone clicks through to read the entire post.

Make it easy to share even from the post preview section.  Many people by just reading the post title will be energized enough to share your content on their favorite social networks.  It is also helpful for blogs that gain a lot of traffic, to show Tweetmeme, Facebook Share, and Digg buttons to show how popular each post is.

Main Post Section

This should be where the beef of your content.  This is where people are going to come to read your blog posts, so don’t clutter the section up with ads, irrelevant images, useless white-space, and bad layout/formatting.  Make sure the font you use is easy to read and highlights key titles, subjects, points, etc…  Using things like bullet points, bold titles, italics, links, and relevant images will help make this section more engaging and keep the user reading your content.

It is helpful to have information about the author, post date, comment/reaction recap, and social media sharing icons to give the reader a recap of the post and make it easy to distribute on the web.

1. Comments

Comments are going to be a huge part of keeping your blog interactive and engaging.  It will also help to build your readership, by showing that you have an active and fun environment for people to share their opinions and comments.  Tweaking the design to allow for commenter images, basic HTML, threaded comments, and date/time of comments will make this section entertaining and encourage commenting.

Comment Resources

2. Social Sharing

Make it extremely easy to share your content.  Use social media icons at the top and bottom of the post, add the ShareThis plugin, add the TweetMeMe, Facebook Share buttons,allow people to email to a friend.

Social Sharing Resources

Footer

Having a well designed footer can be useful on a number of different levels.  For an end-user, this can act as a sitemap-like navigation so a user can quickly dive back into your content.  It should be a way to easily find main categories and key pages on your blog.

Things to think about adding to your footer:

  • Blog Categories/Navigation
  • RSS/Email Subscribe
  • Social Sharing Buttons/Icons
  • Tag Clouds
  • Author Links
  • Links to Advertising, Contact, Privacy Policy, Guest Blogging
  • Recent Posts/Comments
  • Popular Posts
  • Archive Links
  • Newsletter Sign-Up
  • Industry Poll
  • Real-Time Twitter/Facebook Updates

Resources for Well-Designed Footers

Functionality

1. Search

Having search functionality in the sidebar or header, will make it easy for reader to search for content or topics they are interested in.  Having a “Search” button that is easy to see and stands out will entice more people to search your blog content.  It may be worthwhile to add a few areas on the blog where they can search.

2. Trending Topics/Posts

Mashable was the first to start the feature of trending or hot topics.  It puts content that is going viral at the forefront of your blogs homepage.  Having similar functionality will allow users to not have to hunt for content that is popular among your audience.


3. Facebook/Twitter Connect

To make it easier for readers to leave comments, sign-up for an account, or download content, give them the option of using the “Connect” feature for their favorite social network.  This will allow them to login using their existing facebook, twitter, or openID account.

Overall, in order to design an effective blog you need to think about what your audience wants.  What type of functionality do they want? What content do they want? What important aspects of your blog should be highlighted on the homepage?  How can you gain more leads, sign-ups, subscribers, shares?

These are all things that you will need to think about and gain feedback from other industry blogs, your readers, and friends.

7 Written ArticlesWebsite

Mark is the President of Search Creatively a Raleigh Internet Marketing company. He also is the creator of StayOnSearch, a search marketing blog dedicated to SEO's and Internet Marketing professionals. He also contributes to a number of industry blogs including Search Engine Journal, ProBlogDesign, and 1stWebDesigner. Follow Mark on Twitter (@m_thompson)

9 Comments Best Comments First
  • Nikunj

    Monday, April 19th, 2010 13:55

    1

    Great Post Mark, Was thinking of writing something similar, but this post covered everything. Nicely illustrated everything.

    0
  • levati

    Thursday, April 22nd, 2010 20:03

    4

    Thank you for this article.
    It’s really helpful information for beginners like me.
    PS: How do you make a dynamically loading illustration by user page scroll?

    0
    • Saad Bassi

      Thursday, April 22nd, 2010 20:18

      5

      We are using jQuery Lazy Load plugin for wordpress which helps us to save bandwidth.

      0
  • Jordan Walker

    Tuesday, April 20th, 2010 15:12

    3

    Thanks for the article, helps to see the blog broken into pieces before you can see the whole.

    0
  • Ian Thomas

    Monday, April 19th, 2010 17:17

    2

    Very nice post, thanks. A great resource with helpful information delivered concisely… Exactly what we’re looking for.
    On the search functionality, don’t you find that if people describe a topic with terminology you don’t use then they won’t get results and leave. Is it not easier to use a sitemap so they can see all the results easily and navigate to their required area?

    0
  • Utwoo

    Monday, June 14th, 2010 19:04

    6

    You forgot about “related post” section on the bottom of every post.

    0
  • GFXBD

    Tuesday, August 24th, 2010 21:47

    9

    Lots of information here. By the way if you need free icon, logo, flash templates , multimedia for free to download then you can visit GFXBD.

    0
  • Lisa

    Wednesday, June 23rd, 2010 19:22

    8

    Great article and site. Thank you for posting. The articles are very helpful.

    0
  • Dan

    Wednesday, June 16th, 2010 00:23

    7

    hey, which theme are you using in this site?
    and the plug-ins too… how do you make the pictures dissolve while scrolling? it’s super cool! :D

    0
  • GFXBD

    Tuesday, August 24th, 2010 21:47

    9

    Lots of information here. By the way if you need free icon, logo, flash templates , multimedia for free to download then you can visit GFXBD.

    0
  • Lisa

    Wednesday, June 23rd, 2010 19:22

    8

    Great article and site. Thank you for posting. The articles are very helpful.

    0
  • Dan

    Wednesday, June 16th, 2010 00:23

    7

    hey, which theme are you using in this site?
    and the plug-ins too… how do you make the pictures dissolve while scrolling? it’s super cool! :D

    0
  • Utwoo

    Monday, June 14th, 2010 19:04

    6

    You forgot about “related post” section on the bottom of every post.

    0
  • levati

    Thursday, April 22nd, 2010 20:03

    4

    Thank you for this article.
    It’s really helpful information for beginners like me.
    PS: How do you make a dynamically loading illustration by user page scroll?

    0
    • Saad Bassi

      Thursday, April 22nd, 2010 20:18

      5

      We are using jQuery Lazy Load plugin for wordpress which helps us to save bandwidth.

      0
  • Jordan Walker

    Tuesday, April 20th, 2010 15:12

    3

    Thanks for the article, helps to see the blog broken into pieces before you can see the whole.

    0
  • Ian Thomas

    Monday, April 19th, 2010 17:17

    2

    Very nice post, thanks. A great resource with helpful information delivered concisely… Exactly what we’re looking for.
    On the search functionality, don’t you find that if people describe a topic with terminology you don’t use then they won’t get results and leave. Is it not easier to use a sitemap so they can see all the results easily and navigate to their required area?

    0
  • Nikunj

    Monday, April 19th, 2010 13:55

    1

    Great Post Mark, Was thinking of writing something similar, but this post covered everything. Nicely illustrated everything.

    0

Comments are closed.

54.167.154.36 - unknown - unknown - US