June 11, 2018

Top 10 Nonprofit Web Designs: Summer 2018 Roundup

Website Design and Development for John Templeton Foundation

At Push10, we’re passionate about working with non-profits and mission-driven organizations. Although they have many common goals, each non-profit we’ve encountered has had a unique story to tell and a distinct visual style. 

As a design team, we find it very important to collect inspiration everywhere we go. We often go on field trips to art museums, craft stores, paper stores and even historical institutes. Inspiration can be found anywhere! Its become a fun design challenge to gather and review the best and most innovative websites within different industries. We’ve compiled a list of the top 10 nonprofit websites that are inspiring us this summer below.


1. Upstream

The attention to detail on the Upstream site is what sets it apart from the competition. Every section and interaction is well considered. We love the subtle hover effect in the main navigation, the play button animation, and the button hover effects. The unique overlapping of sections and watermarked logo motif keeps the site consistently branded and draws the user’s eye down the page. Visit Site »

 

2. Philabundance

The Philadbundance site uses large imagery, bold colors, and refined typography to create a clean and simple user-friendly site. When the user scrolls the navigation sticks to the top of the browser window, making it very hard to get lost on the site. Every page is well considered and is branded consistently. The lime green color is always the primary call to action and the fruit and vegetables act as a unique design motif throughout. [Designed by Push10]  Visit Site »

 

3. Charity Water

The Charity water site uses beautiful imagery that is faded out to a light background as well as a playful color palette to grab the user’s attention. The design combines some beautiful elements like iconography and brush paint to create a strong mood and distinct branded appearance. Visit Site »

 

4. John Templeton Foundation

The use of imagery and videography on the John Templeton Foundation website drives this unique and conceptual user experience. The user doesn’t need to focus on reading paragraphs of text as imagery and videos drive the story. The web design uses very sophisticated, elegant and modern brand touches to keep users engaged throughout. [Designed by Push10]  Visit Site »

 

5. One Drop

The One Drop site brings it back to the basics with large banner images and chunky text overlays. The site is consistent throughout and uses the bold water drop mark to add a branded element to interior pages. The bold colors paired with the dusty white set the mood for the site. Visit Site »

 

6. Knowles Teacher Initiative

The aesthetic of the Knowles Teacher Initiative site is very clean and professional which feels appropriate for their subject matter. The design touches like the watermarked logo and the angled overlays throughout provide brand recognition and consistency.  [Designed by Push10]  Visit Site »

 

7. This Bar Saves Lives

As a product-driven site, This Bar Saves Lives has a slightly different focus than the other mission-driven organizations reviewed above. The retro vibe is somewhat nostalgic and positions the brand in a unique category. The typography is fun and playful which pairs nicely with the overall color palette and style. The messaging is clear and the user is able to quickly understand the organization’s goals. Visit Site »

 

8. WinShape Foundation

The WinShape Foundation successfully combines imagery and video with white space. The design is very clean, allowing the core brand messages to take center stage. Subtle parallax scrolling in the footer adds a touch of modernism while obvious calls to action and button styles ensure that the site is easy to browse. The interior pages were well considered and bring in extra design elements like the timeline on the About page. Visit Site »

 

9. Acumen

The Acumen site uses well-considered large visuals, bold branded pink and ample white space to create a clean and modern interface design. The site also does a great job of clearly organizing information and quickly conveying the objective of the organization.  Visit Site »

 

10. David Shepherd

The David Shepherd site took a very simple approach to the web by using white text over large imagery. The site is very easy to navigate and has clear headlines and calls to action. Overall, the site is simple, neutral and consistent. Visit Site »