Blue is perhaps the most commonly used color in web design, and it makes sense that so many sites feature this calming hue. People are naturally drawn to the color because of its relaxing properties, and like the depth of the ocean or the vastness of the sky, it is a very universal and is associated with confidence, clarity and trust. Why do you think that Facebook, Twitter, and Tumblr all feature blue layouts?

With so many blue websites out there, one way to make your blue site stand out is through a clean and usable layout. With the abundance of websites using blue comes an abundance of poorly designed websites. Let’s take a look at some blue sites and see how they rate for usability.

Luhse Tea

Luhse Tea’s site definitely takes the cake for interesting and creative design (and was chosen as Site of the Day by the prestigious panel at Awwwards), but from a usability standpoint we weren’t as impressed.

We find their logo to be misleading as it reads Luhsetea, as opposed to Luhse Tea. We like the Art Deco typography of the main navigation, but the icons seem too large and without the labels would be hard to interpret. There is also a disconnect between the mysterious blue Art Deco mood and the bright red Constructivist banner that is the focus of the home page. Though these two art movements are from around the same time period and certainly influenced each other, we are failing to see the connection in this context and how they are related to the product.

We like the simpler layout of the About Us page, but the typography could be more legible. The art deco typeface works well for the headings, but it is harder to read when used for body copy, especially as white text on a blue background.

The product page (Tea & Spices), could use a more intuitive label such as “products” or “shop”. The layout is interesting, with gorgeous product photography and fun typography enclosed in a circle. However, the animated King Kong and airplane graphic is irrelevant and distracting. Also, not all of the colors on the filtering results not correspond to the color of the tea, it would probably be better to leave these labels as text based.

The site is creatively designed and we can see why it was given an award. Kudos! But sometimes, design can interfere with a site’s usability and this is site is a perfect example of that.

Usability Score: 2/5
http://www.luhsetea.com/

Blizzard Entertainment

Blizzard is a company that produces some of the most popular online video games (aka MMORPG’s) such as World of Warcraft and Diablo. Their website features a rich dark-blue background, which contrasts nicely with their icy logo and alludes to the mythical nature of their games. Though this color works well for the bold graphic elements, the light blue type on the darker background proves hard to read at smaller sizes.

The home page is quite distracting, with animated flash based banners that make it hard to concentrate. We understand that this site is designed for the internet generation, but it seems a bit much.

The Community page features different ways for the user to interact with the community surrounding the company’s games. Though this is nice feature in theory, we find the design to again be distracting and lacking clear hierarchy. Almost every element on the page, from the background to the buttons, is photographic. This causes the page to be visually overwhelming. The site also breaks one of the most fundamental usability laws (“Don’t Make Me Think”) by using clever titles to link to the site’s social media outlets.

The most confusing aspect of the site is the lack of consistency on the support page. Because this page was part of the top navigation, I expected it to have a similar layout to the rest of the site. Instead, I find myself on a different site entirely, called Battle.Net Support. In addition to having a completely different aesthetic and layout, there is no link back to the Blizzard homepage. Maybe avid followers of these games would understand the battle.Net connection, but I found it to be thoroughly confusing.

Usability Score: 1/5
http://www.blizzard.com

Obama Biden

Regardless of your political views, it is interesting to note that President Obama’s campaigns and website employ a mostly blue color palette. This makes sense, as blue is a very friendly and trustworthy color, the perfect palette for a politician trying to appeal to his audience. We like to attribute Obama’s success in the 2008 election in part to his well designed campaign and use of the typeface Gotham. His site proves to be just as usable and visually engaging.

The home page features many calls to action that highlight different points of the Obama – Biden campaign. Though they border on distracting, they are fairly well organized and create a dynamic experience. The prominent banner is a nice touch, and allows the user to sign a petition directly from the home page. There are also prominent social media links and blog posts, which reflect the social nature of the President’s campaign.

For those wishing to learn more on where the president stands on certain issues, these items are broken up into distinct and clearly labeled pages. Each of these pages starts off with a petition and bullet points that summarize the major ideas. For those looking for more specific details, this information is organized into visually striking infographics and somewhat wordy blocks of text.

Of course, the main goal of the site is to get you to donate to the campaign (and to vote for Obama in November, but you can’t do that online …yet). The design of the donation page is simple and well organized, and does a good job of presenting all of the information on one page. Though the main navigation disappears, you still have the ability to navigate back to the homepage by clicking the logo at the top. And who wouldn’t want to donate money to that smiling face? (Ok, maybe Republicans, and some Democrats too, but you get our point…)

Usability Score: 4/5
http://www.barrackobama.com

Here are some more websites that feature the many shades of blue, how do you think that they rate for usability?

What’s up next? Blue packaging and print design!