With this article, I want to share with you the resources I discovered and hopefully provide a better understanding of the blog design principles. As a note for readers, this article is about blogs that use WordPress. In this article we’ll be covering Design Standards and Validation, the Header and the Navigation. The following article(s) will cover the Content area (including the Header, Post, Post Footer, Comments and Trackbacks), the Sidebar and the Footer. Eventually forming a complete and solid guide.

Design Standards and Validation

When I started out using WordPress, I taught myself how to use the CMS by downloading pre-made themes and reading the code. Some would say that the way I learned how to design and developr is wrong and some would say it’s right. There are pros and cons to this method.

The pros are that you’re seeing the language directly, and hopefully understanding how it works. You also can see how certain PHP / HTML / CSS tricks are executed. The cons are that if you’re not also reading the “codex” provided on the WordPress site, you’re not getting a full understanding of the WordPress language. This method also encourages you to simply take the code and alter the format or css of the theme. This often leads to work that isn’t truly yours, it’s merely just a slightly altered copy of someone else’s theme. I don’t know about you, but that fact would irk the hell out of me as a designer.

Before we begin designing the blog, you should have a grasp of the current web standards. Although there are a lot of blogs that aren’t completely up to date with these standards, and a lot of bloggers would say it’s something very minor, following web standards will help you learn the proper way of coding, leading to a validated blog.

Here is a list of websites and articles discussing web standards and validation:

• Why Web Standards Are Important In Web Design
• Web Standards Group
• The Web Standards Project
• W3Schools
  
• Validating a Website

01 — The Header

The first layout element that I suggest designing is the header. As one of the most important parts of your blog, other than the content itself, this is the area of your blog is what readers see first. So you will want to make it stand out from all the other blogs. As with all designs, the key to making your header, let alone anything, memorable relies on several basics: Color, Contrast, Shape, Size and Texture. By utilizing these five elements of design, you can achieve phenomenal results.

Wondering what a good header looks like? Take a look!

Viget Inspire

Viget Inspire has a beautifully edited photograph with very subtle shades of color which gives a very nice aesthetic. The logo is large and at the top, receiving the most focus in the header.

BCandullo.com

I laughed at Brad Candullo’s header, which isn’t a bad thing. The color scheme of the website is exciting, there’s great texture and the spacing between the three elements is excellent. Not to mention he has a cute and funny description of himself.

WeArenotFreelancers

WeArenotFreelancers’ header draws attention for the simple fact that the majority of it is hand-drawn. The style of the cartoons brings life and humor to the site. Not to mention there are quick bursts of bright colors to lead the eye.

WebDesignerWall

One of the most memorable headers I’ve seen is WebDesignerWall’s. There are so many hand-drawn elements with a lot of vibrant colors that make certain elements pop out. Also the flow of the shapes move the eye from left to right and back again. It’s definitely one of few headers that stick out in my mind.

thethingswemake

As a very simple looking header, it’s the use of color that makes this header great. It’s one of many sites that prove the fact that you don’t need a hyperactive design to be effective and memorable.

02 — Primary Navigation

One of the most frustrating parts of any site to a visitor is its navigation. Most people tend to forget that the navigation is to help the viewer get to what they want quick and painless. But what makes an effective navigation?

Visibility. What’s the point in having a navigation if it’s not easily visible to your readers? As you’ve seen in the header examples, most users are used to having the primary navigation near the header. That doesn’t mean it has to be at the top, but it’s a habit to get into. Next, keep distractions such as advertisements away from the navigation. Web users hate advertisements, and if there’s an advertisement near the primary navigation there’s a chance the people will avoid that area. And the lastly, give it space and color. Nothing draws attention than an area that has been given proper padding (space) and accents (color).

Prioritize. An effective navigation means that the owner has had a good idea of the direction he wants his visitors to go. You’ll have to determine the purpose of your blog and what pages you want your visitors to go to.

Here are some examples of simple, clean and most of all, effective navigations.

SimpleBits

SimpleBits’ navigation is simple, clean and spaced properly. It’s right below the logo, and is in the header of the site. Also note that right below each link is a small description of what each page is. When you rollover the links, a slight gradient illuminates the link. As a primary navigation, it is one of the most effective examples out there.

Matt Brett

What I like about Matt Brett’s navigation is the super clean text against the highly textured background. The font size is also large and all caps which draws attention to the area. Also, he divides the links into two categories: blog and design. When you hover over the links, blog links are given pink and design links are given yellow.

Ma.tt

Another wonderful use of texture to make the navigation stand out. Against the heavily decorative and colorful background of the header, Matt Mullenweg places his navigation against torn paper / fabric, letting users separate the navigation from the chaos in the background but also makes the navigation more legible. To allow people to make sure the links are working, there is a hover effect.

Larissa Meek

Larissa created buttons for each navigation link, giving each one their own shape along the top of the header image. With a crisp and clean font choice, she adds a little jazz with a hover rollover effect.

Freelance Switch

Similar to how SimpleBits’ navigation is, FSW takes it in a slightly different direction. Adding a vibrant color behind the navigation, large fonts for the links and a small font for the description. Also the selected page is at full opacity, while the rest aren’t and when hovered, the links illuminate. Another prime example of a simple but sweet navigation.

So what are some trends that we saw in these navigations?

1. Most navigations were horizontal, and at the top, either in or near the header.
2. Color and texture can play a big role in drawing attention.
3. Hover / rollover effects. I’d like to note that you shouldn’t go over the extreme with these effects, just something that lets your readers know that the links are working / functional.