Web Design Tips for Small Non-Profits & Volunteer Organizations
This is the second article in a series on web design for small non-profits and volunteer organizations. To read the first article in the series, which discussed the key steps to take before diving into design, click here.
Non-Profits and volunteer organizations are often faced with a unique challenge when redesigning their websites. Like other websites, they need to clearly communicate the mission of their organization, have a clear call to action, and engage their audience. However, they often need to do so without any dedicated design staff or expertise.
We’ve pulled together some information your organization should consider after you’ve gone through the steps of thinking through content and structure, and are working on design. The primary theme in each recommendation is prioritization – how can you use graphics (or the lack thereof) to influence your viewers to take the action you want them to take.
1. Purpose
The most important information people need to grasp when visiting your website is your organization’s purpose. Visitors need to know who you are, what you do, and why it matters.
Don’t make visitors dig around to find out why you exist, instead be upfront about it. This means you should include a concise and clear statement on your home page that communicates your purpose. The tricky part of this is that your purpose statement not only needs to encapsulate what your organization does but it also must inspire and excite the visitor.
In addition to making your organization’s purpose clear on the home/landing page of your site, consider that each page of your website needs to have a clear purpose, and fulfill a specific need for your website users – in the most effective way possible. Good web design always caters to the needs of the user. Are your web visitors looking for information, entertainment, some type of interaction, or to transact with your business?
Make sure you are clear on the purpose of each page of your website, and design the page with appropriate types of interaction (information, entertainment, transaction) for your users’ needs.
2. Calls To Action
Page views are nice, but it doesn’t do any good to have people visit your website if they leave without giving your organization a second thought. You want people to get involved with your organization as a result of visiting your site, whether that means donating money, attending your events, or volunteering their time.
Effective websites tell visitors exactly how to engage by offering strategically-placed calls to action (CTAs). A CTA is an image or text that prompts visitors to take a specific action, such as subscribing to your newsletter. Creating and highlighting opportunities for visitors to take action is vital to increasing your organization’s reach and audience and helps put viewers on a path towards greater engagement with your mission.
To do this, your CTAs need to be compelling and noticeable. To make them stand out try using strong, contrasting colors and text that shows the value of taking the action.
3. Hick’s Law and the Paradox of Choice
You’ve likely experienced this countless of times while ordering at a resturant, selecting your health care plan, or purchasing a new mattress – the more choices you are presented with, the more difficult it becomes to choose an option. This is known as Hick’s Law, which says that for every additional choice you offer a person, the time required to make a decision increases. This is similar to Paradox of Choice – the more choice you give people, the easier it is to choose nothing.
In relation to website design, the more links, pages and choices you give your users, the more difficult they will find it to use (and might not use it at all). This law really speaks to the importance of eliminating unnecessary options a user has when visiting your website.
To make a better web design, eliminate distracting options throughout the design process. Instead, figure out what responses (interaction, information) you want most from your users and prioritize those responses by making them the only choice you give a user on the page.
4. Striking Visuals
In case you haven’t heard the news: people don’t really read websites. Or at least not until they are convinced by other cues that the content is valuable to them. This means titles, headers, and visuals are critical to engaging people visiting your website.
One of the best ways to capture and retain a user’s attention is with striking images. Photos and videos can convey more information than text in a shorter amount of time. When used correctly, images can make an otherwise text heavy page easier to decipher and connect users to the value of your website’s content more quickly.
The colors, imagery (and pace of movement in videos) evoke a certain mood or feeling that even the most dramatic font, or pages and pages of text, can never convey. Featuring a big, colorful, emotion-inducing image with a compelling call to action can increase engagement. In today’s terms, a prominent full-width banner image at the top of a webpage is called a “hero image”.
Take a look at these examples of some great hero images and reflect on what they make you feel. Do you find yourself wanting to smile back at the picture of Michael on the buildOn website? Could you feel the dry heat of the dessert from the image on the Nature Conservancy’s website? What image would capture the emotional and physical feeling of your organization’s mission?
5. White Space
White space (also called ‘negative space’) is the portion of a page without text or pictures. It’s the space between graphics, columns, and lines. White space is not merely ‘blank’ space — it is an important element of design. This may sound like a Zen koan, but the negative space actually is what enables your other visuals to exist at all.
Put another way, a page without white space, one crammed full of text and graphics, runs the risk of appearing unreadable because people don’t know where to look to find what they need, and won’t bother to read through everything to find what they’re looking for.
Leaving a significant amount of white space on a page will allow your users to intuitively understand the hierarchy of information on the site, be it type, colour or images.Make the best use of the space you have on each page, and users will engage with your website in the ways you intend.
Wondering how to apply these newfound tricks of the trade to your own website? We recommend checking out some highly rated non-profit websites first – because like we say, a picture is worth a thousand words. Here are links to a couple of “Best of 2016” Non-profit website roundups:
- Every Action’s 100 Best Nonprofit Web Designs of 2016
- Top Nonprofit’s 20 Best Nonprofit Websites – 2016 Edition
We suggest visiting some of the nominated websites and looking for clear calls to action, use of HD Hero Images, and the use of white space to direct your eye to different places on the page. From there, feel free to try out these new skills on your own website. If you are a neighborhood association within the Coalition boundaries, contact your staff liaison to see how we can help as well.