Skip to main content
NationBuilder Theme Gallery
to enhance your visual story

An organization's story incorporates the common bond that draws people together and the current action needed to achieve its mission. Articulating your story is fundamental to gathering new supporters and achieving your mission. As Lyndsey Hrabik pointed out in a recent post on Nonprofit Hub, your website design should be part of your storytelling process. Whether you're just beginning a redesign of your site or want to spruce up an existing site, you'll find it easy to accomplish with NationBuilder.

Visual Design

A homepage should incorporate both images and words to introduce your organization's focus. Consider using a header image to help focus interaction with the site. You can add a header image at Site Settings > Header image. 

You can keep the information on your homepage dynamic by adding the page tag "homepage" to other pages on your site. Snippets of those pages will be added to your site's main page. Alternatively, some organizations use featured content sliders on their homepage to highlight different areas of their website. 

Within Site Settings, you can also set a favicon, logo, and background image. Be sure to check the public theme guidelines for the recommended size for each of these image types within the theme you're using. 

Incorporating visuals into your site design and pages will really help increase engagement with your site. It's best to use images of your organization in action, especially on your homepage. This will provide people insight into your organization, by giving them a peek at what it's like at your physical location. You can also use images to tell the visual story of your work.

Lyndsey Hrabik points out that Charity: Water does a stunning job of having images tell the story of their organization, starting with the first featured content slider on their site:

Charity Water Visual Example

Notice that they didn't explain that one cup was dirty water and the other was clean water - they kept the copy minimal and allowed the visual to tell part of the story. And the copy is fully focused on impelling you to take the action desired - giving $20. This is a rather sophisticated use of visuals and copy, which has a stronger impact emotionally.

Include visual elements on every page.

It's really important to include something other than text on every new page you create for your site. You can easily add a photo to a page, or embed a Flickr slideshowInstagram feed, or YouTube video.

Have limited visual resources and on a tight budget? Try a Creative Commons search for images. Be sure to follow the attribution requirements for the image you choose.

Organize your site with top nav, sidebar nav and page tags

Clear navigation takes into account who your audience is. If you have several discrete audiences - funders, partners and clients for example - you could create top navigation for each of them. To include pages in a drop-down menu, include the page in the top nav and then in the page settings, go to the section "This page is a subpage of." When you start typing in a page slug, you'll get options of pages that begin with the character or word you've typed in. 

SubpageInput.png

Using this page setting, you can easily move pages between categories when redesigning your website. 

The parent page (top-level page of navigation) will be included in the drop-down menu by default. To turn this off, go to Website > Site settings and uncheck the box next to "show parent in nav drop down."

The sidebar nav can include up to three large buttons that connect to specific pages in your site. You can add these buttons from the Supporter nav menu. Additional navigation is available in the sidebar when a supporter is logged in. This is particularly useful for areas of your website where people who are already engaged in your site might want to get involved.

Page tags offer an additional way to navigate your site. They can be added to any page of your site and when a visitor clicks on a tag at the bottom of a webpage, she'll be shown snippets of all pages that include that page tag.

Remember to update social media settings

Social media settings can be updated for every page on your site and we recommend doing this. You can update the default tweet, add a descriptive blurb that will be displayed in search results and when the page is shared on Facebook, and choose what visual you want to be shown with your page. This last option is particularly relevant because if there is no image saved here, your site's logo will be displayed by default. All of these settings can be updated from Settings > social media.

Additional Resources:

A 'visual revolution' is changing the way we communicate

Theme gallery

How to create and edit web pages

Adding excerpts to the homepage

How featured content sliders work

Including images on a webpage

Include a Favicon in your site

Embed a Flickr slideshow

Embed Instagram

Embed YouTube

Optimizing your content for social media

Share this post

Recent posts


Be the first to comment

Wrap code snippets in <code></code> tags.
Please check your e-mail for a link to activate your account.