By Jeff Kline

Blog

6 New Web Design Trends for Nonprofits To Embrace In 2016 (+ 3 Past Trends That Are Here To Stay)

Thursday, April 28, 2016

One of our favorite things to do on this blog is keep you, our loyal readers, up-to-date on the latest website design trends for nonprofits. We know you're busy managing members, recruiting volunteers, promoting events, and fundraising like crazy—and the last thing you have time to do is click through hundreds of websites in search of what's "in" and what's "out."

That's why we did the research and put together this nice and tidy list of 6 new website design trends that we believe nonprofits can (and should!) embrace. At the end of this post, we've also snuck in 3 not-so-new-but-still-very-important design elements that we want to make sure are on your radar.

If you're planning on redesigning your nonprofit website in 2016, consider incorporating some of these trends into your design!

 

1) Motion

Thanks to cool technology like CSS3, Javascript, and HTML5 Video, websites no longer have to be flat, lifeless images on a screen. Now, we can incorporate more motion into websites through animations, videos, loading effects, page header transitions, hover/rollover effects, and more. Motion, particularly motion in response to a user interacting with a site, brings a website to life and creates a delightful and engaging experience.

To learn more, check out the article that Econsultancy wrote on 14 motion design trends, or take a look at the Los Angeles Chamber of Commerce website (and notice how some elements have interesting load effects that occur as you scroll!).

LA Chamber icons loading

 

2) Hero Videos

While we're on the topic of motion, let's talk about hero videos. 

Hero images (images that fill the entire home screen) have been popular for a couple of years now, but in 2016 we have begun to see a rise in the use of hero videos. A hero video really brings a website to life, and it can be a powerful tool for evoking emotion.

The hero video on the Summit Association of Realtors homepage grabs your attention immediately.

Summit Association of Realtors homepage video

 

3) Ghost Buttons

Minimalistic, less clunky than typical buttons, and similar to line icons, ghost buttons are a cool new trend that creates a modern look. They also provide a delightful effect when you hover over them and they fill with color! The Together We Feed website includes some nice ghost buttons.

Together We Feed ghost buttons

 

4) Typography + Photography

When an interesting typeface and a beautiful photograph are combined, magic happens. These two design elements work together to craft a powerful message that you can’t ignore. Many nonprofits, including Greater Grads, are using text superimposed over photography to create stunning homepage hero images.

Greater Grads website - typography on top of photography

 

5) Clicking vs Scrolling

Last year, we wrote about the rise of scrolling over clicking. But now, many nonprofits are opting for homepages that require zero scrolling. The benefit of this is that all of the information you really need is right in front of you. You can quickly use the menu to click to where you want to go, rather than searching for it down a looong page.

The website for 2=1 International is a great example of a site that doesn't make you scroll.

2 Equal 1 website

At the same time, long scrolling homepages have benefits of their own. Scrolling keeps your audience engaged in interacting with your website, particularly if animations and parallax effects occur as they scroll.

The long scrolling homepage works perfectly for East Valley Jewish Community Center.

East Valley JCC long scrolling homepage

 

6) Supergradients

A couple of years ago, flat design dictated that gradients were old news, but ultra-vibrant hues have brought this design element back into style. Some people are calling these brightly colored gradients “supergradients.”

The Greenville Chamber of Commerce website uses a couple of supergradient backgrounds:

Greenville Chamber green supergradient

Greenville Chamber blue supergradient 

 

3 Past Design Trends That Aren't Going Away Anytime Soon

Some trends come and go quickly. They might prove to be disruptive to the user experience, or they might just be a flavor of the week that soon becomes dated. You never know until you try them out and see if they work.

On the other hand, some design trends from the past couple of years have stood the test of time and proven to be extremely effective in improving the usability of a website. Below, we have listed 3 web design trends that aren't anything new, but are still incredibly important.

 

Responsive Design

Unless people suddenly start throwing away their iPhones and tablets, responsive design is here to stay. According to an article by Smart Insights, 80% of Internet users now own a smartphone. Make sure your website is mobile friendly—you don't want to miss out on your mobile audience!

The Mandel JCC has a really nice responsive design:

Mandel JCC responsive design

 

Flat Design 

Another trend that emerged in response to mobile web browsing, flat design continues to be an important design element. Ridding your design of outdated gradients, shadows, and textures gives your website a clean and crisp look that displays much better on small mobile screens.

Google Material Design, an evolution of flat design that incorporates subtle gradients and shadows back into design, also continues to rise in popularity.

On the website for the Business Development Board of Palm Beach County, flat design is used for the quick link boxes, calendar dates, infographics, and more.

BDB Palm Beach flat design

 

Fixed Navigation

As we mentioned above, a long scrolling homepage is still a great layout for keeping your audience engaged. If you do have a long scrolling homepage, you should consider fixed navigation (where the menu "sticks" to the top of the browser and stays with you as you scroll down the page). This keeps the menu easily accessible at all times, and greatly improves the user experience.

On the Overland Park Chamber of Commerce website, the fixed navigation menu shrinks when you scroll, so it takes up less of the screen but is still right there when you need it.

Overland Park Chamber fixed navigation

 

Feeling inspired yet?

I don't know about you, but researching and writing about design trends always makes me feel inspired. 2016 has been an exciting year so far in web design—motion effects and hero videos are bringing websites to life, supergradients are adding pops of vibrant color, and the combinations of typography and photography seem to be endless. We've also come to realize that responsive design, flat design, and fixed navigation are here to stay.

In 2016, we encourage you to incorporate these design trends into your nonprofit website to maintain a fresh, modern appearance and provide an excellent user experience.

Comments

comments powered by Disqus

Need Support?

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