While each blog design will vary from project to project, below are the basic areas and elements to consider when designing a custom WordPress blog, along with images of my client’s new blog.

The header

While a header seems like a pretty typical area to always include in a blog design, a few things to include in the header area include:

• Logo/name of the blog
• Tagline
• Navigation
• Subscription and social networking buttons
• Search box

Also when designing elements such as the navigation, consider things such as rollovers and image sprites and how they will look and interact.

Main content area

This area typically requires the most attention, as there are various areas and elements to be considered. To keep things a clearer I broke down the main content area:

Text/copy styles:

• Titles of each post (H1)
• H2, H3, H4, H5, and H6 subtitle styling
• Paragraph text, address and preformatted text
• Quoted text
• Ordered lists
• Unordered lists
• Bold, italic, underline and strike-through text
• Hyperlink color/rollover
• Image styling (ie: border color/thickness)

Post meta data:

• Comments
• ‘Published on’ and/or ‘publish by’
• Excerpt text (ie: Continue reading »)
• Tags
• Categories

Page/article navigation:

» Excerpt text (ie: Read more »)
» Page navigation links

Page and individual article appearance:

• How many posts will appear per page
• How each post will be divided from the previous and next post

Sidebar(s)

This area will most likely be the most unique from blog to blog. From single sidebars to double sidebars to sidebars with sidebars this is where you can get creative and also add great functionality to a blog. Here are things to consider when designing or choosing sidebar items:

• Social media links
• Subscription links (RSS/Email)
• Info about the blog
• Search functionality
• Categories
• Popular articles
• Most commented articles
• Flickr photo stream
• Recent news
• Twitter update(s)
• Advertisements
• Recent posts
• Blogroll (other blogs you like)
• Links
• Email forms
• Contact information
• Archives

Comments

Intrigue visitors to comment by having a well designed comment area. When designing the comments section consider the design and layout for:

• The number of comments on the post
• Gravatars
• Anonymous reader icons
• Data and time of comment
• Hyperlinks within comments
• Persons name/handle
• The authors reply in the comments (make it stand out from the readers)
• How the comments will be separated from the previous and next comments
• What number comment they are reading (ie: 2 of 15)
• Text styling

‘Leave a comment’ form

• Fields you would like the commentor to fill out (ie: name, website, twitter, message)
• Submit button
• Subscribe to comments by RSS
• Notification of comments by email
• Mandatory field indicators (ie: *)
• ‘Remember me’ check boxes
• Comment ‘preview’ button/option
• Bot prevention question field
• Text styling/formatting for user

Footer

The footer is another area that you can get creative with if you like or just leave room for copyright information. Here are some things to consider:

• Copyright info
• Navigation
• Contact info
• Social media links
• Resources
• ‘Back to top’ scrolls
• RSS and email subscribe options
• About info
• Hosting info

Other information to consider

If I’m handing off the PSD file to be coded I also like to include an instructions file that includes information such as:

• Background repeats (ie: repeat-x, repeat-y)
• Posts shown per page
• Line height of text (ie: 1.5em)
• Line height of lists (ie: 1.75em)
• Rollover information for buttons, images and text
• Visited, inactive and active link color
• Lettering spacing (where/when needed)
• Image border thickness (ie: 3px)
• URLs to all links (if your developers are setting that up)
• Any jQuery plugins
• How many posts show show in the sidebars “Top Posts”
• How the ‘Read more’ should be stated (ie: Continue reading this article »)

While the blog is still being developed by WPCoder, you can view the entire image source file until then. Will update with link once theme is up and live.