7 Essential Elements of Blog Design127
The 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.
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.
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.
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.
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.
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?
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 site’s 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 doesn’t 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.
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.
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!