Things to Consider When Designing a Non-Profit Website

If you’re creating a website for a non-profit organisation, these trends will help you build a successful home for your cause.

Non-profit sites are designed to draw attention toward a cause. This is one of the largest distinctions between a non-profit site and a small business site. Although non-profits are very much like typical businesses, their designs need to feel more humane.

Many of the following design trends can be applied to other business layouts as well. But non-profits offer a more endearing quality that arouse levels of trust and camaraderie. Whether you’re launching a new personal project or working to please a client, these trends are sure to offer guidance and inspiration along the way.

Ubiquitous Branding

A recognizable brand can make the difference between international success and complete abject failure. This is true for every company but it’s especially true for non-profits that need as much good PR as possible.

A non-profit website needs to work and function properly. But it’s worthwhile to also mix branding into the equation. Familiarize visitors with the company’s logo, colors, textures, graphics, and other design aesthetics.

Try to make the website itself synonymous with the non-profit organization.

change nonprofit branding fractals

Names for Change has an interesting technique that focuses more on colors and geometry. Similar fractal patterns are duplicated throughout all areas of the page. Icons, patterns, colors, and typography styles match up in mellifluous harmony.

A graphic designer could easily take these elements and extrapolate them onto a poster, billboard, or any other type of advertising material. The brand doesn’t need to overtake the layout but it should be pervasive enough to notice.

food angel non-profit company layout

For example, take a look at the Food Angel homepage. Their branding features are more subtle but still noticeable. Colors and font choices seem to visually match up together in all areas. The cute cartoony icons also give off a sense of class and unity.

A slightly different yet extraordinary example is the CUPS website. They don’t focus much on the logo but instead build consistency with illustrations. People remember graphics more than text, so it’s a good idea to craft similar icons and mascots throughout a website.

cups nonprofit vector layout

Overall just aim towards a unified experience. Do your best to include brand references wherever they might fit without interfering with functionality.

Accessible Content Structure

Fonts and content organization play a big role in every website. Non-profits rely on content structure to show people what they do and how they do it.

But just because content needs to be readable doesn’t mean it needs to feel stiff or rigid. You shouldn’t feel required to design a layout in the same fashion as an NYC investment firm. Non-profits can get a little loose and draw more inspiration from graphic design rather than traditional interface design.

the bloom group nonprofit website

For example The Bloom Group has a wild structure that still feels consumable. The layout is fully responsive and content is split into easily-definable areas. The homepage is a little more colorful than internal pages because it’s designed for a memorable first impression.

Try experimenting with different column styles and orders of content to build anticipation from one area to the next.

one nonprofit company organization

ONE follows a similar pattern with their layout focused heavily on contrast. Text colors are meant to jump out against the background for easy readability. Their navigation style mimics Bloom Group’s design with a fullscreen bar and sub-links when appropriate.

There’s a time for creativity and a time for order. Creativity draws feeling while order draws more logical attention. Non-profit websites often work best with a creative, enticing homepage that’s coupled with more structured inner page layouts.

Mixed Promotional Media

One of the best tools for selling an idea is media. Photos and videos convey more than text in a shorter window of time. The key is to use photos that evoke a certain mood or feeling that resonates with the company.

In many cases it would be worth taking professional photos solely for the website. People notice professional quality when they see it. Think about using a photo carousel, article thumbnails, or even background photos in parts of the layout.

climate reality project homepage nonprofit

Climate Reality uses mixed photos and videos into a grid structure. The top scrolling feature moves between different subjects that link out to articles and video presentations.

If these content boxes were full of static text they wouldn’t have the same effect. Imagery packs a punch in ways that simply can’t be matched.

Also notice how individual blog posts use the same featured images in the header. If you’re lacking beautiful graphics and icons then photos are a great way to add life into an otherwise simplistic design.

Some designers even like to go with fullscreen videos where appropriate. Video mashups offer a peek into charitable functions and goals. They can even explain what a non-profit does without using text. Take for example the homepage of Charity: water.

charity water non-profit fullscreen bg video

The very top of the page features a looping background video section. This box includes a CTA button to get people signing up or donating to the cause.

Lower on the page you’ll find more photos and graphics that explain their goals. Text will always be a necessary part of the web – but don’t underestimate the value of multimedia.

Charts, Data & Relevant Information

Companies without metrics can’t really take advantage of this trend. But it’s popular among non-profits with causes that can track changes over time. They’re a powerful way to tell a story and grab attention.

spill counter data website homepage

The CounterSpill website is more of an activist page than a non-profit. But the design style is remarkably similar. Their header is fascinating with dynamic bubbles of contextual information about past energy spills and leaks.

You can filter out disasters based on material(oil/nuclear/etc) and even hover the map to gather more information about a particular event. People love to learn when it’s convenient. Information is more enticing when it’s accessible.

hunger crunch ios game website

Looking over the Hunger Crunch landing page you’ll find many other techniques that I’ve mentioned in this post. Lower on the page you’ll find a map of impoverished areas that are given all profit donations through Rice Bowls.

Hunger Crunch is a mobile game where 100% of in-app purchases go to Rice Bowls. This is pretty cool and virtuous enough that it deserves plenty of attention on the homepage.

Heavily Customized Layouts

Custom interfaces require creativity and behave more as outliers in this list of trends. But as mentioned earlier, non-profits can get away with more creative expression if used properly to promote the brand & their cause.

But not all customized layouts are created equal. At times it may be better to go with a traditional design over parallax animations. For example, Acting on a Dream is decently designed but poorly built. Almost every aspect of the site is rendered using images.

Text isn’t selectable which is a huge problem for SEO. Granted the site functions and looks rather intriguing. But you can’t sacrifice usability for design. Ever.

On the flip side there are many stellar examples of custom non-profit layouts. El Monstruo is one such example with horizontal parallax scrolling, animated effects, and beautifully crafted graphics.

monster kids go to school parallax

Everything on their site is rather impressive. The graphics must’ve taken a while to create, let alone the dynamic parallax effects.

Although El Monstruo’s layout doesn’t fit the mold of a traditional non-profit website it still works flawlessly capturing attention and conveying relevant information.

Designers who follow these trends will have no trouble crafting a brilliant layout for any non-profit organization. Web trends are generally fluid but change ever-so-slightly based on content and industry. If you learn to identify these trends you’ll increase your visual library and notice dramatic improvements in your design work.


Featured image: Rawpixel

About the Author Jake Rocheleau

Jake is a passionate writer & digital designer frequently researching the latest trends in UI/UX design and user behaviors. You can find work samples on his portfolio and follow his tweets @jakerocheleau.