Skip to Main Content

Nonprofit Web Design: 22 Tips That Lead To Attractive And Engaging Websites

22 min read
July 20, 2016
Neon One Staff

Wondering if your website is helping or hurting your nonprofit? A well-designed nonprofit website can help elevate your digital presence, increase online donations, gain you more media attention, and more! We have 22 recommendations and examples to elevate your website, shown on websites designed by our Neon Websites team.

Best Nonprofit Web Design Tips

1. Integrate Your Website with Your CRM

Why It’s Important:

By integrating your website with your CRM, all of the data you collect from webforms will automatically be recorded in your donor profiles.

In other words, integration takes the time and hassle out of data management!

Plus, many CRMs have tools built-in that will make it easier to generate donation pages and other types of forms in the first place.

How It’s Done:

During the buying process, you should look for a donor database that can generate branded forms that can easily be incorporated into your website. Conversely, if you’re looking for a new website host, make sure it can support your CRM.

Alternatively, you could look for a vendor that provides both software and web design services (like Neon)!

Just like Lakewood Service League does, you should integrate your website with your CRM.

The Takeaway: When you integrate your website with your donor database, transferring and tracking your data will be a breeze.

2. Make Sure It’s Mobile-Responsive

Why It’s Important:

With a majority of your donor base likely coming to your website from their phones or tablets (it’s estimated about 60%), it’s important to optimize the mobile-user experience.

Having to pinch, scroll, or zoom to view your content can frustrate users and keep them from staying on your site long enough to submit their donations or otherwise engage with your organization.

How It’s Done:

Many website builders will automatically generate a mobile-responsive version of your website.

However, you should still design with mobile in mind to ensure that your page will translate over well. Minimize the number of elements you have on your page, stick to a vertical design, and use large, easy-to-read font.

Remember: the best way to tell if your site looks good on mobile is to view it on a mobile device!

The Ridgeville Foundation has designed their website so that it looks great and optimizes the user experience on every device!

The Takeaway: Mobile is the present and future of communication. Design your page for mobile so that all of your donors will be able to navigate it easily, no matter which device they’re browsing from.

3. Include Social Elements

Why It’s Important:

Incorporating social aspects into your website helps expand your reach and gives your supporters yet another way to engage with your organization online.

How It’s Done:

Considering that your website and social media pages form the cornerstone of your organization’s online presence, it can be helpful to think of these two things as interrelated.

Incorporate social sharing buttons into your website articles and webforms so it’s easy for supporters to share your content with their friends.

Conversely, share the articles and updates you post on your website to your social media pages to maintain a regular posting schedule and always keep your followers engaged.

Lakewood Service League has included social sharing buttons in the very top right corner of their page. Notice how they’ve featured them in a bright color so that users can easily spot them and share Lakewood’s content with their networks.

The Takeaway: Your website and social media pages go hand-in-hand. Incorporating social sharing features into your website will make it easier to establish your social media presence and enable you to reach more supporters’ engagement preferences.

4. Add a Subscription Box

Why It’s Important:

Subscription boxes pop up on the page and request that users subscribe to your email list by submitting their name and email address.

Including one on your website will boost your email newsletter subscription rates, since more supporters will be aware of the option to subscribe and will have a convenient way of doing so. 

How It’s Done:

Your email marketing service should provide you with a code that you can insert into your website to generate a subscription box.

While some organizations will opt to have it pop up every time a user changes pages, others will have the box ever-present in the bottom, right corner.

Either way, make sure to feature it prominently and to include a short sentence or two about what subscribing entails and what value users will get from your newsletters.

Women In Toys encourages their website visitors to subscribe to their email newsletter by including a brightly colored, easy-to-complete subscription box on their website.

The Takeaway: Adding a subscription box to your website can help your email list grow by leaps and bounds.

5. Feature the Most Relevant Information

Why It’s Important:

Your homepage navigation will be how a vast majority of your users get around your site.

In the navigation, include links to the pages on your site that your users most likely came for, so it’s easy for them to navigate your site and find the content they want. 

How It’s Done:

To pinpoint the most relevant navigation structure, consider your visitors and why they’re coming to your site. What information are most of them looking for? What information do you want them to see?

Feature the most relevant pages (e.g. “About Us,” “Ways to Give,” etc.) in the primary navigation, which is usually a bar across the top of the page. Leave less important content for the secondary navigation.

By including only links to the most essential pages in their navigation, Our House has ensured that their website is intuitive for their users to browse.

The Takeaway: Including the most pertinent content in your navigation will make it straightforward for users to find the information they want, increasing the likelihood they’ll stay on your website for longer.

Why It’s Important:

The navigation on your homepage will be crucial to your users’ experience of your website.

Placing the navigation bar on the top of your page ensures that all visitors can easily spot it and use it to get to the information they’re looking for, which will keep them on your site for longer.

How It’s Done:

A top bar navigation is standard for most websites, so most builders should allow you to easily place the navigation at the top.

In fact, many will have it set as the default!

The Lakewood Service League has included a navigation bar at the top of their page. The bar is featured in a contrasting color so that it’s easily distinguishable from the rest of the website.

The TakeawayThe very top of your website will be the part users spot first. Include the navigation there so that it’s readily accessible.

7. Keep Titles Short and Simple

Why It’s Important:

Your navigation has one purpose and one purpose only: to get visitors to the pages they want as quickly and easily as possible.

Keeping the titles on the navigation bar short and simple will ensure your navigation is scannable for users so they can get to the desired content without a second thought.

How It’s Done:

All navigation titles, including those in drop-down menus, should be no more than two or three words.

Additionally, make sure that you’re using language that’s easy for users to understand. Avoid flowery language or jargon; your titles should reflect the information on each page as clearly and accurately as possible.

McLean Project for the Arts has kept all navigation titles to just one word apiece. Their titles are simple and straightforward, which allows their users to get around their site with ease.

The Takeaway: Keeping titles short and sweet ensures that users will know exactly where to click to access the content they want.

Why It’s Important:

While they might not include links to pages as important as those featured in your primary navigation bar, drop-down menus still play a key part in how well users are able to get around your site.

To provide the best user experience, your sub-navigation should be just as clear and intuitive as your main navigation.

How It’s Done:

Keep your drop-down menus to two levels or less. Use text that’s large enough for users to read and leave ample space between titles to prevent your menus from looking too cluttered.

Include a hover feature that highlights text as users run their mouse over it, so they can stay oriented with where they are in the navigation.

Women In Toys’ drop down menus are clear and simple, providing their website visitors with a user-friendly browsing experience.

The Takeaway: Keep drop down menus minimal and to a minimum so that they’re easy for users to navigate.

9. Provide Multiple Ways to Get to Key Content

Why It’s Important:

Not all visitors will approach your website the same way, and different methods of navigation will be intuitive to different visitors.

By including multiple ways to get to key content on your site, users are more likely to find and land on the content they want.

Furthermore, providing multiple pathways to the same content subtly lets browsers know which pages are most important to your organization.

How It’s Done:

Determine which pages users are most likely coming to your site for and which you’d like to highlight (hint: it’s probably similar to your top navigation!). Then, think about where else you can link to these pages logically and organically.

Consider adding a search bar so that visitors who come looking for certain pages can find them without searching through a menu.

The erie neighborhood house‘s website includes a top navigation bar and features large buttons, both of which direct users to the most valuable and important pages on their site. This page leaves no confusion around how donors can access the information they’re looking for.

The Takeaway: Providing multiple pathways to key pages highlights the most important content and increases traffic to those pages.

Nonprofit Website Layout and Look Tips

10. Make the Cause Clear

Why It’s Important:

Your website is the digital face of your nonprofit’s brand. When people land on your site, you want them to know immediately what it is you’re all about.

The design will be the first thing that users notice and have a reaction to, so it’s important to make both the fact that you’re a nonprofit and your specific mission apparent from the outset.

How It’s Done:

Design your website with the cause at the forefront of your mind.

Make sure to include a concise but vivid blurb about your mission and to feature a compelling, cause-related image (ideally one that’s original to your organization) at the top of your page.

Islamic Scholarship Fund  makes their mission and the impact of their nonprofit immediately clear.

The Takeaway: Make sure visitors know exactly who you are by incorporating language and images about your cause and mission into the design of your homepage.

Why It’s Important:

The top left of the header is the first thing that visitors will see when they land on your page.

Including the logo there orients them with your brand and lets them know that they’re interacting with an organization they trust right from the beginning.

Plus, when it comes to web design, featuring the logo in the top left of your header is standard. Some users might even expect it!

How It’s Done:

This one is pretty straightforward!

Just keep in mind that it’s also standard for your logo to link back to your homepage. That way, visitors will always have a convenient and intuitive way to get back to home base no matter which page they’re on.

Women In Toys includes their logo in the top lefthand corner on all pages of their website. The organization’s design establishes consistency and ensures that browsers will constantly be reminded of the Women In Toys brand as they’re surfing the site.

The Takeaway: Featuring your logo in the top left of the header is a design standard that guarantees your supporters will always remain aware of your brand as they’re browsing your site.

12. Update Your Website Every 2-4 Years

Why It’s Important:

The design of your website is the first thing your supporters will notice, so it plays a huge role in how they perceive your organization and whether or not they trust you.

A poorly designed and out-of-date website can cause you to seem less credible and authoritative.

How It’s Done:

Every 2-4 years, evaluate your website to make sure it’s in keeping with the current trends. It can be helpful to look at other nonprofit websites to get an idea of what’s modern in the sector.

Additionally, it’s best to design as proactively as possible. While website design trends will naturally change, try to stick with what’s tried and true to avoid having to update as frequently or make as many major changes.

Women in Toys’ website got a major overhaul so that it would look more modern and credible to their visitors.

The Takeaway: Updating your organization’s website every few years means it will always appear fresh, modern, and authoritative to your supporters.

13. Keep It Simple

Why It’s Important:

Not only does using a simple layout keep your website looking modern for longer (that means fewer updates!), but it also provides users with a better experience.

A design that’s too ornate can look cluttered and make it more difficult for users to access the information they’re seeking.

How It’s Done:

As tempting as it can be, resist the urge to cram your website with fancy design elements, images, and large blocks of text. As you design, ask yourself: Is this piece of content necessary? Does it provide users with something of value? Only include it if the answer is “yes.”

You should leave plenty of white space around your content to create the most impact and give users’ eyes a break.

Our House has designed their website with simplicity in mind. Notice how they’ve left plenty of white space to highlight key content. Their browsers should have no problem navigating the site!

The Takeaway: A simple and streamlined website will be easier for your users to navigate and easier for your organization to maintain.

14. Be Consistent with Branding

Why It’s Important:

Branding ensures that all aspects of your website are consistent, which is key to establishing authority and building trust with your supporters.

Think about it: when your website is consistent, visitors will always be sure that they’re interacting with your nonprofit, no matter what page they land on.

How It’s Done:

If you’re using a website builder to construct your site, set all defaults to be consistent with your brand.

You should use a color scheme that reflects your logo and limit your color choices to 3 or 4 max. Make sure to use the same, easy-to-read font throughout (sans serif fonts work best for web) and that the color of hyperlinks fits in with the rest of your design.

If you need to build webforms, many CRMs can generate branded forms and incorporate them into your website.

Even the erie neighborhood house’s donation form is clearly branded, establishing consistency and supporter trust across their website.

The Takeaway: Your website is all about your organization. Make sure that it always reinforces who you are by keeping consistent branding throughout.

15. Use Compelling Images

Why It’s Important:

When you use them strategically, the right images can be incredibly impactful when it comes to illustrating your work, spreading your message, and raising awareness of your cause.

Plus, images tend to be more eye-catching than text, so they’re a great way to grab your supporters’ attention and keep them engaged.

How It’s Done:

The most vivid and relevant images will be those taken or created by your organization. They should either be emotionally compelling (think: an image of those you serve) or informative (think: an infographic breaking down one of your articles on a topic related to your cause).

Just remember to keep visuals to a minimum; cramming too many onto a page can reduce the impact and be distracting.

McLean Project for the Arts has spiced up their news page by adding vivid images. The images they’ve included add visual interest to the page and illustrate their mission and projects in a compelling way.

The Takeaway: Images can make your website more striking and easier to digest. To avoid overusing images, double check that every image you include provides the visitor with something of value.

Nonprofit Website Content Tips

16. Develop a Content Strategy

Why It’s Important:

Content is the substance of your website and will be key to marketing your organization and appealing to your donors.

Developing a content strategy ensures that all content is cohesive and consistent with your brand and goals. Plus, when donors feel like there’s an intention behind your content, they’re more likely to be swayed by it.

How It’s Done:

To develop a content strategy, start by asking: what goals do we hope to accomplish with our website? How do we hope to frame our organization, work, and cause to get to these goals?

Once you have a few goals in mind, think about what content you can include and how you can structure your content to reach the ideal outcome.

California Teacher Development Collective has put a lot of thought into their content strategy. They have a curated section of resources for their teachers that are written within the context of modern day culture and current events to help teachers navigate and adapt their teaching practices for modern times

The Takeaway: Determining a content strategy before you build your website ensures that everything you post will be directed and cohesive.

17. Prominently Display Your Donation Button

Why It’s Important:

Chances are, many visitors are coming to your website to make a donation. Having to search around for a donation button can frustrate potential donors and deter them from actually submitting their contributions.

Feature your donation button in a prominent place, so there’s never any uncertainty (or missed donations)!

How It’s Done:

When placing your button in spots around your site, always display it prominently and title it clearly. Don’t forget to include it in the top navigation, too, so that it’s accessible from all pages.

To make your button even more eye-catching, use a standout color and consider changing the language from the generic “Donate Now!” to something more specific to your organization.

Nonprofit Website Prominent Donation Button Example: The erie neighborhood house Page

The Takeaway: When you feature your donation button in prominent spots on your website, you’ll never miss out on an online donation again!

18. Feature Multiple Calls-to-Action

Why It’s Important:

Calls-to-action (CTAs) help you to build relationships with your supporters by letting them know how they can interact with your organization further.

Featuring multiple CTAs throughout your website provides current donors with additional engagement opportunities. It also enables those supporters who might not be ready to donate but still want to support you to get involved with your organization.

How It’s Done:

The first step to creating calls-to-action is to figure out which actions you should request from your supporters. While asking for donations is probably the most popular option, you should include various opportunities to account for different supporters’ preferences.

When placing CTAs on your website, make sure to feature them prominently and use concise, clear, and urgent language so they’re as compelling as possible.

Women In Toys has featured multiple calls-to-action on this page. They give their users the option to register for their event, learn more about the speakers, and subscribe to their email newsletter. This page should appeal to many supporters’ engagement preferences.

The Takeaway: CTAs play a crucial role in the online stewardship process and allow your supporters to choose their own involvement.

19. Take a Donor-Centric Approach

Why It’s Important:

When supporters get to your website, they aren’t really looking to learn about your organization; they’re looking to learn about how people like them became involved and made a difference.

Furthermore, your organization wouldn’t get very far without the help of your generous donors. They deserve to be highlighted on your website!

How It’s Done:

Consider creating a page on your website dedicated to donors and stewardship where you can highlight the contributions that helped your organization make big strides.

When telling your organization’s story, share how your donors and volunteers played a part in getting you to where you are today.

One easy way to tell if your website is donor-centric is if you count more uses of the word “you” than “I” or “we”.

International neighbors charlottesville has a page on their website called “know your neighbors” which highlights both the people the organization is helping, as well as a section to spotlight the impact of each of their volunteers

The Takeaway: Donors are the true heart of your organization. By centering your website around them, you’ll provide them with the information they want and give them the recognition they deserve.

20. Highlight Organizational Events

Why It’s Important:

Frequently updating your website is important to maintaining your credibility, and one of the easiest ways to do this with your content is by posting about current events within your organization.

Not only will posting about events let donors know what’s going on at your nonprofit, but consistently featuring new content also makes your organization appear more relevant. If you’re not updating, supporters might misinterpret it to mean you aren’t interested in communicating or even that you’re inactive.

How It’s Done:

Promote upcoming events by maintaining an events calendar, and document past events so you can share current organizational news with your supporters.

For example, soon after an event is over, you could have one of your staff members or volunteers write a short article about it that includes photos of your team and attendees enjoying themselves.

Chicago Cultural Alliance has dedicated a page on their website to their events. Including this page enables them to update their website regularly to keep their donors engaged.

The Takeaway: Keep your content current by posting about events. When prospective donors see all of the fun times you’re having, they’re sure to join in on your good work!

21. Make It Engaging With Multimedia

Why It’s Important:

Including multiple forms of media on your website provides you with the best chance of capturing your supporters’ attention and keeping it.

Furthermore, people have different preferences when it comes to how they receive information, so multimedia will ensure all of your bases covered.

How It’s Done:

While most of your content will either be text or photos, think outside of the box to come up with some creative ways you can use media to share your information and bring your website to life.

Videos and sound clips are always popular options, but if you can make your website even more interactive (for example, you could include surveys, quizzes, maps, virtual tours, etc.) you’ll strike gold!

The Arc has taken multimedia to the next level by including an interactive map on their website. This feature not only adds interest to their site, but also allows users to easily locate their local chapters.

The Takeaway: Using multimedia will help your website stand out from the crowd and will keep your donors actively engaging with your content for longer.

22. Create a Media Kit

Why It’s Important:

Media attention is great for your organization, because it can help you reach more potential supporters and get the word out about your work and cause.

Creating a media kit ensures that, if someone does choose to feature you in the media, your organization will always be framed in the way you want.

How It’s Done:

The best practice is to assemble a media kit that includes materials such as information about your organization and cause, original quotes, case studies, photos, etc. Then, upload it to your website as a downloadable resource.

A strong about us page can help members of the media write the best possible story about your organization. Make it clear and easy for the press by providing a designated media contact for them to reach out to.

Erie neighborhood house has a page full of designated contacts for their programs. By having a publicized designated media contact, they are making media coverage more probable for their nonprofit.

The Takeaway: A media kit makes it easy for media figures to represent your organization the way you’d like to be represented.

Neon Websites

Interested in redesigning your website? Our Neon Websites team can help build you a custom website to build your nonprofits digital presence

Join the discussion in our Slack channel on connected fundraising

Looking to become a more connected nonprofit leader?

Join 73,000+ of your peers getting industry news, tips, and resources straight to their inbox.