Advertisement
General

In-Depth Design Review of charitywater.org - BAD 2010

by

Blog Action Day 2010 is upon us! This year, Webdesigntuts+ is getting involved with a special design review of one of our favorite water-based charities: charitywater.org. We'll explore the key elements that make the website such a success and how you can borrow the same design strategies for your own projects!


charity: water

In honor of this year's Blog Action Day, we're offering an in depth design review of the website, charitywater.org. "charity: water is a non-profit bringing clean and safe drinking water to people in developing nations".

Sites for charitable organizations are always interesting projects because they need to engage visitors to action. The website far exceeds what you would normally expect from a non-profit though; It boasts solid design fundamentals across the board and has a few great design tricks that give it a sense of character and refinement that few non-profit websites have. Let's dig right in!


Strategy 01: Color Usage

The first thing that you will likely notice on the charity:water website is the disciplined use of their brand color. What's unique here is that they use color in the same way that a corporate brand might use color. Notice how the blue never varies from one page to another - everything from the typographic highlights to the background and infographic colors tie the "charity: water blue" back into the design. The color usage is ubiquitous across the site; So even if the layout changes from one page to another, color serves as the constant unifying element... which ultimately gives the designer a little more freedom to play around with.

...using controlled color will create a professional presentation that gives the visitor a feeling that the site is credible and trustworthy.

What does this controlled color usage do to the aesthetics of the site? It creates a unified, cohesive user experience. More importantly, using consistent color will give the visitor a feeling that the site is credible and trustworthy; something that is vital to non-profits who constantly need to battle for the trust of potential donors.


Strategy 02: Smart Typography

Typography is one of those things that every designer knows deep down is at the heart of engaging visitors, but it's so often neglected in favor of the status quo text formatting. The charity:water website excels at using typography to draw the user in and emphasize the key elements that make this specific crisis worth knowing about.

From a technical standpoint, the typography uses established principles to guide the eyes around: the navigation and brand are subdued but easy to locate; "calls to action" and other key pieces of information are bold and easy to scan. Within 10 seconds of visiting the site, you probably had a pretty good grasp of the message just by scanning the major headlines... that's effective typography! Instead of burying major points of interest within blocks of paragraph text, the site brings them to the front of the visitor's attention.

Within 10 seconds of visiting the site, you probably had a pretty good grasp of the message just by scanning the major headlines... that's effective typography!

While the typography across the site feels wild and innovative on the face, it never breaks from a core set of rules: major headlines are set in a block typeface that draws instant attention, titles are set in a serif typeface that feels dignified, and the rest of the text on the page is set in a simple sans-serif that is easy to read. Using just a few simple rules like this can help unify your design even if you want to be all over the board with your layouts and type usage. Let's take a quick peek at the type hierarchy on the site:

Type Hierarchy on charity: water

A Rebuttal Worth Noting:

I should mention one thing that charity:water does that isn't quite perfect from a technical point of view. If you browse the site enough, you'll notice little places here and there that they break their own rules. For instance, in some places, paragraph text is serif, where on the bulk of the site it's sans-serif. The result is a slight break in the cohesiveness of the site... these inconsistencies are minor on this site, but it's important to keep in mind that if your own design is feeling "scatterbrained", it's worth taking the time to go through each and every type-style to reduce the variety of styles that you have in use.


Strategy 03: Using InfoGraphics

I'll keep this explanation short and sweet: if you have information that's best represented as a graphic, show it as a graphic! People are visual-thinkers, don't beat around the bush by trying to explain something with words that is easier described with a visual.


Strategy 04: Coupling Image with Text

This is similar to the third strategy, but it's warrants it's own brief explanation. Often, you'll be trying to design a page for content that's so complex, so academic, so data-driven that using just text or an infographic alone won't deliver the message effectively. In these cases, it's worth considering how you might pair an image with text. The text is still where the raw information will be, but the image will act as a "softener", making the information appear simpler than it really is - which encourages people to actually read it!


Strategy 05: Unique Layouts

It's the "One Trick Pony" of web design; The organizational paradigm that you see when you visit most sites is this: 1 custom designed homepage, 1 call-to-action page, and 1 template for everything else. The notion of using just one template to handle the majority of a site's content is shortsighted though! Using just one template bores visitors once they leave the homepage... instead of continuing that motivational high, these "one size fits all" templates invite users to leave the site once they feel like they've gotten the main idea.

Where charity:water succeeds is that they use a wide variety of layouts across their entire site. The result: content feels fresh on every page. Visitors are encouraged to keep on clicking around the site just to see what lies around the next corner. Even better, the design of each page actually matches the content on that page (crazy idea huh?). While developing a wide variety of unique page templates might cost a bit extra, the net effect is that the site actually engages visitors and is more likely to succeed at getting visitors involved.

Another Rebuttal...

It's important to note that using a variety of layouts isn't always the right solution. In the case of charity:water, it works because the site has a large enough diversity of content that it actually makes sense to give each type of content it's own layout. In other sites though, using radically different layouts from one page to the next can break the continuity in a design and actually work as a detriment to the site experience.

There's no hard rule for deciding when a custom page template is warranted though, so you'll just have to use your own instincts. When in doubt, use a generic page template - if the generic template hinders the content more than it helps it, consider creating a custom layout. If you do decide a custom page template is necessary, take care to keep the vital information (brand, navigation, account info, shopping cart, etc.) in the same place on each and every page.


Strategy 06: Make the Ordinary Look Fun

Let's face it: if you're working on a non-profit website, there's going to be a lot of dull informational pages that, while important, won't ooze inspiration. What charity:water has done with these information pages is display them in unique grid layout. By using icons and images along with the informational blurbs, the visitor's are encouraged to look around and find something of interest to them. More importantly, it makes these otherwise ordinary pages look "fun", which delivers a subtle message to visitors that even the most dull parts of this organization's operation are executed with creativity and passion.

The takeaway here is simple: don't ignore the ordinary content pages! While these pages might feel unimportant, there is a unique opportunity to surprise visitors by creating intelligent approaches to displaying this kind of content.


Concluding Remarks

I like the charity:water website... I really do. Each page feels fresh and it actually makes me want to get involved. Some might say that this is the sign of a genuine cause - a crisis so important that people are simply drawn to participate. I'm going to go out on a limb though and say that the effectiveness of the site has as much to do with the design as it does the content. Sure, if the cause were "donate $5 to Steve Jobs", I wouldn't really care about it regardless of how well designed the site was (some might disagree with this, haha!), but this is one of those wonderful times where design truly can make the world a better place.

Thanks for reading this year's Blog Action Day post! Drop some comments off below.

Related Posts
  • Web Design
    Complete Websites
    Design a Travel Startup Landing Page Using PhotoshopLanding thumb
    In this tutorial I’ll walk you through a process of creating a simple and clean travel startup landing page design. I'll be using Photoshop CS6 to design a professional and lightweight layout combining beautiful imagery and some stylish fonts.Read More…
  • Code
    Articles
    Strategies For Choosing the Right Premium WordPress Theme for Your Next ProjectPremiumwp
    You have your credit card in hand, and you are ready to buy a beautiful, premium WordPress theme for your next website or blog. But where should you begin? Perhaps a search through Google? Maybe a famous WordPress theme site? Perhaps ThemeForest.net? In this post, I aim to arm you with a few tips that will guide you when choosing a premium theme not only purchase a beautiful theme, but one that will meet your needs.Read More…
  • Design & Illustration
    UX
    10 Tips for Building Wireframes With IllustratorPreview wireframe
    Adobe Illustrator is experiencing a come-back in the world of web design. Not only is SVG becoming commonly used online, but more and more designers are using vectors for wireframing. The following tips will help you make the most of Illustrator as a wireframing tool.Read More…
  • Code
    WordPress
    5 Quick Beginner-Friendly CSS Customizations That Make Your Blog Stand OutCssblog
    In this tutorial, we'll cover how to do five quick CSS customizations that make your blog stand out. Even if you don't know what CSS is, you'll be able to follow the instructions and change the standard look of your theme.Read More…
  • Code
    Tips
    The Beginner's Guide to Setting Static Front Pages in WordPressStaticfrontpage
    Typically, in a WordPress website, the home page shows the blogger's latest posts, but what if you wanted the homepage of your website to display the same page every time? For those of you who are just getting started with WordPress, then it's worth noting this is not only possible, but it's really easy.In this article, we'll talk about how to implement a static front page in WordPress as well as where it would and wouldn't be appropriate.Read More…
  • Web Design
    Interface
    How to Become a Conversion-Centered DesignerUnbounce
    So you want to be a landing page template designer? You may think you have it easy - after all, landing page templates are just a single page. That’s much easier than designing a full-on website. But the rules of design change quite a bit when building conversion-centered landing pages.Read More…