Many of the designers I work with are bloggers themselves, but some are not, so this is intended to be an introduction to what goes into a blog design.
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.
Great post and good tips!
Man, sometimes I look at other people’s design work and it makes me depressed because I know I’ll never be that good. Those are some beautiful designs.