Its time to have another Design Breakdown. Now for those of you new to the site, a Design Breakdown is where I take a random site that I like for one reason or another and take it apart to get a feel for the flow, tone, etc. Basically, I detail why I think the site is great, and what things could make it even better.

So, for this breakdown, I chose a new, but very popular site freelanceswitch.com. For those of you who don’t know, freelanceswitch is a blog that releases articles on…wait for it…freelancing. If you are a freelancer of any type, it is really worth a look.

Why I chose it
This site just screams. “Hi, I’m friendly” which is what I like about it. It is a great example of how to build a blog that immediately encourages people to read it. How do they do that? That’s what we’re here to figure out.

Here is a glimpse of what the front page looks like:

Color Scheme
As usual, I will start with the colors. Like the last site I brokedown, this site uses greens as its primary colors.

As is common nowadays, there are a lot of subtle gradients that give a little depth and richness. The mood set by the colors is “soothing”…most of these are something you would see in a spa of some sort. Nothing is overly bright, but altogether it just makes you feel comfortable.

Adding to that is the font color (#9D9797). It isn’t the standard black which gives a bit of a passive feel. In some sites this approach will not work. For instance, a portfolio site typically should be built to grab someone’s attention quickly. Brighter, bolder colors do that well. However, for a blog or any site with a lot of content, a subtle color scheme is good on the eyes which makes for easy reading.

Logo

Logos are how you brand your company and state who you are. Freelance Switch used a text only approach with some gradients in a style that is a one-off from a lot of the web 2.0 logos. The second word is a different color. Freelance is the primary concept to it gets the brighter font color. Switch sort of fades into the background.

This leads me to why I am not all that fond of the logo as a brand builder. Overall it is very forgettable. Now I am not saying logos have to be fancy or anything of the sort, but this one just kinda blends in and doesn’t grab you enough…Perhaps if switch was in the primary dark green used in the header (#6E6335)? Something to make it pop just a bit.

Header
The header is what I really love about the site…more specifically the graphics. Their primary audience (I would guess) are freelancing web developers, so the hand drawn computer is a great choice. Also the big “Hello.” adds a lot to the friendly factor. Its a little thing, but it shows that their priorities are to welcome and be helpful to their readers.

The only nitpicky issue I have with the header is the menu…the font color is very dark and is almost unnoticeable on my LCD screen. The hover color is nice…perhaps that should have been the main link color?

One of the major points of this breakdown is to understand how the site exudes friendliness, and while not really a part of the header, I would be remiss if I didn’t mention the characters you see all over the site.

These little guys give the site personality, and that is what, I think, sets it apart from most blogs and is one of the major reasons the site has been so successful so quickly. If your site has some sort of personality, it really adds that little extra something and will make visitors want to come back.

Flow
This site is a blog. The flow is a great example of “how to design a blog”. If you are thinking of starting your own little online soapbox, then I would behoove you to take the flow of this site seriously.

You can tell right off the bat that these guys are pros and have been doing the whole “blogging” thing for a while. How can you tell? Well, lets break it down.

1. Easy to subscribe.
The bread and butter of any blog are its RSS subscriptions. In the “web 2.0″ world where feed readers are literally everywhere, you need to make it quick and easy for any and all visitors to sign up for the feed. A lot of blog sites hide their feed links, and it really does them a disservice because if you have a blog, then you want people to read it. If you want people to read it, then they need to know something has changed…how do you let them know? Your RSS feed. Simple as that.

2. Pictures
This is one of the first blogs I have seen that have pictures throughout their articles. It is amazing how much professionalism that adds to the site. Note to self…

Blogs are simple in their flow (or at least they should be)…content, ads (if any), links…that’s it. Content is king on any blog, so a major part of the flow is how much space you give the actual content. Some sites have too many ads, too many links, or simply not enough content to get users to focus on what is important. FreelanceSwitch is built for 1024×768 and over half of that space is reserved for the content. If you are designing a blog and your content takes up less than half the screen, you may need to rethink it. After all, no one is going to subscribe to see your ads.

Conclusion
The Freelance team doesn’t need me to tell them that they have a great site. Heck, their subscription numbers tell them that. But I will anyway…nice site! The site has a great personality and really draws in the readers…all 5500 of them (I admit I am a bit jealous :P).

For those looking for something to take away from this breakdown, keep in mind that simple is better on a blog. The design merely needs to show the visitors where the content is and get out of the way.

That is exactly what this design does.