-
Blog Design 25.07.08
In the past year I’ve noticed a significant increase in clients wanting blogs – and it’s not hard to see why. Blogs are now such an integral part of our net experience, any company/individual with a story to tell has got one.
I’ve recently finished designing blogs for the likes of Duchy Originals, Silver Cross (left), myself and a host of other freelance clients. I’ll admit that some blogs have gone better than others* – but there is one thing I’ve learned… and it’s that a blog is bigger than you think!What I mean is that there’s more to think about than just how the homepage looks and works – there are a whole host of other things you have to consider. So I’ve written a definitive guide to the elements you’ll need when launching into the design of a truly successful blog.
The Homepage*
Obviously, there’s the home screen – which will be your introduction to the blog. This can contain all this months posts, the 10 most recent, or the single most recent. Furthermore, you can show a ’snippet’ (an image-free condensed version of the post), the first paragraph or so (requires client knowledge), or just the title. There really is no limit to the way you present your posts – so there’s no need to be constrained by what you see on other blogs.
It’s obviously best practice to have the same navigation (header, footer, sidebar, search etc) carried throughout the site – so you’ll need to address that on the homepage too.
By default, you should show the following somewhere within the navigation of your blog…
- Archives (by month, year, whatever)
- Categories
- Search (optional)
Have a little look around at what other blogs have too – things like a Flickr stream, recent comments, or a tag cloud can be a nice touch!
The Post*
You will always need a post page, even if you’re displaying the whole article directly on the homepage. This is typically a simplified version of the homepage, but typically includes information like…
- Comments (will require thought!)
- Tags
- Author
- Post date
- Ways to go back and forth between posts
Comments is quite a hard thing to tackle, as there are a million and one ways to do it. But unless you’ve got a specific reason for doing so, there’s usually no reason to stray too far from expectation. You want to make the comments process simple for your users. You’ll find great examples of comment design here – and additions like Gravatars can really enhance the experience!
Category Template*
This, and the archives are two things I continue to overlook when costing for blog work. This is the page that users see when they select a category from your navigation. A lot of users navigate this way, so it’s important to consider how this works on your site. Typically, this is a replication of your homepage, but usually only shows a snippet of the article for ease of navigation (as this page could typically be quite long).
Articles*
This is essentially the same principle as the category template (above) in that it shows the user a list of articles within a given time period – usually per month. Again, this page has potential to be quite large, so you may want to consider just using the title, or a snippet of the article.
Others
Most good blog management tools (Wordpress, Blogger, Typepad etc) have search capability, so if you’ve included a search bar in your designs – you’ll have to consider a results page too. Again, the Categories, Articles and Search Results templates usually follow a similar style – but that’s not to say you can’t go for something completely different!
There are even page and link templates to consider if you want to go the whole hog…. oh, and not forgetting 404 error pages (if you don’t already have them)!
So all in all, there’s a vast amount to consider – dispelling the myth that designing a blog is simply about making a nice looking, dynamic homepage! Then, of course, once you’ve got the above sorted – you’ll want to think about the actual design itself… so this Smashing Magazine article might help.
Good luck!
* One of fundamental things you have to remember is that by giving a client access to a blog, you’re giving them the tools to wreak havoc! For example, a client recently embedded a 5000px wide image into their post, causing the whole site to break out of all proportion! So remember to make your design as fluid (or constrained) as you feel fit (overflow:hidden; is usually a good start!!)
Hey!
HeyBuzz is a collection of musings, learning's, tips and inspiration... mostly about digital stuff, as observed by Buzz.
Buzz is a freelance digital designer working in and around London (studio). See more of his design work on his portfolio
Buzz is also a skiier, sailor and surfer who enjoys referring to himself in the 3rd person.
wanna say something?
If you've got an opinion about Blog Design - then why not say something? You can even subscribe to these comments via RSS!