Blog Design 101: Your Complete Guide to Designing Blog Elements that Will Give Results

If you’re trying to design your blog layout from scratch, your end goal is to create a design which best suits your readers’ needs and requirements.

What may work for one blog may be completely useless for another, so don’t be too keen about copying somebody else’s design style. Instead, focus on the basic principles and guidelines and let them help you develop a design that uniquely represents you.

Designing a blog is about bringing together various elements and parts to create a website which effectively delivers your message to your readers. Below, we analyze the most important of these elements, and how you can include them in your own design.

Getting started

Many people who are starting a blog have no idea where they want to take it, which is a big problem when trying to determine what direction to take. However, you can take comfort in this one thing: you may not yet know what you want, but you’ll definitely know when you get it. Answering these three questions can help you map out your design path:

  • What’s your inspiration? Look around for inspiration on design, color choices and prints. You can find these anywhere, but Pinterest might be a great place to begin.
  • Which are your favorite blogs? Find five blogs that you’re crazy about and determine what exactly you like about them, and if you can extrapolate the idea to your own blog. Create an Pinterest inspiration board which will allow you to collect your inspiring elements under one roof.
  • What differentiates you? Your blog should be a reflection of who you are. Capitalize on the aspects you want to bring that will differentiate you from the rest.
  • What colors do you like? When choosing your color scheme, think not only about the colors that make you happy, but also the significance of your choice to the kind of blog you’re running. Since you’re hoping to attract other people to your blog, you can’t focus only on what you want.

1. The Header

The header is where you make the first impression on your viewers, and it sets the tone of their interaction with your blog. Have serious headers for serious blogs and fun and creative headers for fun blogs. Consciously choose your words, and then use them concisely.

Niche bloggers (talking about something specific)may have an easier time with this, but everybody can find something – one thing – that their blog is about. If you instance you have a personal blog, then the blog is about you, and you can share something about yourself in a creative way.

Make your header between 150 and 250 pixels high so that you can maximize your above-the-fold real estate (the space on a webpage before you scroll). If you must have a header above 250 pixels, consider the following:

  • Add functional elements – integrate some functional elements like navigation, social media icons and RRS feed icons into the header to maximize on the space. Many premium WordPress themes already have header widget portions laid out. On Blogger, you may have to code a header widget box in.
  • Work the graphics – from illustrations to photographs, invest in great quality graphics; you’d rather have great graphics or nothing at all – it’s that serious. You can find many images and illustrations on the web. If you know Photoshop, even better, you can tweak your images to make them more… you. If not, I’m sure you’ve got a friend you can bribe. Getting the header right will make every other aspect much easier to place and design.

2. Font and typography

Fonts can help to set a tone for your website and blogposts, and you can get many infrequently-used fonts for free. Whether you’re going for chic, fun, whimsical, serious, contemporary, Goth and more, there are tons of choices online that you can use. Before choosing a particular font, think about the following:

  • Should be easily read and letters should work well with other elements.
  • If combining fonts, they should complement each other (use a maximum of three fonts).
  • Keep the main text font simple. It should be clean and easy on the eyes. Having a frilly, fun main font makes reading difficult and tires out the brain. You can use fun fonts on sidebars, signatures, headers and post titles.
  • Please, please, please don’t use Papyrus or Comic Sans, we beg you.
  • It should be neither too small nor too funky; your readers won’t suffer through it.

When choosing fonts for your site body, consider whether or not it will be rendered on all computers the same. Some fonts are not included in other computers, such as Century Gothic, which is a great reading font not included in Mac computers. Ensure you include a backup font that’s just as good in case the machine being used to access your blog doesn’t have your specific font.

You should also use web-ready fonts that will look good on all devices and show all your punctuation. Some special characters don’t exist in the certain fonts’ registers, which means some of your information won’t be displayed if you use them. Google has tons of free, easy-to-use and web-ready fonts. You can also check out dafont or the Kevin and Amanda site for more fonts for peas (handwriting-based) and scrapbook fonts (conventional fonts).

3. The Footer

Your footer should have more than just the copyright statement; t is in fact the second most important design element on your webpages. Now that you have brought your reader all the way down (well done!), you should have a clear path to direct them next.

If a reader has gotten to the bottom of your webpage, they’re probably very impressed with you, and might be interested in checking out your other categories. Having gone through your page, they may now be willing to subscribe to your site feed or mailing list or follow/like you on social media. Give them all the features they need to connect with you outside your site, as well as a way to reach every other part of your site without having to scroll back up to the navigation.

You can also include three or four of your most popular posts in the footer to get readers to interact with some of your best work. Use the footer to highlight what else is interesting/awesome about your site.

4. Social media icons

You should make it easy for readers to find and connect with you in other places on the Internet, which is great as it will build an audience for you even outside your blog. Social networking is critical to the success of your blog, which is why adding social icons is important. To start placing your icons, you can do the following:

  • Search icons – begin my searching for social icons on Google, which may direct you here. If you’re more creatively inclined, you can make your own icons using Photoshop. The ideal size is 60 px all around.
  • Upload icon – you can do this directly onto the blog or use flikr, photobucket and other photo sites, then include a link to the image in your code.
  • Add your HTML code – in Blogger, the following line of code should be added into the HTML widget area, while in WordPress it goes into the text widget area:
<a href=”” target=”_blank”><img src=””></a>

This simple line of code inserts any image onto your blog.

5. Blog feed

The RSS feed is a popular way for bloggers to easily follow other blogs. Most blogs are usually set up to give an automatic feed, but this doesn’t come with automatic options for following important statistics, which can be very useful for an upcoming blogger.

To set up your feedburner:

  • Go to and set up your feed by placing your feed address or blog in the box.
  • Once the URL is verified, the next page will display, and you’ll need to ensure the Feed Address and Blog Name (very important!). if you change the feed address in the future, you MUST notify readers, as they won’t be automatically updated.

That’s it! You now have a feed. In Blogger, you can go to Dashboard >> Settings >> Site Feed, and you’ll see a box with the title ‘Post Feed Redirect URL’ where you need to insert your feedburner feed address. In WordPress, you may need to download the Feedburner Feedsmith plugin, which you can find here. This is the most recommended plugin for this task, as it remains consistent even with WordPress updates.


Designing a blog is no mean feat, especially if you have no design experience whatsoever. There are many important aspects to consider, as well as steps to take. As a beginner, you may not be able to design an entire site from the ground, even if you have all the tutorials. Instead, find a good theme which you can customize, and start there. There are thousands and thousands of both free and premium themes you can get on both WordPress and Blogger. As you grow more proficient in coding and design, you can slowly work on further customizing different elements of your blog so that it doesn’t look like someone else’s.

The most important thing to remember is that it will take a lot of time and effort. You may need to comb through tens of tutorials before you get it just right. But once you do, the reward of a unique blog will be well worth the effort.

All the best!

Like the article? Share it.

LinkedIn Pinterest


  1. Unlimate articles .

  2. Good sajetion

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *