By Jeff Kline

Blog

12 Ways To Freshen Up Your Nonprofit Website

Tuesday, August 5, 2014

I’ve used the “web design is like fashion” analogy a lot, so let’s try something new.

homemade american apple pieWeb design is like apple pie. Apple pie is amazing when it’s fresh out of the oven, but as time passes, it grows stale and eventually goes bad.

Nobody likes old apple pie.

Web design trends age in the same way. What was hot and cutting-edge one year will lose its “fresh” factor a few years down the road.

And suddenly, visitors are wrinkling their nose at your website.

That’s why we are constantly on the lookout for the latest web design trends and how they can be applied to bring your website up to date.

In this post, we’ve put together a list of ways to use the latest trends (and some eternal design techniques) to freshen up your nonprofit website design!

 

1) Single point of focus on your home page

One of the biggest mistakes I see nonprofits make is trying to put EVERYTHING on the homepage.

Don’t overwhelm people by cramming your homepage full of news listers, scrolling marquees, Twitter feeds and banner ads.

Instead, give your visitors a single point of focus, such as a large image with a headline. Pair that with a simple navigation menu that allows visitors to decide what information they want to see. Don’t throw everything at them at once!

When you first land on the Cabarrus Regional Chamber of Commerce website, the main point of focus is a large image rotator.

Cabarrus Regional Chamber of Commerce

 

2) Better images in your image rotator

Even if you have a clean, minimalistic homepage, placing the wrong kind of image in your image rotator can hurt your design.

The images in your rotator should not look like promotional flyers. Text should be limited. Clip art should be nonexistent.

Go for high-quality photography. If you need text, a simple headline or caption will do.

The Evelyn Rubenstein JCC of Houston website always has great images in its rotator.

Evelyn Rubenstein JCC of Houston

 

3) No more than 7 main menu items

Keep your navigation menu simple by limiting it to no more than 7 items. More than that, and you’ll be subjecting your website visitors to information overload.

Read more about website navigation best practices.

 

4) Flat design elements

Nothing modernizes a website like flat design.

You don’t even have to go fully flat. Incorporating just a few flat elements can really freshen up your site.

On the Bowling Green Area Chamber of Commerce website, the clean lines of the flat navigation menu really pop against the photo background.

Bowling Green Area Chamber of Commerce

 

5) Modern color palette

There are certain colors that are guaranteed to make your website look outdated. Standard HTML colors like “blue” and “aqua,” for instance, give off a strong 1998 vibe.

Standard HTML colors

 

For a more modern color palette, try one of these techniques:

• Minimalistic – Predominantly white or light gray, with a bright accent color.

minimalistic

• Muted – Vibrant colors that have been toned down through desaturation.

muted colors

• Monochromatic – Using different variations of a single hue.

monochromatic colors 

 

Remember, it’s important to be consistent with your brand. If your brand colors themselves are outdated, consider making some minor tweaks to modernize your brand.

 

6) Smoother rollover effects

Rollover effects are nothing new, but they’ve certainly evolved over the last couple of years.

In the past, a rollover effect on a button was created by swapping out one button image for another. Today, CSS3 can be used to create fade-in transitions and a slew of other effects, giving rollover effects a much cleaner and more fluid look.

For an example of some very slick rollover effects, check out the Alper JCC’s navigation menu.

Alper JCC website

 

7) Larger font size.

It’s funny that this is a new trend, because it seems so obvious:

Larger font is easier to read.

(Cue face palm.)

Improve the readability of your website text by increasing the font to at least 14 pixels—and don’t be afraid to go as high as 18 pixels!

 

8) Mobile-friendly design

Responsive design is a necessity. When your website is responsive, it adjusts to fit on all different types of devices, making it easy to view on not just desktops and laptops, but also smartphones and tablets.

In January 2014, for the first time ever, Americans used mobile apps more than PCs to access the Internet. That’s why optimizing for mobile isn’t just extremely important—it’s crucial.

Check out South Central Kentucky to see how this economic development website adjusts to fit different devices.

South Central Kentucky economic development 

 

 

9) Professional fonts

Some fonts are just off limits. Two particular fonts—Comic Sans and Papyrus—are frequently abused.

Even if your nonprofit has a fun-loving personality, you should still be using professional-looking fonts. If you want something casual, try Ubuntu or Open Sans. You can also check out Font Squirrel’s list of Hottest Web Fonts.

 

10) Full-width layout

A full-page design makes a big impact.

Instead of containing your web design to that skinny box centered in the browser, go full-width. Let the design breathe. Make your visitors go “Wow.”

The Piper Glen homeowners association website has a gorgeous full-page design.

Piper Glen

 

11) Subtle patterns (or better yet, none)

The days of wood grain and brushed metal backgrounds are over.

People are viewing your website with their smartphones, and realistic backgrounds just don’t look good scaled down to phone size.

There’s also a continuing shift toward minimalism. That’s why we usually suggest a solid background over a pattern.

But if you do want a pattern, choose something subtle. Vector-based patterns are cleaner, so they translate better onto mobile devices.

For some wonderful free patterns, check out subtlepatterns.com.

 

12) More uniformity

When you’re trying to create a clean, minimalistic look for your nonprofit website, uniformity is important.

So dealing with those inconsistent sponsor logos can be challenging.

The solution? If all of your sponsors’ brand guidelines will allow it, you can convert all of the logos to grayscale and make them the same size. This looks really clean and subtle.

Here’s what the sponsor bar looks like at the bottom of the Bowling Green Area Chamber website:

Bowling Green Area Chamber sponsors 

 

Social media icons also come in different colors and shapes. Use a monochromatic icon set to create a simple, consistent look.

This is what the social media icons at the bottom of the Accrisoft website look like:

Accrisoft social media icons

 


 

Why Does An Up-To-Date Web Design Matter?

That’s a fair question. And I have two answers for you:

First of all, web design isn’t purely cosmetic. Many of the tactics listed above deal with the usability—making it easy to navigate to different areas of the website, making text easier to read, making your site mobile-friendly.

Second, it’s important to remember that your website is your nonprofit’s online headquarters. Visitors will perceive your website as a direct reflection of the quality and credibility of your nonprofit. What will they think if they see a shabby, out-of-date website?

Make sure your web design creates the wonderful experience your visitors deserve, and the positive first impression your nonprofit deserves!

 

free website checklist signup

 

Image source: Homemade American apple pie (CC BY-NC 2.0)

Comments

comments powered by Disqus

Need Support?

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