Designing a blog can be quite a daunting task, to be sure. To-do lists alone for could fill pages if you were to include all the minor details that accompany the project. Which is why most designers shy away from logging that in-depth of a laundry list of items, indispensable and not so much, to get done by the launch date of the blog. Which is also why some of these little things that would make the latter pages of the list, more often than not, get overlooked. Never fear, that is why we are here!

It is an easy thing to do when so much is on your plate, to let one or two of the smaller details silently slip through the cracks, remaining hidden in the dark crevasses in the backs of our minds. And though this checklist may not be as long as I exaggerated such a comprehensive to-do list would be, this is a list of nine very important details that many blog designers overlook. These are often thought of as so minor that it makes little to no difference in the overall design of your blog. However, these features can serve to top things off, design wise, and act as some simple finishing touches that step up your blog’s presentation, and thereby, its presence.

1. Favicon

How important can a tiny 16×16 pixel square be? Well, I guess the true answer to that, would be relatively based on how important your branding is to you. Favicons not only take your branding a step further in solidifying it, but they also make for easily recognizable bookmarks for your readers. And any steps that you can take to improve your reader’s experience is always a worthwhile time investment that will pay off in the end. It may be one small step for you, but it will be one giant leap for your blog.

Resources

It’s very simple to add a favicon to your website.

Step 1 – Create the favicon and name it favicon.ico. Below are a couple of resources to help you.

Favicon from Pics

Favicon from Pics

Quickly create favicons from images or your Twitter icon.

Create a Favicon in Photoshop

How to Create a Favicon in Photoshop

A tutorial on how to create a favicon in Photoshop and save it as an .ico file.

Step 2 – Upload favicon.ico to your root directory

Step 3 – Add the following line of code between the head tags of your header file.

  1. <link rel=“shortcut icon” href=http://www.yoursite.com/favicon.ico>  

Inspiration

Favicon

Favicons Episode 8 – Smashing Magazine has an 8 part series featuring some of the best favicons from around the web. The other 7 parts are also listed in the post.

2. Subtle use of gradients, textures, shadows & single pixel lines

…Oh my! That is a bit of a list in and of itself, but it is better seen as a number of available options at the blog designer’s disposal to enhance their work. These small details give a design depth and keep things from looking flat and boring. You want your design to be pleasing to the eye, to appeal to your readers and entice new ones to check out your site. If the site looks dull and drab, then more times than not, people may judge the content and bloggers to be the same. Make the right first impression through your design with these subtle inclusions, and you will not be sorry that you took the extra time.

Resources

Just Creative Design

How To Make Your Next Website Design Pop

Loads of great tips on those subtle visuals that will polish your design.

Gradients

A Gradient Tutorial

Some great tips on the proper use of gradients and some common problems new designers have.

Texture Lovers

Texture Lovers

A large collection of textures from around the web that are free for commercial use.

Lost & Taken

Lost & Taken

A blog dedicated to providing high quality free textures to the design community.

Inspiration

3. Icons

Coming in third on the list (though to be fair, they are not listed in any kind of order of importance, because they are all important), focuses on you finding or making the right set of icons to fluidly fit into your design. There are literally thousands of icon sets that have been graciously given to the community, so give this search the time it needs to be thorough. Or again, create a set of custom icons to complement your theme. You want these elements to mix seamlessly with your site, so as to not detract from your flow and design. Also make sure to use link icons to let people know what kind of link they are following. Again, this is just a matter of courtesy to your readers.

Resources

Lost & Taken

Add Progressive Icons to Your Site Using :after pseudo-element

A tutorial that teaches you how to add icons to the links on your site.

Smashing Magazine Icons

How To Use Icons To Support Content In Web Design

A great and in depth tutorial on how you can use icons to enhance your web designs.

Icon Finder

Icon Finder

An icon search engine including over 100k icons and 186 icon sets.

Instant Shift

75 Free Useful Icon Sets for Web Designers and Developers

A varied collection of both free and premium icon sets.

Inspiration

4. Whitespace

This is one I have had to struggle with myself, but you can learn from my shortcomings without succumbing to them yourself. Do not fall into the same trap I fell into, feeling that just because you have empty space it has to be filled with something, anything…it didn’t matter if it served the design or not, the whitespace had to go. Through growing as a designer, and strict bi-weekly aversion therapy sessions, I was able to break free from my bad design stranglehold and see the light. Keeping whitespace makes your blog look clean and not overly cluttered, not to mention it really aids in making the content stand out.

Resources

A List Apart Whitespace

Whitespace

A List Apart’s look at the importance of using whitespace in web design.

Web Design Tuts

Using White Space Effectively In Web Design

A how to on effectively using white space complete with some excellent examples.

Inspiration

5. Alignment

I understand that out of the box thinking which often leads to a lot of innovative design techniques, so I do not want to cramp anyone’s style, or more so their alignment, with this next topic. Alignment can be very important for your site, simply because of the symmetrical feel and flow it can provide to your design. It is a scientifically argued point, that people respond favorably to symmetry and through use of a grid, you can ensure that your elements are all in line, so to speak, and are visually stimulating to a majority of the masses who will be interacting with your blog. By all means, buck the system if you want, but my advice would be to use a grid for initially laying out your blog design then, if necessary, break the grid.

Resources

The Grid System

The Grid System

The ultimate resource in grid systems.

The 960 Grid

960 Grid System

The official site of the 960 grid system. Downloadtemplates and the CSS framework here.

Fuel Your Creativity

Grid Based Design Toolbox

Pretty much any link you could think of on grid based designs.

Inspiration

6. Typography

What is a blog without words? Other than a non-descriptive gallery with no context, protext, or any kind of text. Kidding, but seriously, making sure that the typography you have chosen for your blog is eye catching, is definitely one to consider, that some designers overlook. Like with most media, your headlines have to stand out and grab reader’s attention to draw them in. A blog is no different. You may think that what it says is all you need worry with, but you would be wrong. Making sure that the fonts used are clear and readable are beyond a must, they are…something that is beyond a must. If either your headlines or your body type are not clear, people are not going to stick around long trying to decipher your typography.

Resources

Web Designer Depot

10 Web Typography Rules Every Designer Should Know

The title says it all!

I Love Typography

A Guide To Web Typography

I Love Typography’s guide discussing contrast, size, hierarchy and space.

NetTuts

6 Ways To Improve Your Web Typography

A must read article for anyone who wants to improve their web typography.

Inspiration

7. Emphasis

This is another area where I know better than I perform, but I am working on it, and that is placing emphasis throughout the posts and site to make the blog a bit more user friendly as well. With so much going on in your posts and your blog, it is easy for a reader to become overwhelmed, or simply not have the time to fully concentrate, and so the user merely skims them both looking for something to catch their eye. Make sure that you take this into consideration and bold important information for users to make it stand out for them. Also, be sure to have your links highlighted in a complimentary color to make sure they do not get overlooked by the busy reader, as well. Once again, it is always beneficial to your blog to take the extra steps that improve the users overall experience, and this is one of them.

Resources

Emphasis

Emphasis in Web Design:
How to Make Things Stand Out

A look at all the different elements you can use to add emphasis to your design.

Web Style Guide

Web Style Guide 3rd edition: Emphasis

An article specifically focusing on how to add emphasis to your typography.

Inspiration

8. Styling Lists & Blockquotes

One of the main focuses of your blog will be the posts you put up, so make sure you do not undercut your site by under-styling your content. You want to demonstrate pride in your work as you present it to your audience, and one way to easily achieve this is through your style-sheet. Having well styled lists and blockquotes can do a lot to not only enhance the look of your posts, but if you have guest authors it opens up the format for their posts a bit. Having a limited style-sheet may effectively tie the hands of your guest writers who do not like having their posts presentation seeming bland and unsophisticated. So they opt to leave out elements that would normally give the post a bit more presentational punch and pizazz.

Resources

Taming Lists

CSS Design: Taming Lists

A tutorial that teaches you how to style lists in pretty much any way you can imagine.

Listamatic

Listamatic

Listamatic shows the power of CSS when applied to one simple list. A great resource if you quickly need to figure out how to do a particlular list style.

Styling Blockquotes

Six Ways To Style Blockquotes

Six different ways to style blockquotes including how-tos for each.

Styling Blockquotes with Images

Simple Double Quotes

How to style blockquotes using background images.

Inspiration

9. Separate Comments from Trackbacks

The final design detail that tends to get underestimated or under-valued that I want to talk about here, is the separation of comments from the article’s trackbacks. While it is understandable for you to want to not only recognize those who link to your work, but also to keep those links in the post for prominence and relevance, you have to keep in mind that it can be frustrating for a reader to have to sift through trackbacks mixed in with comments. Taking the time to distill the two elements apart from each other on your blog will help with the flow of readability, and once more show a dedication to the user friendliness of your site. As I said, it is nice to want to include these links kindly extended to your work, but that is generally not what the readers who comb through your comments are looking to read.

Resources

Separate Comments from Trackbacks

Separating Trackbacks from Comments

An extremely simple how-to.

Separate Comments from Trackbacks with jquery

Separating and Hiding Trackbacks with Jquery in WordPress 2.7

Useful if you want to either separate or hide trackbacks.

Inspiration

That’ll do it from this end

Well those are my nine suggested details that you need to keep a focus fixed on as you dive into your blog design so that they do not get left on the road of good intentions. What other major ‘minors’ do you hate to see forgotten?

tweetmeme_url = ‘http://www.tutorial9.net/web-tutorials/9-things-you-cant-forget-when-designing-a-blog/&#8217;; tweetmeme_source = ‘Tutorial9’; tweetmeme_service = ‘su.pr’; tweetmeme_service_api = “3156cf1ebf13326aa986f94718431731”; url_site = ‘http://www.tutorial9.net/web-tutorials/9-things-you-cant-forget-when-designing-a-blog/&#8217;; Stumble It! Add to Delicious Bookmarks
Vertical1234620 = false; ShowAdHereBanner1234620 = true; RepeatAll1234620 = false; NoFollowAll1234620 = false; BannerStyles1234620 = new Array( “a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;}”, “img{border:0;clear:right;}”, “a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}”, “a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}” ); document.write(unescape(“%3Cscript src='”+document.location.protocol+”//s3.buysellads.com/1234620/1234620.js?v=”+Date.parse(new Date())+”‘ type=’text/javascript’%3E%3C/script%3E”));

div#bsaz_1234620.adblock {width:100%;display:block;} div#bsaz_1234620.adblock a{width:600px;} div#bsaz_1234620.adblock a img{padding:0;} div#bsaz_1234620.adblock a em{font-style:normal;} div#bsaz_1234620.adblock a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;} div#bsaz_1234620.adblock img{border:0;clear:right;} div#bsaz_1234620.adblock a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;} div#bsaz_1234620.adblock a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;} div#bsaz_1234620.adblock a.adhere{width:600px;height:100px;line-height:800%;} html>body div#bsaz_1234620.adblock a.adhere{width:598px;height:98px;} div#bsaz_1234620.adblock img.s{height:0;width:0;}FoxyCart AJAX Ecommerce