January 27, 2012

5 tips to help you create visually stunning websites

  • Buffer
  • Buffer

Image by Angela Waye for BigStock

How to turn your nonprofit’s website into an engaging, high-traffic destination

Target audience Nonprofits, NGOs, cause organizations, social enterprises, businesses, brands, Web publishers, Web programmers.

Guest post by Al Lunt for TechSoup

Holding the interest of new visitors and encouraging them to explore the website is important for nonprofits for a simple reason: They are an idea, an encapsulation of your nonprofit’s mission and goals. And that requires careful consideration of the visual factors that will keep users on your website long enough to absorb your intent.

According to award-winning multimedia designer and producer Mike Schmidt at mowhawkstreet.com, creating an “emotional connection is often the driving force behind these sites, but is also the driving force behind most marketing.” With limited financial resources and regular reliance on volunteer help to build and maintain websites, nonprofits face a daunting challenge in creating sites that can make those emotional connections with users.

Below are five basic tips to help nonprofit Web builders create visually enticing websites. Successfully implementing them could turn a mediocre but usable nonprofit website into an engaging, high-traffic site through enthusiastic word of mouth.

Create a clutter-free home page, encourage exploration

1 A cluttered home page that is overwhelmed with too much text or too many graphics may drive away prospective donors. The home page is often the first impression of a nonprofit that a user sees. It should never be thrown together haphazardly just to establish a Web presence. Network for Good, a nonprofit that provides fundraising ideas for other nonprofits, recommends striving “for simplicity and clarity in design. Your home page should be attractive and engaging, but uncluttered.”



Girleffect.org targets younger people sympathetic to the plight of young girls in developing nations. The home page above the fold has only four navigation choices: Home, Learn, Give, and Mobilize. Scrolling below the fold reveals the call to action “3 Things You Can Do Right Now” – Donate, Spread the Word, and Learn. Fewer choices encourage exploration.

Operation Warm


Operation Warm
distributes new winter coats to needy children in the United States. Above the fold the home page offers three tabs that contain drop-downs with other selections. Scrolling below the fold “What We Do” appears and provides the mission statement in detail. The nonprofit’s title and central picture communicate the mission without ambiguity.

Create brand recognition with a logo

2 Having a logo that reinforces the intent of the nonprofit or serves as a memory aid for the cause helps make a website memorable. Branding through a logo is part of the emotional experience you want users to have when they come in contact with your organization. Creating a logo is an investment and should be a high priority budget item. Ideally a nonprofit logo should be instantly recognizable, convey a sense of the nonprofit name or mission, and remain effective in a variety of colors or mediums.

Feed the Children


The simple Feed The Children logo of a child with outstretched arms holding a food bowl instantly generates an emotional appeal for support. When linked with the tag line – “It’s who we are. It’s what we do.” – it creates a powerful and memorable image.

The Michael J. Fox Foundation for Parkinson’s Research


The Michael J. Fox Foundation for Parkinson’s Research uses clever graphic lines that give the illusion of a fox’s body, streaming tail and pointed ears alongside the name of the nonprofit. The selection of the reddish-orange color of the logo and typography also reinforces the name of the charity and its mascot – the fox.

Wounded Warrior Project


Some logos work powerfully in stark black and white. The Wounded Warrior Project logo of a soldier carrying a buddy off the battlefield is easily recognizable from its outline, although you can’t see the soldiers’ faces. The grayscale banner graphic of rotating photographs of servicemen and women reinforces the intent represented by the logo – taking care of wounded warriors.

Create a consistent visual theme

3 Maintaining a consistent visual theme on a website helps unify the site and makes navigating it easier. Help establish consistency by selecting colors and fonts that complement the nonprofit brand and ensure they are maintained on all pages. Maintaining the same look on the website and mirroring it in promotional materials will reinforce your organization’s brand identity. The visual theme should reflect the culture of the organization and at the same time be targeted to attract the donors, volunteers, and supporters your organization is trying to reach.

History pin


History Pin, the 2011 Webby Awards winner in the charitable/nonprofit category, strives to “get generations talking more, sharing more, and coming together more often.” It integrates Google maps, timelines, and uploaded personal photographs to create archives of places, events, and people’s stories. With the look being part scrapbook and part school project, it is designed to appeal to both young and old and ultimately encourage inter-generational dialogue.

Create a video presence

4 Compelling video tells the story and helps hold the attention of website visitors. Although a nonprofit website can exist without video, it must compete with those that do. Creating a video that tells the nonprofit’s story can be an expensive undertaking if professionally done. But, it can also be done using simple point-and-record cameras with minimal editing for a less polished look that still tells your story. However, the payoff cannot be measured just in website hits. A well-done video can extend its utility beyond the website itself as a centerpiece of a nonprofit’s marketing effort.

Below are two examples of videos from larger organizations. You can also view samples of low-cost, short videos from TechSoup’s annual Digital Storytelling Campaign.

charity: water

One nonprofit that does a particularly good job with a video centerpiece is charity: water, which has built 4,000 wells to bring clean, safe water to more than 2 million people in developing nations. charity: water’s video “Water Changes Everything” uses powerful infographics to emotionally engage the viewer in the impact that clean water has around the world.


The nonprofit group Witness not only uses video to tell their story – video is the story. Their tagline “If a picture’s worth a thousand words, what’s a video worth?” powerfully communicates their goal: to use video to open the eyes of the world to human rights abuses. Its call to action not only seeks donations but also volunteers to translate and edit videos of human rights abuses from around the world.

Create an emotional connection using still photos

5 Use static or rotating photographs to tell the story of the nonprofit and put a face on the beneficiaries of donor involvement and contributions. Avoid stock photos that might be used elsewhere because you want your photographs to be part of your branding. Unlike video, still photos allow the user to focus on a moment in time that is frozen, allowing contemplation and creation of a lasting connection.



Kiva has a mission to connect people through lending to alleviate poverty. Through micro-loans as low as $25, they help create opportunity around the world. The power of the website is that the donor can see the face and read the story of each loan recipient, creating an emotional connection.

Susan G. Komen for the Cure


The Susan G. Komen for the Cure website incorporates a Flash photo banner that can be scrolled to see pictures and read stories of volunteers, breast cancer survivors, and their family members. This connects the user to the cause, its beneficiaries, volunteers, and other donors.


Experienced Web designers might recommend against using website templates because they can limit flexibility or have a cookie-cutter look. However, small nonprofits may want to consider them if their in-house design capability is lacking or they cannot afford to outsource their Web design requirements. Many nonprofit templates are available online in various content management systems, including popular WordPress themes. While not always ideal, starting with a template can provide a basic site that can often be customized later to incorporate more of your organization’s signature branding and feel.


Creating a visually enticing nonprofit website does not require a significant budget. However, the goal of improving your website as your budget allows is a worthy one. Consider these few tips as a starting place to help you evaluate your existing website for areas where you can improve how you tell your nonprofit’s story with enticing visuals.

Additional resources

This article originally appeared at the TechSoup Learning Center. It is republished with permission.

Al Lunt, a TechSoup guest contributor, volunteers as president of the board and webmaster for Operation Bandanas, a Christian nonprofit dedicated to providing encouragement and spiritual armor to our Servicemen and women. He is pursuing a Certificate in Technology and Communication at the University of North Carolina School of Journalism and Mass Communication.
Print Friendly, PDF & Email

2 thoughts on “5 tips to help you create visually stunning websites

  1. The Creators Project is a globetrotting art installation that’s a collaboration between Intel, Vice and the numerous artists whose work is represented. You may have heard about it during last year’s Coachella music festival, when Chris Milk created a stunning visual with glowing beach balls during the Arcade Fire set. The project uses social media to blast event information, but also to distribute videos and pictures of the exhibits, to live-tweet the events and to enhance the experience for the the art consumers.