The Ultimate Nonprofit Website Design Guide
A strong web presence is an essential asset for any nonprofit organization, but the internet is a crowded place. An admirable mission alone isn’t enough to catch the scattered attention of potential online donors. So organizations must make sure their websites are fully functional, provide a positive experience for visitors, and look good.
An effective nonprofit website has several functions to fill:
- Communicate your mission, history, and values to supporters
- Motivate online visitors to donate with smart design, quality content, and easy-to-use tools
- Accept and process online donations
- Record and report on crucial engagement data, like transaction information and email subscriptions
- Create a positive impression of your nonprofit’s brand for both new and return visitors
It’s Redstart Creative’s goal to help you begin the website design journey with as much information as possible. Let us help you walk through the process from start to finish.
Find Inspiration
Whether you have an existing site or are looking to create your first one, finding good examples of nonprofit websites is a great way to see what you like and learn what’s possible. Here are examples of websites our team has picked out as being visually interesting and sure to inspire you.
South Baltimore Learning Center (SBLC) is a community-based non-profit organization providing literacy education, life skills training, and career preparation services to adult residents in the area. SBLC came to Redstart for help finding their brand.
Redstart drafted an SBLC story, which included the history of SBLC, explanation of their approach to adult education, and highlights of how they make a difference. We then created a new logo and print materials to support SBLC’s rebrand and new communications strategy. Finally, our team developed a new website, incorporating the new story, logo and messages.
Redstart Creative was hired by Chimes, a not-for-profit organization that assists people with intellectual and behavioral disabilities, in multiple US states, to revitalize its brand (a new logo and tagline) for the first time in more than 50 years. We also used the STORY Process to update the organization's messaging and redesign their website, consolidating many different entities under one brand. We continue to support Chimes with monthly digital strategy and print projects such as their annual report, spring and fall magazine, direct mail and event pieces
The National Trust for Historic Preservation is a privately funded, nonprofit organization that works in the field of historic preservation.
The simplicity of this website that allows us to focus on the historical treasures they are saving is what makes this site a great example. The menu is well organized and the overall subtle color scheme with the pop of orange in just the right places tells the user to come in and join them to help save more historic places.
Website Design Best Practices
When exploring an update for your nonprofit website design, it is important to consider leading practices for digital marketing so that your website will serve you well over time. Creating a new website can represent a considerable investment of capital and human resources, so if you incorporate best practices it will increase the longevity of your new site.
Your website design will depend on the content, and the content will depend on your audience. The Cardinal Rule for any successful website is to provide useful, relevant information for your audiences. We like to couch it in these terms: Remember that your website is about them (your users) and not you. If you approach your website design process with that Cardinal Rule in mind, you will be on the road to success.
To build a website that is about your users, you should follow some helpful guidelines:
- Identify your primary audiences, narrowing it down to two or three key constituencies.
- Create an editorial calendar to help make sure you are planning to publish fresh content regularly.
- Leverage existing content already being created within your organization. This will help you keep your website close to your organization’s mission.
- Post curated content to help increase the number of voices heard through your site.
Notice that these guidelines focus on content and not strictly on design. This is because your website design should largely be guided by the content you’ll be publishing. If your audiences require information, your site will look more like a news site.
If your audiences need you to provide inspiration, then you'll probably need more photos and narratives about your organization’s successes.
For sites that cater to potential funders, it may need to look more business-like and provide numbers and metrics quantifying the challenges your organization faces.
No matter who your audiences are, it is important to recognize that the site navigation and the homepage serve two very different purposes. This actually describes another leading practice for nonprofit website design: Make sure you understand the specific purpose for every element of your site and make sure the design of that element serves its purpose.
Make sure your site navigation is straightforward. This is so that users who know what they’re looking for can find what they need within two clicks. The navigation is a more utilitarian and functional element of your website design, where creativity should be kept to a minimum.
The homepage, on the other hand, is where we create engagement and introduce your organization to new visitors. This is where you want users to see themselves and recognize how your organization can help them or help others that the user cares about. You can also convey your organization’s personality on the homepage using design and be a bit more creative about how information is presented.
Hiring a website designer
Hiring an individual designer or a design firm for your nonprofit website can be an overwhelming process. For many nonprofits, budget is the primary consideration when considering a website design proposal, but this should really be secondary to relationships. You need to hire people who fit well with your organization’s culture and with whom you can build a good working rapport.
There is a cost associated with onboarding new partners so switching designers frequently can cost more in the long run, even if the designers you hire have the lowest prices overall. The familiarity that develops over time with your organization’s brand and culture is valuable and nurturing an ongoing relationship can be useful in producing consistent communication.
Here are some considerations beyond budget and relationship to keep in mind:
- Experience: How long has your prospective partner been in business? Do they understand the nonprofit sector well? What is their track record for building long-term client relationships?
- Portfolio: Is their portfolio populated with projects that appeal to you? How do their showcase projects compare to your particular project in scope and complexity?
Any designer working to build nonprofit websites should be adept at listening and experienced in navigating nonprofit boards. You need a partner who can understand your particular challenges and who can bring solutions to the table that will ultimately help your organization grow and thrive. Listening is a key component to achieving those goals.
The 3-step Website Design Process
Developing a website can be a long, time-consuming project. This is why Redstart Creative breaks down the process into three key phrases. By breaking down the website development process into steps, each phase can be focused on intensely as part of the whole.
Planning
The planning phase lays the foundation for the website development process. Although many people think that the design component is the main part of the website development process, a robust planning phase sets the project up for success.
During this phase, we dive deep into the functionality of the site. Some of the items that are discussed during this time are:
- Site map
- Must-have functionality features
- Design requests/wishes
- User experience
- Site architecture
A well planned website means that you’ll be able to make tweaks and updates to the site in the future without a need for a complete redesign. For nonprofits this is key, because as your strategic goals shift over the years, you’ll need to update the messaging and refresh your imagery.
Design
The design part of the web development process is the most visual part of the process. This is when we develop the look that your users will actually see on your nonprofit’s finished website.
Our website design process is broken down into two parts:
Homepage Design
We start with the homepage design since it is the first thing people will see when they come to your website. We start first with a wireframe. A wireframe is a static image that maps out where we think various items should be placed. Your homepage is designed to drive engagement and entice people to scroll through to find out more. Here's the wireframe of Redstart Creative's new website
Once the wireframe is approved, we move on to a mockup of the homepage. This brings the wireframe to life. Redstart creates and presents two (2) homepage designs that will be based on your goals, functionality, and user-experience requirements.
Inner Page Design
Once a homepage design is chosen, we extend the design to responsive versions (showing two break points for tablets and phones) and six internal page templates.
- Internal page with sidebar
- Internal page without sidebar
- Blog or news page
- Calendar page
- Gallery page
- Custom 404 page
Development
In this final phase, the website “comes to life.” During this phase, we construct a fully functional site on our development server, creating a powerful marketing and outreach tool for your organization. We incorporate all functionality that was discussed during the planning phase, insert your content, and proof our work.
We then have a “first look” meeting where you get to see the first draft of the website. Over the next several weeks we work with you to make final edits and launch the site.
We pride ourselves on providing a beautiful finished product that is easy to use and manage behind the scenes as well — so staff and/or volunteers will be able to easily make edits to the website.
Popular Plugins and Integrations
There is a popular saying in the WordPress community, “There is a plugin for that”.
Plugins make it easier for users to add features to their website without knowing a single line of code. There are WordPress plugins to improve SEO, boost performance, add contact forms, social media buttons, create galleries, and so much more.
Plugins can be small and offer just one feature (like duplicating a page or creating a folder system). Or they can also be quite robust and act as their own platform as well (like BuddyPress and WooCommerce).
There are thousands of WordPress plugins available for free at the official WordPress plugin directory. Aside from free plugins, there are tons of amazing commercial ones available from third-party companies and developers.
Here are some of our favorite and most useful plugins for nonprofit websites.
Events
The Events Calendar
The Events Calendar is the most popular events calendar plugin on the WordPress platform. It’s active on over 700,000 sites and has kept up a solid 4.5-star rating over that popularity. One of the best free event calendar plugins for WordPress, this plugin is backed by a strong team that provides excellent customer support.
If you need more features and options such as creating virtual events, recurring events, ticket sales, publicly submitted events, new views, Facebook event integration, etc., then you will likely want to download their pro-add-ons.
Event Espresso 4 Decaf
Event Espresso is a slightly more heavy-duty WordPress event calendar plugin that’s more geared towards organizations that need to manage tickets/registrations, including support for payment gateways, event check-in, ticket scanning apps, and more.
Ticketing and registration are where Event Espresso 4 Decaf really shines. This is great if you’re selling registrations to camps, classes, conferences, courses and more
For ticketing, you get unique features such as:
- Multiple ticket pricing options for one event, with each ticket getting its own quantity limit, etc.
- Integrated single-page checkout and lots of payment gateway options
- A dedicated app to scan tickets
- Promo codes to offer discounts
- Tax administration module to collect taxes
- Event check-in list
- Waiting lists for tickets
You also get features to manage registrations like:
- Custom event registration forms
- Custom email confirmation emails
- Option for one person to register multiple attendees
- Feature to store attendees’ contact details and add private notes (kind of like a lightweight CRM)
- Private events that are only visible to certain users
If your nonprofit does a lot of ticketed or registered events, this may be the right solution for you.
Forms
Gravity Forms
Redstart Creative uses Gravity Forms for all of our client websites. It offers a clean navigation for building and managing forms on WordPress. Not only that, but Gravity forms also allows integrations either natively or through third parties such as Zapier or a custom plugin. So you can sync your form entries with your CRM (Salesforce, Luminate, Bloomerang, Network for Good, and more) and your payment processor (Paypal, Stripe, Blackbaud, etc)
Email marketing
Mailchimp
Mailchimp is great because the free plan allows up to 2000 contacts and you can send up to 12,000 emails per month. If you need to go to a paid plan, MailChimp provides nonprofits with a 15% discount. MailChimp boats robust marketing automation which makes sure your emails get to the right people at the right time. Some other features include: being able to target your customers based on behavior, preferences, and more
GetResponse
Get Response offers the largest discount to nonprofits with 50% off the plan they choose. The email marketing beginners’ package is $15/month to send emails up to 1000 subscribers.
You’ll be able to use one of the 500+ designed templates or create your own using the drag & drop or HTML code editors. You’ll also be able to use the stock image library to complete the professional look you want and edit your email campaigns in mobile preview so you’ll know that your campaigns will always be optimized. GetResponse also integrates with most popular social media platforms, including Facebook, Twitter, and LinkedIn, so you can easily share your messages.
Social Media
Social Network Auto Poster (SNAP)
SNAP is our favorite tool for posting your content to social media platforms. It allows for automated posting to just about all of the major social networks, and some of the more minor ones too. Not only that, it integrates with other blogging platforms (like Blogger and Tumblr) for added functionality or cross-posting between sites. Facebook comments can even be automatically imported as WordPress comments!
Website design from a to z
Accessibility means the ability of a website to be used by people with disabilities. This includes visually impaired visitors using screen readers, hearing impaired visitors using no sound, color blind people, or those with other disabilities.
A Content Management System (CMS) is a software application that can be used to manage the creation and modification of digital content. At Redstart Creative, we use WordPress as our primary CMS for delivering high-functioning websites for our clients.
Customer Relationship Management (CRM) is a technology product for managing an organization’s interactions with supporters and clients. Popular CRMs for nonprofits include Salesforce and Network for Good, among many others.
A Domain is your address on the web. It's the information that customers type in to find your website. It's what comes after the www. in www.domain.com. A domain name can be any combination of letters and/or numbers up to 63 characters. The official domain name extensions are .com, .net, .org, .biz, .info, .us and .ws
A Framework in WordPress is a set of tools that allows developers and site administrators to create custom designs and individual page layouts without having to compose code from the ground up for each new project.
A Header refers to the part at the top of a page that is typically repeated on most pages, often including elements such as a company logo, site title, navigation and other elements that may be desirable on each page.
A Page in WordPress contains static content. Pages can be arranged in hierarchies to help create order, and pages are published without a date or time assigned.
A Post in WordPress is a tool for publishing dynamic content and is most commonly used for populating a blog or news section. Posts can have categories and tags assigned to help end users organize content based on their particular interests.
Parent, Child, or Grandchild Page are terms used to describe the hierarchy of static pages on a site. The labels are based on familial relationships and can help quickly convey a particular page’s place in the site’s hierarchy in conversation.
Responsive Web Design is a design technique used to craft websites that are user friendly regardless of what platform they may be viewed on. This includes desktop computers, laptops, tablets and smartphones. Responsive websites detect the screen size they are being displayed on and adjust the layout and content to provide an optimal user experience for whichever device (or screen size) the user happens to be on.
A Theme in WordPress is the code that governs the specific design and functionality of each particular site.
Usability refers to how easy it is for a visitor to your site to use your site in its intended manner. In other words, are navigation, content, images, and any interactive elements easy to use, functioning the way they were intended, and that your intended target visitor will not need any special training in order to use your site.
A Web Host, is the physical location of your website on the Internet, an online storage center that houses the information, images, video, and other content that comprises your website. Websites are hosted, or stored, on special computers called servers. When Internet users want to view your website, all they need to do is type your website address or domain into their browser. Their computer will then connect to your server and your website will be delivered to them through the browser.
The WordPress Media Library is where all images and downloads are stored in the WordPress CMS.
Are you ready to start designing your new website?
Redstart Creative provides websites, branding and digital marketing to organizations empowering positive change in the world. With our experienced team and proven track record we'll help you design an amazing nonprofit website.