In the past, we've touched on ways to help your non-profit develop its online presence. Now we're back with our 2017 favorite examples (in alphabetical order) of what a great non-profit website looks like and what makes it stand out. Our hope is...Read more.
Imagine going to a new grocery store and not having a clue where anything is. There are signs, but they’re vague and confusing. Maybe they’re so obscure you don’t notice them at all. Would that make for a good first impression? If you’re anything...Read more.
Every organization has a story. Somewhere along the line, a spark inspired someone to challenge the status quo, and that idea was tempered by milestones to forge the business we see today. What better way to celebrate that history than to put it on...Read more.
Information architecture and page hierarchy can make or break you. Your interface should be designed with your end goals in mind. Website visitors arrive with many levels of literacy, attention spans and 'will' to figure out how to use your website...Read more.
Not to toot our own horn, but I think we make wireframes that are pretty good...and unique. We include some basic design elements to help clients get a clearer idea of what the final product is actually going to look like. This is unusual since...Read more.
In the past, we've touched on ways to help your non-profit develop its online presence. Now we're back with our 2017 favorite examples (in alphabetical order) of what a great non-profit website looks like and what makes it stand out. Our hope is that by emulating these exemplary non-profits, you'll soon be able to provide an even greater user experience for your own site visitors—generating all the support you need!
acumen.org: Acumen’s color palette is energetic and modern. Their use of angled boxes gives a flare of visual interest, further making them seem like a forward-thinking, innovative and compelling organization. Acumen also does of a good job of showing both the qualitative and quantitative nature of their impact through engaging story-telling and simple, yet bold infographics. Their incredibly strong and authentic photography is the final piece that really sets this website apart.
amnesty.org: Amnesty International's website combines news site-like feel with clear nonprofit impact. Their home page uses large, compelling photography with an action-oriented visual language. Their newsfeed allows visitors to filter by topic, region/country, and resource type. Combined with directive and clear iconography, this website takes bold and engaging to a new level.
care.org: Care’s website does a great job of showing visitors the various ways they can take action, get involved and share content. Their site illustrates a campaign focused, impactful layout through the use of engaging infographics with clear calls to action. Care’s bold use of iconography and mapping, takes their visual language to the next level.
charitywater.org: Charity Water's website is well-organized and illustrates ‘hope’ in its truest form. Clear water, happy faces and bright photography are used in perfect balance with simple iconography, impact numbers and well composed calls to action. Lastly, their color palette and typography are both welcoming and approachable and once navigated to, their donate page is simple and unintimidating, making it easy for visitors to support their work.
farmland.org: The American Farmland Trust uses a vibrant, earth-tone focused color palette that feels warm, engaging and modern. They display information in some unique ways such as their navigation dropdown taking the form of a full-page color overlay, their challenge statement is displayed through interactive statements paired with colorful infographics and impact numbers paired with compelling photography. Their internal pages display layers of information on a single page through clear hierarchies and language.
feedingamerica.org: Feeding America's use of bold colors, large photography and unobtrusive text overlays is simple, direct and to-the-point. Their content strategy is excellent—they know their audience(s)— headlines like, “No one can thrive on an empty stomach,” are extremely compelling and give site visitors an engaging introduction to the importance of their work.
gatesfoundation.org: The Gates Foundation website stands out with an extremely clear and well organized site navigation. Though they utilize a more minimalist approach with a mobile-focused, pop-out menu, site visitors are able to quickly and easily expand sub-menus to see the full depth and breadth of this organization. Their typography is also an excellent example of classic and modern, serif and sans-serif well combined for a sophisticated legibility.
girleffect.org: Girl Effect's about page guides you through a carefully crafted narrative. They clearly and directly explain why they exist, what the issue is that they solve and the impact statistics that support their work. Girl Effect’s writing is engaging and easily digestible, inspiring site visitors with their energy, optimism and ambition.
globalfundforwomen.org: Global Fund for Women combines striking visuals with bold color and modern typography, creating an engaging and sophisticated home page. Their ‘grant-making’ ‘voice’ and ‘join’ triad illustrates an ideal content strategy and information architecture—guiding site visitors from understanding their work to a clear call to action. Internally, in addition to traditional monetary gifts, the Global Fund for Women's donate page encourages support in a variety of forms, i.e. cause marketing, corporate matching, etc.
KIPP.org: KIPP’s website utilizes a vertically oriented, color block layout that offers succinct information about their work. Small animations are included to give a sense of light-hearted professionalism. Color overlays, tabbed interfaces and a variety of sliders are used to conserve space while allowing site visitors to smoothly peruse content more deeply.
namesforchange.org: Names for Change has a visually appealing, masonry layout with a unique and compelling interactivity—it truly makes you want to ‘play.’ Their color palette is vibrant, warm and accessible with clear contrast. The site’s simple language and modern typography gives a sense of innovative social change. Furthermore, Names for Change’s use of page overlays rather than click away pages allows users to quickly and effectively absorb information before returning to the main landing page.
nature.org: The Nature Conservancy’s home page is an excellent example of large, beautiful photography, sophisticated typography and a modern layout that is approachable, engaging and has an excellent page hierarchy. Their minimalist use of iconography, combined with a back and forth grid format, ads visual interest without over-crowding the white space. Finally, The Nature Conservancy hosts a carbon footprint calculator as a content offering to drive traffic that may not be as familiar with their work or website.
onedrop.org: One Drop’s website has a sophisticated modernity illustrated through its blue-centric yet warm color palette, action-oriented typography and compelling photography. The site makes good but sparing use of animations, clean and directive information architecture and bold infographics to help site visitors move smoothly throughout the site and engage more deeply.
oxfamamerica.org: Oxfam Foundation’s visual language has a youthful vibrancy all its own. Taking a different approach than similar organizations, their color palette is bright and endearing, using a chunky paper cut-out motif for iconography and typography.
pawschicago.org: Paws Chicago’s home page illustrates well-crafted, meaningful information sharing. Their header bolsters their impact numbers by tying them to navigation right off the bat. Rather than using a slideshow, they have a nice News & Features carousel that highlights import information directly below the first ‘fold’—giving it weight and allowing site visits to jump into what’s new. Continuing down the page, site visitors are given a clear understanding of Paws Chicago’s work is important, what they do and ample opportunities to engage, learn more and donate.
possiblehealth.org: The Possible Healthcare website is a very simple brochure. It does a very good job of staying extremely lean and making good use of 3rd party softwares rather than trying to have the website do its own heavy lifting (Classy for donations, BambooHR for job postings, and clever use of Medium for blog posts and the spreading of their work on a more international platform). A newsletter popup with a compelling photo and tagline captures visitors' attention on Possible Healthcare's site
wcs.org: The Wildlife Conservation Society’s home page is full of bright images of animals, yet still finds a way to give your eyes space to rest along the way. Their left-hand menu is stationary throughout and though it takes up slightly more real estate than a top, horizontal menu, its ‘stillness’ and color palette are welcoming and calm in contrast to the activity of the page content. Internal pages again have bold photography and modern typography with the navigation tucked away into a mobile menu.
By focusing on certain website elements (i.e. navigation, layout, forms, opt-ins, calls-to-action, content offerings, etc.), nonprofits like these have been able to generate swells of interest and support online. If you haven't already, you might consider giving some of their techniques a try!
Imagine going to a new grocery store and not having a clue where anything is. There are signs, but they’re vague and confusing. Maybe they’re so obscure you don’t notice them at all. Would that make for a good first impression? If you’re anything like us, you wouldn’t make a return visit anytime soon.
Now shift that scenario from a store to a website.
The same principles apply. If the navigation isn’t clear and inviting, chances are, you won’t bookmark it to visit again—or worse, you’ll leave without exploring any further. So, what can be done to save our own websites from this fictional fate? Let’s take a look at six organizations with an abundance of navigational inspiration.
EarthJustice uses color-coded horizontal navigation to differentiate informational tabs from calls-to-action. Upon hover, second and tertiary levels drop down in easy to follow menus.
Headlands Center for the Arts also color codes their horizontal navigation, but instead it’s upon hover, where secondary levels are highlighted.
The Bill & Melinda Gates Foundation uses a minimalist approach by containing its navigation within a menu symbol in the upper left corner. Once clicked, vertical categories appear on the left side with dropdown arrows to expose further sublevels.
3. Comedy Central
Comedy Central has a horizontal navigation that changes color and drops down upon hover, displaying alphabetized secondary menus.
AIGA differentiates itself by dropping a semi-transparent gradient over the content, upon hovering over its horizontal navigation. Visitors can focus on navigational options, while still viewing the page they landed on.
This larger full screen overlay is responsive friendly, and gives you the ability to tuck away your main navigation items while still giving them full attention when called upon. A little bit more intense than the AIGA example, but another well designed and engaging option.
Navigation and Donations
You'd be surprised how much navigation can affect the amount of donations that your website receives. To help navigate this, we've put together a comprehensive guide to boosting your organization's online donations.
We demystify the technology and strategies that make it easy to raise more money.
Every organization has a story. Somewhere along the line, a spark inspired someone to challenge the status quo, and that idea was tempered by milestones to forge the business we see today. What better way to celebrate that history than to put it on display?
Your audience wants to connect with you. They want to relate and invest in your success. But to do so, you have to let them in on the narrative. That’s why timelines are so popular in web design right now. With a few clicks, audiences are able to see an organization’s impact through solid, qualitative facts that stick with them. When executed properly, they might even encourage your visitors to become part of your future—but how?
Don’t worry. We’ve searched far and wide for seven of the best tips and examples to inspire you.
Information architecture and page hierarchy can make or break you. Your interface should be designed with your end goals in mind.
Website visitors arrive with many levels of literacy, attention spans and 'will' to figure out how to use your website. If they are not able to find what they are looking for quickly, you've lost them. Start by defining the goals of your page, and what journey you want users to take:
Identify the "who" (stakeholders and target audience). Who is reading the content you are presenting? What do they need to know in 1 sentence.
Identify the "why" (your goals). Why do they need to know this information, giving them a line of context is helpful.
Identify the "how" (functional website requirements). How are they going to accomplish what they came to your site to do. (eg. 'Welcome to site 'X' you are hear to learn about 'Y.' You should learn about 'Y' so that you can accomplish 'Z.' Here are the steps you need to take to accomplish 'Z.')
By setting clear expectations for your users from the start, they will not get lost or confused in their process through your website.
The following is a short list of page elements and a few best practices too make your website's pages easier to read and digest.
1. Effective Headings & Sub-headings
Pages are typically divided into sections and sub-sections.
Each section is usually started with a heading.
Use headings in a hierarchical way.
The hierarchy of headings is limited to five starting with H2 - the most important - and finishing with H6 - the least important.
You should use them in the following way:
The page heading - the title of the page - is always formatted as an H2. It is the only heading on the page that should use this setting.
Use H3 for sub-headings
Use H4 for sub-headings within a subsection that is started with an H3
Use H5 and H6 for subheadings within sections
Align all headings and subheadings to the left as a general rule, unless the design of your website is mobile first and all your headings are centered....either way...
Use sentence case for all heading and sub-headings. Sentence case is the standard approach to using upper and lower case letters, mainly in titles and headings. It is the most legible for all levels of readers and gives them a visual queue that something is a heading (since each word has a capital letter).
2. Succinct Paragraphs
Paragraphs are single blocks of text which flow from left to right, often running to more than one line, and have a single blank line above and below.
Lower literacy readers need chunking, so if it going to take you more than 2 normal length sentences to make your point, consider editing.
All paragraphs should be aligned to the left (the default alignment). Avoid aligning paragraphs to the center or right unless you have designed a site that has intro sections of text that are centered. If you do, only have 1 sentence centered, as a rule it is more difficult to read since English readers are used to reading left to right.
Keep your text short and to the point.
Use bulleted lists with plenty of space between items—this helps slower readers absorb your information more effectively.
3. Text formatting
Within text, there are a number of options available to emphasize text:
Use italics sparingly. It is ok to use for publication titles of course, but large amounts of italicized text is very hard to read online.
Use bold sparingly. For clear emphasis of an idea or sub-heading, it is great, but large amounts again are very hard to read. Plus, you can't emphasis everything!
Use color very sparingly. Excessive use of a different color, for example red, makes it very quickly lose effect and again is just hard to read. If you must highlight an important point in a different color, limit it to as few words as possible and do not make it a habit.
Use all capitals sparingly. Excessive use of capitals can get very annoying very quickly and should be reserved for special cases. Words in all capitals are very difficult to read online and often feels as though you are shouting at someone.
Note: ALL CAPS are a great use case for buttons, main navigation items, and other situations where a single word is used.
Do not underline. As a rule, you should NEVER underline because most browsers make links appear underlined. If you underline text that is not a link, it will only confuse your site visitors.
If you are not a designer, or have not had a designer create a styleguide for you, as a rule, the settings for any table should be as follows: Cell padding = 5; Cell spacing = 0.
Text within cells should be vertically aligned to the top of the cell. This makes it the easiest for people to read the contents of your table by keeping the text from running into itself or floating at random heights within your table (depending on the length of your text).
Not to toot our own horn, but I think we make wireframes that are pretty good...and unique. We include some basic design elements to help clients get a clearer idea of what the final product is actually going to look like. This is unusual since wireframes are mostly used to get a general sense of layout, content, functionality requirements, and heirarchy. Typically, you are not talking about fonts, line weight, use of images, (ie. the visual language) at this stage in a website build.
So, why do we do it this way? Well, we have found that wireframes can be a difficult thing for clients to conceptualize. They understand that this stage is when we are determining the heirarchy of their information and the general placement of content and "calls to action," but if there are not more specific layout details, sometimes it is hard to "see where this is going." Over time, we have gotten more and more detailed with our wireframes so that the final products look more like a grayscale version of the website to be, rather than a simple content map.
Here are some tips if you want to construct a wireframe the Rootid way:
Research. Make sure before you get started that you have looked at websites (ideally with your client) that have similar layout and functionality as what they are interested in. Talk about use of menus, column widths, call to actions, any highlight areas, use of motion, video or imagery done in interesting ways. This intake conversation is probably the most important step. It saves a lot of time down the road if you already know your clients' leanings. Also, we tend to use this as an opportunity to get input from as many stakeholders as possible. By using a nice google spreadsheet with some prompting questions, you can get multiple people's input (and often consensus) before you actually talk.
Start with the Home page, but build with your simplest page (and responsive design rules) in mind. Since we are a mobile first/agile development shop, we build websites beginning with the most basic page layout first and then work toward the more complex elements. However, as a designer, since I am doing the opposite, and I need to be gathering "love it" and "hate it" information as I go. I present 2-3 different Home page layouts in the first round that show not only options in terms of page heirarchy, but also font choice, shape of boxes (ie. are there a lot of rectangular elements vs. rounded edges vs. circles), and size of content pieces. The more options you show now will help move the design phase along more quickly later.
New round = more detail...but be careful not to go too crazy. You do not want to lock youself or your design team into a corner that stifles their creativity later. Keep your wireframes lite and agile. In some of the early iterations I did of these more designed wireframes, I got too into using lots of shades of gray and no textures. Once I entered the design phase, I would find it really hard to invision different home page design options because I had made too many decisions already.
Note: As an agile design/development shop, we have the benefit of designing and building side-by-side so this system of wireframe creation is also much more effecient than if you need to take a more siloed approach where you are passing things off to someone else once they are complete.