Discover assoconnect Request a demo

7 Design Tips to Help Your Nonprofit’s Website Stand Out

A website is the easiest way to share your nonprofit’s mission with the world. We don’t encourage judging a book by its cover, but...a visually striking cover can invite people to pick up a book and open it. A beautiful website will encourage visitors to explore it - which would mean more potential donors and members for your organization!

Here are 7 design tips that can spice up your website:

  1. Responsive Design
  2. Infinite Scroll
  3. Split Screen Layout
  4. Negative Space
  5. Bright and Earthy Colors
  6. Bold Fonts
  7. Animations
    alt=””

1. Responsive Design

nonprofit-website-design-tips-responsive-design

1 in 5 adults in the U.S. are “smartphone-only" (meaning, they don’t use laptops or desktop computers). This means that if your website is not adapted for smartphone’s smaller screens, visitors might leave your website out of frustration.

Responsive design will automatically adjust the website to any screen size. Nowadays, web designers often create websites for the smartphone screen first, and then adapt it to larger screens. This approach is called mobile first design.

To find out if your website is responsive, we recommend using the Google mobile optimization test

2. Infinite Scroll

nonprofit-website-design-tips-infinite-scroll

With more and more smartphones and tablets, we have a ton of information at our fingertips. Users increasingly prefer scrolling, rather than clicking on links. 

Consider this: You have a website with 5 separate pages (a home page, contact page, etc.). To view all the information, your visitor would need to tap 5 times to see everything.

What if your organization’s information were laid out on a long scrolling page? You can keep visitors’ attention longer by making your content seamless, so they can just keep scrolling

[Did you know? Facebook, Instagram, and Twitter are all infinite scroll websites.]

3. Split Screen Layout

nonprofit-website-design-tips-split-screen

The split screen divides the page into two "columns." You can feature a photograph on the right, and a block of text on the left (see above example).

This layout has the advantage of using all the horizontal space on the screen. Remember when we discussed the perks of scrolling? Well, there is also the downside of scrolling too much, if your website content is spread out too much! You should position your text and images wisely, to achieve maximum visual impact

4. Negative Space 

nonprofit-website-design-tips-negative-spaceNegative space means any unused space on the web page. It is anything that doesn’t catch the viewer’s attention. Negative space is just as important as photos and text, because it allows your website content to breathe.

Play with white and “empty” spaces to create balance and order on the screen. Don't give in to the temptation to fill every available space on your website! 

5. Bright and Earthy Colors

Colors affect how we feel. Warm colors are exciting, and cool colors are calming. Your website’s color palette can influence what people think of your nonprofit. 

Do you want your website to inspire action and support your organization? Choose warm colors - fiery red, bright orange, and neon yellow. Do you want your website to be a calm and quiet oasis for the visitor? Cool and earthy colors will soothe the eyes, and encourage them to scroll a little longer.

nonprofit-website-design-tips-colors

There are dozens of online tools to help you choose a harmonious combination of colors. With Coolors, you can generate thousands of color palettes for free. Just keep pressing the space bar until you find the perfect color palette!

nonprofit-website-design-tips-color-coolors

6. Bold Fonts

nonprofit-website-design-tips-fonts

Photo Source

Make a statement with 2 different fonts that contrast with each other. You can use font pairing generators like Mixfont, which pair fonts that look great together. 

Bonus points: Combine your font pairing with contrasting colors, for high impact (see example above).

7. Animations

nonprofit-website-design-tips-animation-gifPhoto Source

Animations are great at bringing a well-designed website to life. They make the difference between a good and a very good website.

A button that changes color, text that appears and disappears when scrolling down the page...these animations keep the visitor engaged while exploring the website.

With a few simple animations, your website visitors will feel like they are interacting with the website - and therefore, with your nonprofit too. This engagement is important - especially if you are looking to prompt an action from your website visitors (e.g., making a donation!).

In this digital age, nonprofits connect with their current community and reach new audiences through their websites. These 7 design tips will not only help you connect with them, they’ll come back for more. After all, if you see a beautiful flower on your morning walk, you’d stop to admire it longer. You might even return the next day to see it again!

To make the website design process as easy as possible for organizations, we created an easy-to-use web design tool, available to nonprofits at AssoConnect. Check it out! 

nonprofit-website-design-tips-assoconnect

David loves how the website looks,
after using these design tips!