In this post we take a look at four excellent, and popular, designs, from simple to complex, that can help inform your next blog design. The sites we’re going to look at are Lifehacker, PSD Tuts, Smashing Magazine and Canada’s National Post.
We’ll look at the general layout in great detail, via a wireframe of the main sections, and the details generally, with a bit of a writeup, in the form of notes, on what’s going on. Clicking on the wireframe opens up a full-size version. Feel free to use the wireframes in your own projects to help you get a handle on just where your stuff should be in a successful blog design.
Studying the masterworks and previous success is one of the key ways to breed success in your own designs. Let’s study up.
Lifehacker
My favorite thing about the Lifehacker template is the top posts of the day featured for maximum (literal, even) effect at the top of every page. Each featured item gets a thumbnail image, a category, a title and a cool hover effect.
The blog branding is almost a secondary item here but is still highlighted and serves to further highlight the search which is almost exactly in the middle of the above-the-fold screen. And note that the search takes up just as much visual area as the site logo. Can you make search anymore prominent? Anyway, the real Lifehacker brand is the reams and reams of excellent content. A fat logo and pretty header just gets in the way. In fact, all of the sites we’ll look at, mostly eschew cuteness and large headers that only serve to brand their site.
This is the only layout in this little study with a sidebar on the left. But the sidebar on the right is mostly negative space and really helps to focus your eye on what’s happening in the main content area.
Continue reading “Blog Design That Works”
ThemeShaper 