Monday to Thursday, 10am-4pm, EST
1.855.281.5499 (toll free)

6 Design Principles to Improve the Look of Your Nonprofit Website

Multimedia & Design

By: Jasmin Bollman, Rebel.com

As you read this, approximately 571 websites are being created. That is a lot of online stores, blogs, resumés, news websites and cat pictures.

Not all of those 571 people actually know how to build websites. Fortunately, there are tools for that. But even the most amazing tools can be used to create a website that is difficult to navigate and unpleasant to look at. For nonprofits, having a functional and easy-to-use website is of utmost importance to gain and maintain the trust of your donors, beneficiaries, and anyone else invested in your mission. Apply these design principles to make your site look sleek and professional. 

Start with a Site Map

Your nonprofit website is a platform for generating trust, awareness, engagement, and income. To achieve these goals, you need to first think about the people who will be visiting your site. Who are they? What are their needs? What do you want them to do on each page of your site, and how will you fulfill those specific needs at every turn? 

Use these answers to draw out a map for your site on paper. Make an outline of all the pages you’d like to include and how they fit together. It’s important to invest real time and energy into your sitemap -- as a visual representation of your goals, it will guide you throughout the entire the design process. 

There are also plenty of high-quality digital tools to help you produce fluid and functional site maps. WriteMaps is one option: it's simple, intuitive, and free (for up to three maps a month). 

WriteMaps screenshot

Okay, on to the design stuff.

Follow the Grid System

The grid system is a design approach that arranges the visual layout of your website via columns. Each element on the page can be any number of columns wide, and can start at the edge of any column. This gives your site a unified look and improves readability and usability.

Unless you’re building a site from scratch, you won’t need to worry about actually setting up the grid. It’s already built into most site themes. What you need to do is look out for website layouts with different sections, columns and boxes.

Grid System

Space Things Out

As you’re laying out your site, use the rule of thirds or Golden Ratio to balance content and draw your users’ eyes to specific areas. Doing so will bring the eye of your viewer toward the totality of the composition rather than just the center. 

Rule of thirds

You can also consider:

  • Adjusting line spacing. Make sure there’s enough space in between your lines of text.
  • Using white space. It doesn’t have to actually be white. White space is empty space on your page. It helps draw users’ eyes to the important stuff, and will keep your page from looking too cluttered. Think of it as breathing room.

Use High-Quality Graphics

Choose images that will connect with your users and help with your brand positioning. A lot of websites don’t really think about the overall look of their images. You can really stand out by using professional-looking pictures or stunning free stock images. More image tips:

  • Consider spicing things up with videos, GIFs, infographics, and other types of visual content.

via GIPHY

  • Don’t forget to optimize your images in size—this keeps them from loading slowly and using a ton of data for mobile users.
  • Include alt tags to describe the image. This makes Google happy, and also makes your site more accessible for the blind and visually impaired.

Create a Visual Hierarchy

You know how one of the first things you see on most sites is their logo? It’s often larger than other elements close to it, and located on the top left side. Why does that help? Because 69% of people spend more time looking at the left side of the page on websites.

A compelling visual hierarchy will guide your viewer's attention to the most important components of your website. Use the sitemap you drew earlier to decide on the position of your design elements as well as their color and size. This will guide users through a sequence of steps. More important elements should be bigger, bolder, and have more contrast with the surrounding area.

Make Navigation Intuitive

Users expect to find navigation menus across the top side of websites and are used to generic labels like Home, About Us, and Contact. Don’t over-complicate things by putting your navigation somewhere unexpected or using unconventional labels.

Use Clean, Readable Typography

The easiest typefaces to read online are Sans Serif fonts like Arial and Helvetica. The ideal font size for body text is 16px, and you should stick to a maximum 3 different typefaces to keep your design streamlined. Avoid typefaces that are very ornate or fussy—simple will look best, we promise. Create visual hierarchies with headings to make it more readable (it’s good for your SEO, too).

By using these concepts to steer your design process, you can create a functional (and beautiful) website for your nonprofit that can help maximize user engagement. Not only will your visitors be able to understand and connect with your message easily, but you can streamline the donation process at the same time. Website design can seem intimidating, but if you keep a few key principles in mind, you’ll have a stand-out site in no time. 


About the auuthor

Jasmin Bollman is the Marketing Manager of Social Media and Content for Rebel.com. With a background in journalism, she spent several years working behind-the-scenes in public relations before making the leap to full-fledged brand builder. Her love/hate relationship with Twitter has given her a unique way of looking at marketing and how brands can stand out online. She also moonlights as a freelance writer and is an aspiring introverted inspirational speaker.