9 Things You Can’t Forget When Designing a Blog
Designing a blog can be quite a daunting task, to be sure. To-do lists alone 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.
Quickly create favicons from images or your Twitter icon.
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.
Inspiration
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
How To Make Your Next Website Design Pop
Loads of great tips on those subtle visuals that will polish your design.
Some great tips on the proper use of gradients and some common problems new designers have.
A large collection of textures from around the web that are free for commercial use.
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
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.
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.
An icon search engine including over 100k icons and 186 icon sets.
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’s look at the importance of using whitespace in web design.
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 ultimate resource in grid systems.
The official site of the 960 grid system. Downloadtemplates and the CSS framework here.
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
10 Web Typography Rules Every Designer Should Know
The title says it all!
I Love Typography’s guide discussing contrast, size, hierarchy and space.
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 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 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
A tutorial that teaches you how to style lists in pretty much any way you can imagine.
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.
Six different ways to style blockquotes including how-tos for each.
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
Separating Trackbacks from Comments
An extremely simple how-to.
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?
186 Comments
“It sure was a long one. I agree, these are minor details, but they make a difference. Thanks for the read and thoughts.”
Flag as inappropriateYou can read more about it?
Nice posts about the artwork and organization of a blog. Now I need to figure out how to get started on what to blog about?
Flag as inappropriateA nice piece of advice. I will keep this as my check list when I design my sites.
Flag as inappropriateNice posts ..keep it up!
Flag as inappropriatePHP Brush EnetSpark provide a complete solution of website development, website design, website promotion (SEO), website maintenance and website graphics.India web development
Flag as inappropriatejzGEnO http://cgE8hcmk9Vvqlosr5wcBa6nk.com
Flag as inappropriateThanks so much for this tutorial, clear & user-friendly, I will definitely use it to design my next blog!!!
Flag as inappropriate“There is nothing as depressing as a good message getting lost in bad design” well said by Ashley.
Flag as inappropriateNice tutorial.The points you have mentioned in the post are really should be remembered by a developer.
Flag as inappropriateI’m with you with whitespaces. It’s the “in” thing now in corporate advertising/website.
Flag as inappropriateLove this article!
you’ve got some really great idead that I hadnt even considered! Definitely agree withe Favicons… but erm.. where’s yours? LOL!
Cher
Flag as inappropriateGreat post,this is very usefull for a nob like me ,thanks
Flag as inappropriateCool tutorial ,bookmark this page
Flag as inappropriateGood article, I hope this is use for us thanks.
Flag as inappropriateI want to learn professional PHP to create some excellent websites. Is there any free tutorial for the same ? Is there any website that provides the source code of the entire website ? Any help be appreciated.
Flag as inappropriateThanks for sharing the link on Icon Finder. I was searching a website that provides numerous free icons. Now got with your help.
Flag as inappropriateGood design blog,thank for share
Flag as inappropriateAs a regular blogger I come across a lot of really good looking blogs, the attention to visual detail in these blogs is what brings me back to them time and time again. This is a great list of blog tips and it’s something we should all be aware of. On another note, the Colorburned icons are a different take on the normal web 2.0 look. I like it a lot!
Thanks for sharing.
Flag as inappropriateCool design blog,thank for share
Flag as inappropriateNow I still have to improve. Feel free to criticize on MXL87.com, a small part of the website is translated into English .
Flag as inappropriateCool design blog,thank for share
Flag as inappropriateAs being a blogger without knowing the PHP it’s not possible for me to make a website more stunning and gorgeous.
But I will like to change my website overall design according to ur post.
Thanks,
Flag as inappropriateShamim
Good post. Thank you for sharing.
Flag as inappropriateThanks for sharing!!!
Flag as inappropriategreat post and thanks!
Flag as inappropriateGreat idea , Thank you for your share.
Flag as inappropriatethanks, great content:)
Flag as inappropriateVery interesting hehe
Flag as inappropriatek
Flag as inappropriateYou wrote a pretty useful lot of advise. I’m glad to have thought of many point by myself, and also, knowing some of the websites you link to makes me feel that I wasn’t wrong. Thank you for giving me confidence. Now I still have to improve. Feel free to criticize on MXL87.com, a small part of the website is translated into English .
Flag as inappropriategreat i never seen before.58
Flag as inappropriategreat i never seen before.51
Flag as inappropriategreat tutorial . Thanks517
Flag as inappropriatethanks a lot for the share rob
Flag as inappropriateThere is nothing as depressing as a good message getting lost in bad design, and if the content is bad with great design I always still love the great design. Thanks
Flag as inappropriateWell said ;)
Flag as inappropriatewow! this is an awesome resources to starting a blog and also tweaking out my current blog, thanks for sharing! i going to retweet this! aloha!
Flag as inappropriatehi rob, can i use this on a free blog like blogger?
Flag as inappropriateI am a fairly new blogger. I must admit, I haven’t been completely satisfied with my overall look. I do want it to have a look that is more professional. This info will be my guide for improving my design. You’ve given so many valuable resources that will be helpful. Thanks for taking the time to share.
Consuela
Flag as inappropriateThis post is amazing, I like the useful info about the favicons, you make it so simple to do. Thanks for taking your time to help others.
Flag as inappropriateRob,
Great list, and great site!! I’ll be bookmarking you for sure!
Patrick
Flag as inappropriateGreat designs, love your list.
Flag as inappropriateI regret how i missed such a lovely post all these days excellent one
Flag as inappropriateVery useful. Now I know how to make use of the white spaces in my blog. :D
Flag as inappropriateHi,
Flag as inappropriateThis is a very helpful post, I really agreed on the white space and the web typography, um….actually to all of them :p
It’s nice to read such post that reminds us the designer to obey certain rules sometimes :)
Hello,
Flag as inappropriateNice post but, it was difficult to read and grasp.
You shu have aligned the smaller images to the right.
Amazing, amazing post. All the things you mentioned and the examples are relevant to any website design really, and you’ve covered and incredible amount of content…really really helpful stuff! Thanks :)
Flag as inappropriatehii,
Flag as inappropriateThis tutorial is really helpful for me as i have to develop a project in college which is for 2 credits.I hope if I implement all these steps in my project then m surely gonna get a decent grade. Thank you.
Hello, Rob! Thank you for your tips.
Flag as inappropriateBut I didnt´t understand, what is white space?
Huges
Well … LOL … we’ve forgotten most of those things and our blog is still pretty bloody successful! Go figure!
Mind you, a redesign after 7 years is probably in the offing … just need to find time.
:-p
Flag as inappropriateNice post. Thanks for your sharing.
Flag as inappropriateThat’s certainly a handy list, Rob. I can see myself using it as a “Am I making the most of [ insert list item ] for my client?” checklist.
In that spirit, I’d probably add Headers – I always have to remind myself to organise my header tags to suit the content for the purposes of enhancing user experience, visual design and search engine optimisation. Some people do it very well.
Flag as inappropriateThanks, Ricky. And you I totally agree. Headers would be a great addition to this list. Much appreciated.
Flag as inappropriateAH! You’re so right! Curses to favicons and list styling… Thanks, stumbled!
Flag as inappropriateAnd thanks for the stumble!
Flag as inappropriateHello Rob, this is very nice post! I’ll bookmarked your post! thank you very much!
Flag as inappropriateit’s awesome , it was really helpful for me , i’m a beginner in web design. thanks a lot man you are a genius.
Flag as inappropriateThanks, Manny. Glad to be of service. Good luck out there.
Flag as inappropriateThank you very much!!!
Flag as inappropriateWish I had time to learn Photoshop. Nice sharing
Flag as inappropriateAlignment is very important. One of the things not mentioned though is how important alignment is to reading the post which is what a blog is all about.
Flag as inappropriateYes, alignment is important, but these are minor design details that generally get overlooked. If you are overlooking alignment when you design the blog, these 9 tips ain’t gonna help ya. ;)
Thanks!
Flag as inappropriateThanks for all the kind words. Glad that so many of you have found this post helpful.
Flag as inappropriateI have no blog yet. But I’m sure that when I start blogging, this details will be very helpful for me.
Flag as inappropriateSome really good tips here.
Flag as inappropriateStill, design is still a matter of taste. What might be beautiful for someone, might be ugly for someone else.
True it is all relative. However, when you take care of these minor details, it just shows a dedication to your the site and your design. A full follow through, always looks a bit more professional, again, in my humble.
Flag as inappropriateThis is a nice lil list man
Flag as inappropriateWhite Space! Huge one! Using it here: http://www.wififaith.com
Great post!
Flag as inappropriateThank you. Nice use of the space.
Flag as inappropriateI love the dirty look of the social media buttons on Colorburned. And I am checking out the resources you share on typography. Thanks for them.
Flag as inappropriateI love those buttons too. Glad the post proved helpful.
Flag as inappropriatevery helpful, thanks
Flag as inappropriateAnytime.
Flag as inappropriateThanks a lot for info about Icon Finder. It’s really hard sometimes to find icons for project.
Flag as inappropriateNo problem. I feel you on that one.
Flag as inappropriateThanks for sharing these helpful tips. In my opinion, blogs shouldn’t focus too much on the design and instead, put more effort on the content because that would be the main thing that would attract people. But don’t get me wrong, the design should also be put into consideration. Just like what Rob said above, balance is the key.
Flag as inappropriateBut this post is geared towards design elements, not content. The purpose of the post was more for say designers who are not actually going to be running the blog, therefore, they need only concern themselves with design elements, not content related ones.
Oh, yeah, balance!
Flag as inappropriatethat is a great list, im sure I will be refering back to this for a very long time !
Flag as inappropriateGlad it could help. Thanks.
Flag as inappropriatewell, great! now i have to add on my list to check this list again while i’m designing my blog! :D
awesome tips, thanks Rob!
Flag as inappropriate:) Sorry to give you more work…don’t hate me! ;p
Flag as inappropriateI absolutely agree with you regarding the subtle use of textures and shadows. You are also right about dull and drab blogs. But I’ve seen that some designers use a lot of colors to make their blog design interesting and vibrant and end up with a loud or clumsy blog . I think you need to balance so that it’s neither too boring nor too loud. And I also agree with TJSharky that Content is one of the most important factors.
Flag as inappropriateI think you are right, there needs to be a balance. I also agree that content is an important factor, just not a design related one. Thanks for taking time to read and to comment.
Flag as inappropriategreate post ! Thanks share you idea!
Flag as inappropriateGreat information!
Flag as inappropriateThanks to everyone for all of their kind words and comments on the post. I appreciate all the response and feedback. Much love to you all.
Flag as inappropriateI’ve been doing quite a lot of blog design recently and i’m really enjoying it!
This is a nice little checklist for anyone just starting the design process.
Thank you
Flag as inappropriateNice article, but you forgot the real #1 tip, content. You can have the most beautiful blog on the ‘net, but if you don’t have any substance to bring folks back, it won’t matter.
Flag as inappropriateTrue. Content is key. I talked about that in the last post I did here, so I didn’t want to overlap. Plus, since the post is about minor details that generally get overlooked, I didn’t think something as important as content should be relegated to that minor a role. But you are completely right, pretty don’t keep the people coming back.
Flag as inappropriateNice post, thanks
Flag as inappropriateHo Gush! that was one of the most larges posts I have ever sean! I have to say you give a lot of tipps. but som of them are realy not extreme important.Any way, this work was realy realy professional.
Flag as inappropriateThanks, Christopher. It sure was a long one. I agree, these are minor details, but they make a difference. Thanks for the read and thoughts.
Flag as inappropriatenice post and good inspiration refrance
Flag as inappropriateThanks. I thought so, too.
Flag as inappropriateThank you for including Iconfinder in the list.
/Martin Leblanc
Flag as inappropriateNo problem, it is a great service. Thanks.
Flag as inappropriateReally good article and lots of great links and inspiration. Thank you!
Flag as inappropriateGlad you found it useful. Thanks.
Flag as inappropriateGreat article. You’ve outdone yourself again with this one Rob. Also wanted to say thanks for including fudgegraphics.
Flag as inappropriateThanks, Franz. I really appreciate the comment. And never a problem on the mention. Love the blog!
Flag as inappropriateVery useful informations, thanks so much!
Flag as inappropriateThanks for mentioning my icons!
Flag as inappropriateAnd thank you for them!
Flag as inappropriateLove it when the homework and research is done as well as this post. :-) Good work
Flag as inappropriateWhy thank you, Henrik, that is very nice of you to say. Much appreciated.
Flag as inappropriateI didn’t really think about some of these points before. Very enlightening. Thanks for a wonderful article Rob :-)
Flag as inappropriateAnd to you, as well, for the kind words.
Flag as inappropriateNice collection of blog elements.
The internet would be a nicer looking place if more people took these tips to heart…
–
Thanks & Regards
Flag as inappropriateNoel from nopun.com
a professional graphic design studio
Thanks, Noel. I think that is true.
Flag as inappropriateAll excellent points. Agree with Zebb that the title’s a wee misleading. Your points seem more on the mark of “9 Subtle Graphical Elements which Dramatically Impact Your Blog Design”… Thnx for the tips and great examples!
Flag as inappropriateThanks, Lisa. I like that title. It’s similar to the original (if not overly lengthy) title it had. But it was a bit of a mouthful, so it was altered. But we tricked you, and lured in, buwahahaha! lol. kidding. Thanks again for the read and the feedback.
Flag as inappropriateIt’s my fault if you were mislead Lisa – Sometimes I change titles authors send me to tailor it to our usual crowd :)
I think most people who read Tutorial9 on a regular basis are more concerned about their blog rather than their website. To me, the words are practically one in the same.
Flag as inappropriate8:) No wonder most blogs have things WRITTEN ON THEM only monthly!
Flag as inappropriateThank you article
Flag as inappropriateNice list Rob… very helpful… will use as a checklist on my current project!
Flag as inappropriateGlad that it could be helpful. Thanks, man.
Flag as inappropriateNice article Rob, keep the good work !
Don’t forget also the Ads integration
Flag as inappropriateI really like the subtle gradients. I think that they really make a design pop. I have to be honest and say that the first reason I like Tutorial 9 was because of the design (then I figured out that the contents was pure awesomeness too) Thanks for the great post Rob!
Flag as inappropriateAnd to you, Tim, for the thoughtful comment.
Flag as inappropriateGreat article, but I’m confused by the fact that the title is things to not forget when designing a blog, yet almost all of your “Inspiration” images are of regular websites and not examples of blogs that use the “tips” you mention.
It’s just kind of a weird disconnect and doesn’t seem like a good way to prove your point of not fogetting these things for your blog.
Either way they are good tips and often overlooked.
Flag as inappropriateAdvertising, perhaps?
Flag as inappropriate@ Zebb – Actually, look again. Each inspiration image is a blog that uses that feature. The resources, no, because they are just that. Places that reference that procedure. Thanks for the read.
@ Jack – Nope. Try again. This time, think related content. :p
Flag as inappropriateI’d actually challenge you (a trivial challenge!) to define what a blog is in the first place. It always depends on who you ask, but at least for me a blog is nothing but a trendy new word for a website that gets updated every now and then.
This post could just as easily apply to websites in my opinion, but a large number of “bloggers” will appreciate advice tailored to what they consider to be “Blogs”.
Just my thoughts, take it as you will Zebb :)
Flag as inappropriateThe trackback versus comments bit is too true. It irritates me a tiny bit when trackbacks are included in the comments and just become something you have to weed through to get to the what people actually said.
They shouldn’t be forgotten though.
Flag as inappropriateThanks, Simon. I agree.
Flag as inappropriateAwesome article!
Flag as inappropriateNo.10 : Don’t forget the 9 things above
Flag as inappropriateyup
Flag as inappropriate:D
Flag as inappropriatenice things
Flag as inappropriate