By Jeff Kline

Blog

My Favorite Things: 13 Website Design Elements

Thursday, January 31, 2013

Functionality should be a top priority when designing your nonprofit website. Incorporating elements like fixed navigation and call to action buttons helps visitors use your site to learn more about your organization. 

A strong website design isn’t just about enhancing the look of your website. It’s just as important to use web design elements that improve the functionality of your site, making it a more effective tool for doing business.

So, for Part 3 of the series, here are a few of my favorite things…about nonprofit website design.

responsive web design1) RESPONSIVE DESIGN

In 2012, smartphones outsold personal computers, and tablets have become a mainstream computing device. That’s why it’s so important that your website features a responsive design that adjusts to fit any size screen.

2) FIXED NAVIGATION

Prevent your visitors from getting lost on your website by implementing a fixed navigation menu. As visitors scroll down the page, a fixed navigation menu will still remain visible at the top of the webpage. Your visitors will have access to all areas of your website at all times.

Check out Snowbird.com for a great example of a website featuring a fixed navigation menu.

3) MINIMALIST WEB DESIGN

“Less is more” is the mantra of all great website designers. Showing only your single most important content will intrigue visitors and compel them to dig deeper into your website to learn more.

4) LARGE HEADER

One of the best ways to achieve a minimalist design is to feature a large header on your homepage. The best large headers consist simply of an image with a quick caption.

With only about two seconds to capture a visitor’s attention, a large header featuring a stunning image should do the trick!

Take this concept a step further by turning your large header into a large image slider.

5) IMAGE SLIDER

Chris Craft Image Slider

An image slider allows you to display each of your most important pieces of content, one at a time. You can easily maintain a dynamic design by switching out the images and messages on a regular basis to promote events, programs and products.

The Chris Craft website features a full-page image slider that displays stunning photographs and captions promoting new products.

6) INFOGRAPHICS

INFOGRAPHICImages can also be a helpful tool for communicating information. By blending content and design, infographics help the viewer remember information better after visiting your site.

CASA Santa Barbara’s infographic serves as a mini annual report and a direct appeal for donations.

7) CALL TO ACTION BUTTONS

Your website is more than a great design and an information hub – it’s also one of your most important sales tools. Use Call To Action buttons on your website to encourage visitors to click a link to one of your online forms.

The Center for Building Hope has two good examples on their main page, including a ‘Click Here’ button for first time visitors to fill out a contact form, as well as a “Donate Now” button.

Center for Hope

8) ONLINE FORMS

When visitors click the “Donate Now” call to action button on the Center for Building Hope website, they navigate to a landing page that contains an online form. Visitors are asked to provide the requested information (amount and billing information) in order to complete the desired action (make a donation). The Center for Building Hope’s form requests minimal information, increasing the likelihood that people will take the time to complete the form.

online form

Online forms allow you to:

  • Automate processes, such as transactions
  • Collect contact information about your prospects
  • Track leads as they move further down the sales funnel

If your website provider does not allow you to set up unique forms, try using Wufoo, a free online form builder.

9) SOCIAL MEDIA ICONS

Make it easy for website visitors to find you on Facebook, Twitter and other social networks. In your header or footer, include social media icons that link to your social profile pages. 

Encourage visitors to share your content with their social networks by adding Share buttons to all of your pages. You could even embed your Twitter or blog feed onto your website to add a fun dynamic element to your site.

Watch this video to learn about Accrisoft Freedom™ social media features: 

10) WEBSITE EYE TRACKING

It’s important to use eye-tracking software to evaluate your website at all stages of the design process. Eye-tracking software uses heatmapping to display the natural path of a visitor’s eyes travelling over a webpage. The heatmap represents which components of your website are most attention-grabbing.

Measure the visual components of our own website with Attention Wizard or Crazy Egg, two cost-effective eye-tracking programs.

Below is the heatmap generated when we ran eye-tracking software on the Marcus JCC of Atlanta website.

marcus jcc atlanta heatmap website eye tracking

11) INTERACTIVE ELEMENTS

Create an enjoyable, intuitive user experience by incorporating interactive design elements into your website. The Greater MSP website, for example, features an interactive image rotator. When visitors hover their mouse over each image in the header, a rollover effect occurs, causing a caption to appear. As they move the mouse to the edge of the image rotator, arrows appear. Visitors can click the arrows to scroll through each slide of the rotator.

Greater MSP website

Greater MSP also features a unique interactive Google Map. Accrisoft built a custom functionality that enables visitors to filter locations on the map based on category. (And Greater MSP has the ability to easily add new categories to their map.) Click here to check out their interactive map.

clientuploads/map.png

12) COLLAGE FORMAT

Another great element of the Greater MSP website is the collage format used to give the visitor a comprehensive view of the organization. The collage format is a new website design concept we began to see in 2012, and I think this will continue to grow in popularity in 2013.

A collage format allows Greater MSP to use many images to project many messages without being chaotic. When creating a collage, it is important to use images and colors that complement one another.

13) FOLLOW YOUR NORTHERN STAR

Steve Jobs quoted Pablo Picasso many times, saying, “Good artists copy, great artists steal.” While I find this saying a bit harsh, I do believe that there is rarely an element of design that is completely new, but rather, that all design stands on the shoulders of prior art. 

Find a Northern Star – a “mentor website” that always has a stunning, updated design – and look to that website for guidance. Check out www.awwwards.com for a collection of the web’s greatest website designs.

***

These 13 website design elements aren’t just my favorites because they’ll make your nonprofit website look good. I shared this list of design elements because, by implementing all 13, you will greatly improve the marketing success of your website.

Get a jump start on improving your website with these 8 ways to improve your site over the weekend

UP NEXT: CONTENT MARKETING FOR NONPROFITS

I hope you have enjoyed this series of My Favorite Things about internet marketing, Google tools and website design. Next week I’ll begin a new series on Content Marketing for Nonprofits, which will include topics like content strategy, keyword research, and content SEO.

Comments

comments powered by Disqus

Need Support?

Submit a Ticket
Back to top
Ready to Get Started? Contact Us for Pricing