When I refer to blog design on this page, I’m specifically talking about the part of the process that happens in a graphics program like Photoshop or Fireworks. The part that happens after that (where I take the design file and turn it into a working design) is what I refer to as coding—and a lot of designers aren’t interested in that at all (which is fine by me!).

Elements of a blog design

I’m going to start by defining some terms that I use when talking about blog elements.

• The header is the section at the top of the blog that comes before any of the blog’s actual content. It often contains elements like…
  • The blog title usually describes the blog. Sometimes this is also simply the name of the main site if the blog is just part of a bigger site.
  • The tagline clarifies the purpose of the blog (or sometimes just provides a laugh).
  • Many blogs have navigation near the top of the blog to help visitors find their way around.
• The main content in a blog is its posts. Posts usually contain some or most of these items…
  • The post title communicates quickly the point of the post. It’s like an email subject line.
  • The post content is the “article” that gives the post purpose. It’s like the body of an email.
  • Information about the post is called metadata. The following are examples of metadata…
    • Most blogs feature the date and/or time the post was written to help readers gain context.
    • Categories and/or tags help the reader quickly determine the topic and find more posts on the same topic.
    • Blogs that allow comments provide a link to read and write them.
    • The name of the post’s author helps readers associate the post with a specific person. This is essential on blogs with more than one author, and helpful even on single-author blogs.
• Most blogs have one or more sidebar. The sidebar is a place for information and tools that go beyond specific posts. The sidebar is made up of…
  • Widgets are self-contained chunks of information that the blog owner can add and move around.
• The footer contains more “meta” information, typically about the whole blog rather than just a post. It usually has…
  • A copyright notice to protect the content.
  • Credit links to the people or tools who make the blog possible.
  • The footer might also have links to privacy policies, important pages, or contact information.

It is helpful to look at some working blogs to see these elements in action. Click on the images below to see annotated screenshots.

Standard blog layout concepts

When you’re working on a blog design, you’re typically working with “theoretical” content. Because they are dynamic, you never know what the blog owner is going to put in, so you have to design for many possibilities, while also showing enough variations to make it clear to the coder what you intend.

It’s a good idea to show anything and everything that’s different from just plain text. That includes regular links (think color, style, and what it will look like when the mouse moves over it), lists of information (do you want to use a cute little bullet? dotted lines between items?), and images in posts (should it have a border? how much space should be between the image and the text around it?) among others.

Currently most blogs are designed to fit a width of 960 pixels or less. That’s not always true; a particularly tech-savvy audience justifies a wider layout, because most readers will be on new, larger monitors. If you’re not given any guidance as to width, stick with 960px or ask for clarification.

Click the image below to see a basic guide to blog content. Note that this is just to show the main sections of a blog; the layout can be utterly and completely different. There might be more sidebars, or they might be on different sides, or you might choose to put some of the info in the footer. When you look at it, think in terms of “content I need to include,” not “this is a layout to emulate.”

Examples of good blog designs

Here are some blog designs from Alek Lisefski, a designer I work with regularly. In addition to the quality of work he provides, I also like working with Alek because he (visually) gives me all the info I need to code the design.

Notice how every design has a header, multiple sidebar widgets, and mouseover styles for the links? That kind of attention to detail makes it a breeze to get everything right the first time.

Go forth and design

And let me know what questions come up along the way! Leave comments and I’ll do my best to answer them.

My perfectionistic tendencies get the better of me and I resist trying PPC until the site is perfect (copy is polished, design exactly how I want it, oh, and that new feature is added…). Long story short, I’ve only dabbled in PPC a couple of times, even though I know it can bring great traffic. I just worry about spending too much money before everything is how I want it.

Well, one more excuse to scratch off the list: money. Our friends at AdGridwork have published a list of free PPC vouchers that let you try out the various services with minimal upfront investment (notice that the first four on the list require no upfront payment at all!).

I’m going to quit my procrastinating and sign up for at least the first couple and use them to promote my almost-launched new site. What will you promote?

The idea is to walk viewers through the process of essentially recreating our Speedy Start blog package.  Frankly, many people prefer that we take care of it, but if you’re a DIY type, or just want to know how it all works, or have tons of time and no money, the WordPress Quick Start videos videos are just what you need.

Right now there are only a few videos, but enough to help you sign up for hosting, install WordPress, and get started blogging.  Future videos will cover how to install plugins and themes.  I’m also interested in answering your questions, so if there’s something you’d like to see a video discuss, let me know through the comments (here or there).