Blog Design That Works

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

WordPress as a CMS: How To Think About Building a Website With WordPress

Plan your WordPress site design

Figure out what sort of pages we’ll need

Before a visual design can begin, you need to do content design. Determine what exactly you’re going to say. Words, sentences and paragraphs are the building blocks of your site’s foundation. Make sure you’ve put them together correctly. And make sure you know what you need that foundation to do. I mean, think about how those words, sentences and paragraphs are going to effect your bottom line. Remember, we’re making this site for a reason. Whether it’s to get a laugh or make a buck, all those words, sentences and paragraphs need a reason for being there. They mean something.

Anyway, you’ve done all that right? We need to think about how we’re going to present that content. To put things really simply, once you know what you’re going to say with your content and what you want it to do site design comes down to designing series of page templates. That’s it really. As a practical matter, site design becomes a series of templates. Continue reading

What’s new in Thematic 0.7

Thematic 0.7 has been officially released with two major upgrades that’ll help you get what you need done with your WordPress blog or site faster and easier.

Rapid Site Development With Modular CSS

I’m doing my best to make Thematic a tool for rapid site development whether you’re digging into it and using it as the basis for a custom site design or using it as a theme framework with a WordPress Child Theme. How? By making the CSS completely modular. Let’s take a look at two of the folders in the library directory of Thematic; layouts and styles.

/layouts
  2c-l-fixed.css
  3c-r-fixed.css
  2c-r-fixed.css
  3c-fixed.css

/styles
  18px.css
  typography.css
  21px.css
  default.css
  images.css
  plugins.css
  reset.css

Each of these files can be imported into the stylesheet of either your Thematic-based theme or Child Theme with the @import rule—or copy-pasted if you want to make changes without having to override the CSS to make structural changes. Simply put, what that means is that you can bring each of these files into play in your stylesheet and rapidly build a WordPress theme by mixing and matching them. And I mean really rapidly. For example, here’s an example of a fully finished 3 column Thematic Child Theme, with a sidebar on either side of the content, that follows the default Thematic color styles—built by you, out of only a few lines of CSS. Continue reading

An Interview with Ian Stewart on WordPress Child Themes

If you want more of an introduction to theming your blog or website with WordPress Child Themes you can read my two-part interview with Weblog Tool Collections’ Jeff Chandler on the subject. Part One gives an introduction to the concept with a ridiculously easy tutorial that guides you through making your own Child Theme. Part Two goes through some of the business implications of using them with a WordPress Theme Framework.