1. Convoy of Hope

The Convoy of Hope website is striking from the second the page loads in the browser. The first thing you’ll notice on the homepage is a large hero image gallery where a series of four powerful photos automatically display. Blue and red are dominant colors in the hero gallery and throughout the rest of the site, working together to inspire hope. As you scroll down through the pages of the site you’ll notice how the site is designed with modern, wide color fields, taking advantage of white space and the width of the viewers browser window. This design makes the site interesting and easy to read.

Other features we love about this site include:

  • The static navigation bar at the top of the web page. This gives visitors constant access to it and allows them to easily move to different pages within the site.
  • It’s a responsive site! The site adapts to accommodate the device you’re using to view the site. The layout of the site on a desktop is similar to the layout on a smartphone or tablet, however certain elements have been tweaked to make the user experience more enjoyable.
  • Animated text without browser plugins. The designers of this site took full advantage of new design technologies. The first time you scroll through each color block of the site, text pops up or flies in from the edges of the page. This animation is subtle enough to not be annoying yet powerful enough to grab the readers attention as they scroll through the site.
  • A clean footer layout. The footer is easy on the eyes and also provides additional site navigation, contact information and social sharing buttons.

2. Teach for America 

Homepage Slider and Buttons

A large homepage slider displaying big, bold images works well to grab the viewer’s attention upon entry to the Teach For America website. The soft color palette, made up of light blues, beige, gray and white, combined with subtle texture makes the site pleasant to read. However, the viewer’s eye is drawn to two bright green call-to-action boxes in the upper right corner of the site. One of the buttons is a drop-down menu that has “Apply to the Corps” written on it to clearly communicate where to go to apply. The other bright green splotch of color highlights the “Donate” tab of the navigation bar to direct visitors to the donation page. The use of color here makes the “Donate” tab stand out from the rest of the buttons in the navigation bar.

Search Bar & Social Media Icons

Directly above the “Apply to the Corps” button you’ll notice two very important features: a search bar and social media icons. The search bar is a valuable feature that allows visitors to quickly find the information they’re looking for while the social media icons quickly connect the visitor to the organization’s social media platforms.

Blog

Another aspect we love about this site is that it has a frequently maintained blog that is updated sometimes more than once per day. This organization has a ton of information to share and blogging is a great tool to use to spread the inspiration needed to get involved. YouTube videos embedded in the site also help to inspire visitors and keep them engaged while allowing featured people to share their own story, adding a personal touch to the site.

3. UNICEF

As a volunteer for UNICEF, I’m very pleased with the functionality and design quality of the UNICEF website. On every page a visitor is confronted with multiple images of children that need help and protection. These images, displayed in various sizes, work to seize the emotions of the reader and compel them to take action and help the cause.

A few spectacular elements of this site include:

  • Red Call-to-Action Buttons. These buttons draw the visitor’s attention to an important landing page on the site: the donation page. The “donate” button is prominently placed in the top right corner of the website as well as in the sidebar of the blog. The donation page continues the UNICEF brand, maintaining the same colors, imagery, fonts and tone, providing the user with a sense of security. Back on the homepage, the donate button helps direct attention to the less prominent “how to help” button right next to it, guiding visitors to more information about ways to advocate, fundraise and volunteer for UNICEF.
  • Simple navigation. Similar to the Convoy of Hope website, as you scroll down through the UNICEF website, the navigation transfers to a static bar at the top of the page. This type of persistent access to the navigation bar helps keep the visitors attention longer by providing them with directions to more content on the site. This in turn makes them stick around on the site longer to read more.
  • A large, clean footer. The footer provides a secondary navigation area yet doesn’t divert attention away from the rest of the site.
  • A creative, non-traditional blog. Just below each post there are sliders with beautifully designed infographics that persuade visitors to continue scrolling. Once you get past the slider there are excerpts for three more articles accompanied by emotionally touching images. This blog structure keeps visitors wanting to read more.

4. Ronald McDonald House Charities 

A few things we love about this website include:

  • A clean, open design with a lot of white space.
  • The consistent look and feel of the brand throughout the site.
  • Super clear navigation that assists the reader with where to click next.
  • The newsletter signup bar at the bottom of the home page. By entering four simple bits of information, anyone can keep up to date with RMHC news.
  • Color blocking in the secondary navigation area clearly indicates where the visitor is on the site.
  • The yellow plus buttons!
  • Beautiful call-to-action buttons.

Yellow “+” Buttons

The yellow plus buttons used throughout the website really caught our attention. They offer visitors the opportunity to interact with the site and learn more about  the organization. Visitors can even read inspirational stories by clicking on the yellow plus buttons in the gallery at the top of every page. By clicking on the icon, a fun slide effect is initiated to reveal the full story that corresponds with the image in the gallery. Upon clicking on the yellow icons with the plus symbol in the “What We Do” section, a panel slides out to reveal more information. The fluid motion of the sliding panels adds an aesthetically pleasing element to the site.

Call-To-Action Buttons

Each page of the site also features two simple, yet beautiful, buttons for donations or connecting with Ronald McDonald House Charities through social media. The donation section is easy to use. It’s set up as a step-by-step process similar to a website shopping cart.

5. Make A Wish Foundation: Missouri

Similar to the Ronald McDonald House Charities website, the Make-A-Wish Foundation of Missouri also has a simple and open feel to their website, taking advantage of white space. This simplicity allows them to clearly communicate their mission to visitors and, in turn, helps them to accomplish their goals.

Navigation

Navigation on this site is very simple and easy to understand. The navigation bar at the top of the page includes a “Donate” button that is reversed out on the background, making it stand out from the rest of the navigation. Secondary navigation is available on the homepage in a sliding bar displaying fun icons, short descriptions, and titles with slight variations of the titles used in the main navigation bar.

Donation Page

The donation page, set up in shopping cart style, is designed to make the donation process quick and easy. In just four simple steps anybody can make a donation with this user friendly interface.

Ways to Help Page

The layout of the “Ways to Help” page is also noteworthy due to its exceptional organization. Each category is accompanied by a photo with subcategories listed in uniformly sized buttons underneath. If you hover your mouse over a photo, a blue box pops up over the photo sharing more information about that category.

6. American Red Cross 

We think this non-profit membership organization’s website is spectacular because:

  • This website continued the trend of strategically using white space to make the site clean and easy to read.
  • It has a large image slider packed with attention grabbing images, statistics, and call to action buttons.
  • They link to their blog on the website and feature posts and news articles on the homepage under the slider.
  • The main navigation makes it easy to find important information regarding what the organization does and how people can help.
  • Subtle splashes of red are used throughout the site to bring their branding into the website design.
  • The large “Join In” call-to-action section in the footer draws attention to the multiple ways people can get involved and join the American Red Cross.

News/Blog Article Pages

We specifically applaud the layout of the news article pages on the website for the following reasons:

  • Every article page displays social sharing buttons both in the upper right corner of the page and in the sidebar under the words “Be An Advocate.”
  • The sidebar on every article page features multiple calls-to-action to encourage the reader to learn more, join or volunteer in some way.
  • Finally, these pages are set up with the goal of engaging the readers by placing a related articles section at the end of each post.
[hs_action id=”10595″]

 

More about the Author

mayecreate-maroon

© MayeCreate Design 2017 | 573-447-1836 | info@mayecreate.com | 700 Cherry St. Suite C, Columbia, MO 65201