7 Essential Elements of Blog Design
126The blogosphere continues to expand almost on a daily basis, and as a web designer we often inform clients of the numerous benefits of attaching a blog to their site. It is always a great way to continuously update your readers as to what new developments are being made in your business and what to look for as they stick with you on this journey.
This in turn, keeps your site well trafficked by the online masses as new content is added on a regular basis. And while there are a plethora of points and elements that are vital when designing a blog, some take precedence over the others.
No matter what style you are aiming for as you put the site together, even on the most minimally designed blogs, the elements discussed below are the essential ones to include and give a heavy focus to in your design. Each of these elements can potentially have a large impact on the success and failure of the site, even though the design is not responsible for the content that will eventually fill the blog.
So the next time you are contracted to design a blog, what ever direction you head in, make sure that you take these elements with you.
Header
Naturally this is an important part of any site, because it lets people know just where they are on the web. For example, if your site is called Read Write Web and you want users to know they are not on, say Facebook, then you would want to have a large header that reads Read Write Web plainly so that visitors will know with a glance to the top of the page, where they have cyberly landed. This should help eliminate any confusion among your visitors, though it is not a guarantee.
The header will usually contain a logo, the name of the site or company behind it, and possibly some design flourish to accompany this text.
The header of the blog is one of the two main elements that should always steal the attention and focus of the user immediately. So it needs to stand out boldly, much like on a newspaper or magazine. And because you generally want this to be the first element of the site that the user looks to, most designers will position the blog header in the upper left corner of the site.
This is not always a necessity, but after years of subtle unintended conditioning, the online public has been trained to look there for the site name and logo. Also given that a large portion of written dialects and texts are setup to begin in the upper left hand corner, this is an almost expected flow for information.
More Examples
Post Headlines
If the header is one of the two main elements that should pull the readers attention its way, then the Post Headlines are the other. Once again to look at a print based template, newspapers and the like always take steps to have the headlines separated from the body text that follows it, using larger, bolder font choices.
These highlights grace the page throughout, guiding the readers eyes as they search for relevant or intriguing entries. The same goes for a blog. This visual playground is littered with material for the reader to sift through as they navigate through the blog, so you want to make sure that they have to exert little effort to locate the post headlines.
Headlines can certainly be a tricky element to work out, because you want them to be large and looming, but not so much that they become cluttered and feel like they are squeezed in, as if they were an afterthought.
This can be tricky to do given that once the design is out of your hands the user is plugging in the headlines of unknown character lengths. Definitely something to take into consideration, because though you want it to draw the eye, you want it to do so for positive reasons, not because it breaks the flow of the design.
A good place to start your search is with this list of big, bold headline fonts from DesignM.ag.
For this reason, the font you select may need to have the spacing adjusted to stack well and tighten the appearance.
More Examples
Navigation
Once again, as with any site, intuitive site navigation is an important element for the sake and sanity of the reader. Now as the designer you are not necessarily dictating what other pages will be included with the blog, but you do set how to get to and from them, and this important usability interface can be integral to the blog design.
In fact, what is the point of having other pages, if you are not going to showcase them to your readers in some form or fashion, and the navigation is an important part of that. Just creating the access is a big first step.
Navigation, while an important element that needs to be accessible and clearly marked, does not have a lot of restrictions as to how you can achieve this effectively and creatively.
One tip for over-delivering on this element, and thereby demonstrating its importance, is through a multi-layered approach. Not only having the main site navigation that is styled to match and fit in with the blog design, but you can easily include a simple secondary text-based nav element just below the footer of the blog. This is a quick addition to the site that will aid both your client and their readers.
You can get as complex as you like with your navigation though, as this unusual navigation gallery at Noupe will show you.
More Examples
Archives
For a blog, the content is the driving force behind it, so you want to make sure that for the life of the site the content is easily accessible to the readers especially once it moves from the first page or two of current posts.
Remember that one of the main purposes of a blog is to engage the readers, and you cannot do that if once the material leaves the front page it becomes lost in the proverbial internet aether. Not everything that is published on a blog will have the timeless appeal and stability to withstand the test of time, but you could at least give the content some assistance through attention to the archives.
I have written here before about how to create an in-depth and comprehensive archive section for your blog.
Making sure that the archives have the scope necessary to encompass a fairly sizable contribution from the content provider beautifully handles the situation from your end, and actually sets the bar a bit for the blog user to make worthy use of this section once you have designed the area for the potential to be well used.
More Examples
Site Search
Archives are not the only way to work a focus on the content into your design, and given that blogging seeks to be engaging and does so through its content, let your design highlight this through the inclusion of a site search element as well.
Site searches give some users more comfort and familiarity than trying to use the navigation or archives to find what it is they are looking for on your site. They may also have come to your site via another and may want to just browse for a particular keyword that is not apparent on whatever page of the blog they have landed. A site search can address easily these concerns.
This can be done as subtly and unobtrusively as you wish, or you can go to more garish and bold places with it, but however you do it, just do it. Both the client and the readers will be appreciative of this thoughtful inclusion.
And as said, if you are into a much more minimal approach and the thought of yet another element to add makes you cringe, this is certainly not a cringe-worthy addition as much as it is a necessary one.
Besides the site search is easily worked into a minimal style as it can be tucked away nearly anywhere given that you determine its dimensions and the way it blends into the background. And as long as it does not detract from the blog design, why not make it that much easier for readers to surf the site?
More Examples
RSS Subscribe
Speaking of the content that pushes the blog forward, as the designer you want to be sure that you give the readers a way to subscribe to the sites RSS feed, even though it means that they may not be exposed to your brilliantly crafted design.
Honor your design by helping to ensure it sticks around, and allowing readers to receive the content how they want it. As the designer, you will not be in charge of the content, but its delivery and presentation does fall to you. Cover the basic bases that readers have come to expect so as to not hurt the blog you are designing for.
Even though, design wise, this tends to be a rather small element, it still deserves your attention. After all, size doesnt matter in design. It still needs to match the rest of the design so as to not detract from the flow and feel of the design.
With so many amazing RSS icons available from the design community, not to mention your own design skills to draw from, adding this ever important blog element should be an item to tick off your checklist.
More Examples
Post & Comment Styling
Blogs, by nature, are both engaging and interactive, and your design should highlight both of those aspects through one very important element; style.
In particular, the style of the posts and of the comments (when applicable of course. Find out from your client if they intend to allow comments before you dedicate any time to it, naturally). The posts are the lifeblood that flows through the blog and keeps it alive, just as the comments are an area of the heart that helps pump the blood.
So make sure that the design showcases the posts with substantial focus on the style. These areas are key, so be sure that their importance is reflected in the design with the grace and power that is owed to an element that carries this much weight for the overall site.
If comments are included, then you want them to stand out in the design to not only highlight this interactive element of the blog, but to also shine a light on the members of the community who are taking the time to share their thoughts. And you can do this through the design.
And by now everyone has heard of styling author comments different, but it’s possible to give every role in WordPress a unique comment style.
More Examples
That is a wrap
Those are the must-have design elements to focus on when you are designing a blog. What areas would you think need major focus? Just leave a comment below to keep the discussion going.
Enjoy this post? You should follow me on Twitter!
Hi Angie
As you say, comments are what it’s all about.
And not easy to get for most of us.
The “subscribe to comments” is a great plugin for keeping people coming back and adding more comments.
Also think that the CommentLuv plugin is pretty good… it looks great and rewards commenters. There appears to be a growing C Luv community out there.
CommentLuv is definitely a very cool idea. I wrote a post about it here a while ago: http://www.problogdesign.com/wordpress/dont-dofollow-get-more-comments-with-commentluv/
I’ve since swapped back to DoFollow though, more because I was getting tired of all the branding and logos that CommentLuv threw onto the page at the time than anything else though.
Yes I read that post Michael. You appeared to have abandoned C Luv half way down the comments, so I missed out. LOL
After reading your article, I decided not to install it on my blog but then realised that I was commenting on lots pf C Luv enabled sites… so I decided to return the courtesy and installed it.
No problems so far.
I used to be a huge fan of comment luv but it’s gotten so bulky and is updated so often now that I’m staring to lose interest. Some kind of subscribe to comments options is pretty much a necessity though.
sounds great.good news.
this is a good way to design a beautiful blog for flashman..i like it ..i also use DIV+css design website and blog.
http://www.plasticcardonline.com/design/design.html
looking for my plastic card website?just visit.
I’d be amazed if there are many blogs out there that don’t use all of these elements these days!
lol – Yep, that’s why we called them the essentials! The idea was to explore each of them further and think a little bit about what’s behind them and why they are essential (Instead of it just being a status-quo that people do without knowing why)
Good post. One obvious omission however is a discussion on the sharing/social media elements of blog design. As this is an ever increasingly important element of blog design I think it should have got a mention.
Thanks for the good read. Keep it up!
I actually went back and forth on including social media elements and finally decided to leave them out since they aren’t absolutely necessary for a blog to succeed. I’ll admit that I may have been wrong on that one though :), thanks for the suggestion!
hi Angie,
I would move navigation to the top of your list, but that’s just a pet peeve of mine. :) I still come across blogs where I have to try to find the “recent posts”, if they even have it.
And the other day I came across a very nice looking blog, but when I clicked on the “about” page, it was the default wordpress message of “this is where you add your about info” or something like that.
Anyway, I think your list is spot on, though the commenter above about incorporating social media sharing has a point.
Steve
I didn’t intend to have them in order of importance but I agree that navigation is at least as important as the header if not more so.
I’ve come across quite a few blogs recently with the default about page too. Those same sites tend to still have the Hello World post visible. I can only hope that these are individuals setting up their own blogs and not someone who was hired and paid to do it.
This is for my KM session :)
Text 2 for session
Nicely Explained
Thanks for this wonderful post, I would like to make changes to the blog site I’m currently building based on this inputs…
Thanks for sharing.
Xcellence IT
Angie,
Good list of basic and essential blog elements, which I include as well.
One thing I’d mention is to include a very simple form allowing users to subscribe and receive updates via email because many users have not subscribed to a RSS feed.
Additionally, I’ve begun including a list of blogs I’ve commented on in an effort to share with my readers other topics/posts worth reading. It also provides my fellow designers/bloggers additional readership for a well written post.
-Mario
Thanks.
Great list for making some professional and neat web design. I love WordPress as a framework but not only for blogs. These essentials can be applied at most site’s designs i believe. Anyways great inspiration for making great web sites.
Aliz
Hi Angie,
I’m just new in blogging and this post is very helpful to me. As a new in this field I read lot of blogs out there and I noticed that not much of the blogs I have read don’t take much time in design some parts of their blog especially in the comment part, because of this post I know now that comments are also important in a blog. Thanks for this post.
Awesome post on blog usability and design. The points that you made are like you said in the post title essential. Without these elements in any blog you find yourself at a loss and end up confusing your users. Also I would like to comment on the excellent examples that were used.
Thanks for a this helpful post with such great examples. I hope my site is usable and attractive. It’s hard to be critical of “your own baby.” :-) I’ve tried to do many of the things you’ve mentioned, though.
Nice job Angie. It seems like the hardest part is getting the most from a unique design while still being small enough to load fast enough. I ended up going ‘plain Jane’ in the name of speed and efficiency and it turned out a little appealing to me. I would like to add more features though.
It is a bit of an equation isn’t it? It’s not easy trying to balance features with load times and clutter. But I think you’re right, often times the more minimal approach lets your content shine brighter.
Thanks for all of the wonderful comments everyone, I appreciate all of the feedback.
nice information ..thank you
All the above is exactly what people should be doing with their blogs, if their not, they will probably struggle.
Good article and well written.
Nice examples. I’m familiar with a lot of these blogs, but you mentioned a few new ones.
I would say that although design is important, content is king when it comes to blogs. A nicely designed blog that gets updated once a month is not going to get many visitors…
Great article. Thanks for sharing.
Very interested..
very good elements these are thanks
thats are cool things thank you
really amazing things.. thank you problogdesing.com
Nice Collection but what’s up with the “footer-section”. Especially at blog-design, footers are an important element.
These are really essential elements. Thankx.
Thanks for sharing, Learnt a lot!
The things that you have stated in your post are really the crucial part in a web deign without these have done well the design will not be effective.
For me archives can help in the navigation of a website. When people want to to your previous posts. They use your archives to simply find your previous posts.
Great article, definitely learned a good amount from this, oh and by the way navigation is crucial.
good tips… in my web page is a big mess.
I will try to follow your advices, maybe it will look better.
These are some really good tips and will be very useful for me and other new bloggers. A blog should look appealing, be user friendly and load fairly quickly so you don’t lose visitors because they can’t navigate the site or it takes too long to load.
good article! we could do this before Promotion.
This is a very good and very informative post and anyone can get a very good and very effective idea about the design of the blog so that the blog can best explain your business and it’s also very important that the design of the blog should be relevant to the niche of your business so that this blog can easily present you and your business in a more proper and effective manner…
I felt obliged to write a coment about your blog. It is the first time that I have come across it and I must say that I am vry impressed indeed! I have subscribed and look forward to reading some more posts in further detail. It is pleasing to see a site that offers unique and interesting content.
Thank you once again!
Yeh my blog needs A LOT! of work (just started blogging)…but your blog brought a lot to my attention….great job
great article thanks for covering everything in such detail
very good examples, thanks
Good post. One obvious omission however is a discussion on the sharing/social media elements of blog design
Awesome post, all of these are really important to achieve a great looking and functioning blog!!
Thanks for going through these in so much detail, very useful!!
great article thanks for covering everything in such detail
I usually do go through the spam filter, so even the simple fact you have a Gravatar
I agree that you have said that it have a good comment form because I like its comment form like how
Great article. Using social media (rss,twitter etc.) very important. Thanks a lot.. :)
Thanks for going through these in so much detail!!!!
I think ‘HEADER’ is the most important in all of them…
Designing is not about the rules, but knowing the essentials Blogs can help you come up with an aesthetically and effective design.
I’m for certian felicitous that I found your internet page, I found what I searching: information I have been looking for. I’m going to retain on seeing this internet page more often.
Nice pieces of information for graphic design. I want to recommend it to all of my friends. This is a good way of example and lesson to help the people who are interested in graphic design. Thanks a lot. And if you want then take a look at GFXBD , there are many more multimedia video tutorial and articles related to graphic design.
no text
I’ve been wanting to try out uprinting’s services, the last time I ordered cards I used vistaprint and the cards were cut incorrectly
good tips… in my web page is a big mess.
I will try to follow your advices, maybe it will look better.
It is a different type of web design showcase focusing on specific aspects of web design.
very usefull information fo designing any blog
Angie, I like this tips. I am waiting your next article.
Thanks for going through these in so much detail!!!!
Have you check this site called trendland? I like it a lot, its grid style, visual and they’ve been having it like for 2yrs already. what you think of it? http://trendland.net
test
great modif themes, they are so inspire
Almost all the elements that were shared are nice and attractive. Many people will be able to get some good ideas because of this.
All the elements are really important and these are the main elements that are always highlighted and emphasized.
I’m happy that not everyone uses “bare HTML” sites, still, need to keep an eye on bandwidth, not to be too “pixelhappy” with large images. I hear that google is(did?) including the page loading time in the ranking algorithm – which is quite unfair – what will happen with the photo or design related sites? Those sites would obviously load slower.
On the other hand, I just can’t help myself not to create some nice graphics for headers, menus and background in my projects.
Thanks for the article, enjoyed reading it!
When people hear the word design, they sometimes think only of making something look good, using colors and graphics to add interest. But on the web, and especially on a blog, design has a purpose: to grab readers when they arrive, make it easy for them to get what they want.
Best you should change the blog subject 7 Essential Elements of Blog Design | Pro Blog Design to something more suited for your content you make. I enjoyed the post still.
i forgot ask the download link…who knows?
till now I had never thought so much about distinguishing the designing part into these elements in such detail as you have provided…for me, start from the top and then keep on assembling these elements to provide a better look to the website…also, many a times I’ve seen that business websites lack designs due to too many changes by the clients…next time someone asks for any change, I’ll redirect her to your article…:)
Whoa! Image looking google all night in this and that i eventually thought it was right here!
make it 41 and put problogdesign somewhere in top 10 i think. Don’t you like the right menu on this blog?
while creating a blog we must take care of some essential elements about the blog. Some steps which are mentioned above in the article are very important.
Whoa! Image looking google all night in this and that i eventually thought it was right here!Best you should change the blog subject 7 Essential Elements of Blog Design | Pro Blog Design to something more suited for your content you make. I enjoyed the post still.
Custom blogs are always good. It gets kind of bland always seeing the same standard WordPress and Blogger themes on different blogs.
For Blog templates Drupal is fairly good in that it’s easy to customise.
Some great examples of blog design included here. Its always nice to see blogs that are custom built and don’t follow or use the various templates freely available throughout the web.
An amazing article. It’s nice to read a quality blog post. I think you made some good points in this post.
and now, when I`ve seen those examples I`m embarassed about my blogs :D
I’m using on my site too. Its fits in with my work!!!
It’s really very nice, but you forget about Side-bar and Footer
Hello Friend, already they gave one tutorial for footer, check that.
Cool blog design, its helpful
One thing that i notice, and dont know why this happens yet, is that blogs with 3 column layout tend to have lower bounce rate than the ones with 2 column. Something around 55% from the former and 70% for the last.
So, it kinda makes the sidebar the most important element of the layout didnt it?
Very nice design and instruction. Thank you!
driven by externally on the skin is also used as an antiseptic. rheumatism, cellulite, and muscle relaxant lethal germs
One thing that i notice, and dont know why this happens yet, is that blogs with 3 column layout tend to have lower bounce rate than the ones with 2 column.
All very nice. Thank you!!!
used to be a huge fan of comment luv but it’s gotten so bulky and is updated so often now that I’m staring to lose interest. Some kind of subscribe to comments options is pretty much a necessity though.
Although I have been designing websites for sometime, with a number of them incorporating wordpress and blog functionality I have never designed a website for a dedicated blog. This makes this post really useful to me and something that I have taken a lot from. Thank you for the blog post. Looking at some of the examples in this post, designs that stood out for me are; Missy, Tutorial 9 and Creative Dot.
I think that this will not only bring up the overall speed of the web, but the quality as well. Thanks Google.
If one of the above elements is missing in a blog, then that blog is a mess. Thanks for the post!
I’m using on my site too. Its fits in with my work!!!
ı am mucahit i like thread because great.
Some great examples of blog design included here. Its always nice to see blogs that are custom built and don’t follow or use the various templates freely available throughout the web.
Absolutely agree with everyone here. Great blog examples. I am looking to put one together, so will follow these and use them as inspiration. Thanks
Huge fan of comment luv but it’s gotten so bulky and is updated so often now that I’m staring to lose interest. Some kind of subscribe to comments options is pretty much a necessity though.
I’m using on my site too. Its fits in with my work!!!
If one of the above elements is missing in a blog, then that blog is a mess. Thanks for the post.
Some great tips in blog design thanks.
From me to You is one of my favorite blogs. Their design is exquisite!
I really like that. You touched my heart!
bearing this identify “Prada” throughout modest lettering Discount Louis Vuitton Handbags and also an insides zip wallet
Impressive design, ultimately discovered a place for spectacular wallpapers
Between me and my husband we’ve owned more MP3 players over the years than I can count, including Sansas, iRivers, iPods (classic & touch), the Ibiza Rhapsody, etc. But, the last few years I’ve settled down to one line of players. Why? Because I was happy to discover how well-designed and fun to use the underappreciated (and widely mocked) Zunes are.
Thanks for publishing this post. This was of great help to me for introducing blog designing to my student-teachers.
this post help to know more about blog.
its too helpful .
Thanks for publishing this post. Its Really amazing and also a great Article. once again thank you for sharing.
used to be a huge fan of comment luv but it’s gotten so bulky and is updated so often now that I’m staring to lose interest. Some kind of subscribe to comments options is pretty much a necessity though.
thanks for your publishing post, this post is very helpful to know more details based on blogs.
its really great . its helpful for me. thanks a lot
This post is very help to us. Thanks for a this helpful post. It is very interested.
thank you for publishing this post.this post will help to know more about the elements of blogs.
thanks to publishing this post.impressive design.this is great help for me
Hi…… It is such a nice blog.. I like this very much..
thank you for publishing this post . some great tips in blog design is very interesting and attractive.
This is very helpful blog.. I get lot of information from this..
this blog is very interesting and it help me to know how can i create a blog. so thank you
Thanks for your post . it is very nice post i can get more knowledge about blog in this post
sir,
Thank you for your post.we get many information for
it.we understand 7 elements of blog and its examples.
I am new in blogging and this post will help me to make beautiful blogs……. THANK YOU for giving this post…………….
thanks for publishing the post. it is very helpful to me and all.
thanks for publishing the post , through this blog we could understand elements of blog
Useful article.
Thanks for sharing.