So today I am starting a new section of the site. Its called simply “Design Breakdown”. As the name implies, I will be taking a site and breaking it down and critiquing it. For the most part I will be breaking down sites that I have found trolling the web and like for one reason or another. The goal of this is not to bash a site, but rather see what works about it and what could be made better.

It is important to note that, unless specifically noted, I am not affiliated with any of these sites in any way, shape, or form. In other words, these aren’t sites that I designed and wanted to pimp them out.

On a related note, if you have a site that you own and would like it to go through the breakdown, email me and tell me about the site, what its purpose is, and why you would like the community to review it.

So with that…lets begin!

The first site I will take apart is www.opendesigns.org. I found this guy a little while ago while rummaging around for ideas. The site is a community for open source, CSS based designs. Overall it is a great place to see some really nice templates that you can be inspired from.

Here you can see the front page.

Color Scheme
Immediately the bright colors of the header grab you and, for me at least, kinda put you at ease.

The color scheme is what makes this site really great in my opinion. As I mentioned before, a site’s color scheme sets the mood of the entire site. This site is a perfect example of this.

The bright green and the dark brown prove to be a really nice contrast. The green is what draws your eye immediately, and then the brown jumps out on top of that because it is so much darker. This of course drives you to the logo (which we will look at in just a second).

The text itself sits on a white background which also lends to the “easy on the eyes” feel they are going for. To further add to the mood, the text color isn’t black. Instead it is a nice shade of #A1988B, which in the “web safe color” world is roughly equivalent to #999999. I find the overall mood to be nice and inviting which makes me want to see more.

Logo

Logos are important for identity. This logo is primarily a text-based logo. The little cube on the right is meant to show you “openness”, and overall I think it does the trick. Underneath the main title is their slogan “Community. Driven.”. This uses a common marketing approach of having a common term (in this case “community driven”) which has one set of meanings, and then using punctuation to break it apart and give extra meaning. In this case you can see that community is important, and they are driven to be successful. Nice.

The colors on the logo are nice gradients of the main brown in their color scheme. While it looks great on the site, they are kinda married to it which could be a problem long term. Logos are how an entity quickly and easily tells the world about themselves. The colors of the logo are usually very important to brand identity. Changing colors, usually, is no bueno if you are trying to build a brand. In this case it probably isn’t a big deal because the open design folks probably won’t exist outside of the web, but if they wanted to make stationary, business cards, etc. this color scheme might be a bit problematic. The fact that the logo is so entwined with the current scheme could also make a future redesign difficult without diluting their brand.

Menu

Under the header we have their main menu. It is a simple vertical design with big text. This allows a first time user to easily find it and navigate around the site. I like how the menu kinda carves itself into the header. Its a nice effect. Again the curved lines give a nice, inviting feel.

The only problem I see is the font. Now on the web you can’t really get fancy with fonts unless you are using images in your menu. I like text-based menus because they are easy to maintain and are lightweight, but each has a purpose. For some reason the font on this site has a lot of jaggies (at least when viewed through Firefox 2.0). From their CSS you can see that it is “font: small-caps 1.9em georgia, serif;” The rest of the site is Arial, so I am not sure why they went with a different font with the menu. At this size, it looks a little rough.

Footer

Never underestimate the power of a good footer. A good footer is like good shoes. It shows that you pay attention to detail. This site is a great example of this. The footer is simple, elegant, and shows a good amount of information without looking cluttered.

Flow
A site’s flow is really what UI is all about. Pretty graphics are nice, but a solid layout and easy flow is what brings users back. What I like about this site is that its flow is accessible. Everything you might want to see is available “above the fold” (which in the web world means “before the scroll”). Latest Posts, Latest Designs, and Latest News are all easily within reach. Wanna log in? No problem, its right on the top. Search? Couldn’t be more obvious.

When designing a site, users are used to scrolling around, but it is always best to make the most important information available immediately.

Conclusion
I think that the open design people should be very proud of what they have created. The site has a strong pull to it that a lot of sites could emulate. The “soft inviting” look is great for a community site because the sites, by design, are supposed to keep people there. If you use too many bold colors, you can scare them off. Good colors, good flow, great site.

What do you think?