Top 10 Web Design Trends for Nonprofits in 2015Thursday, June 4, 2015
Maintaining an up-to-date website design is an important task for nonprofits. To help you stay on top of the latest trends, we've handpicked the 10 web design trends that we believe to be most valuable for nonprofits.
The major design trends of 2015 have one big thing in common—they are all a result of the rapid rise of mobile web browsing. With so many people using their smartphones and tablets to visit websites, designers must create websites that provide a great user experience on all devices and screen sizes.
Things to consider include load times, scalability, the format in which information is presented, and general usability in navigating and interacting with a website.
Ready to discover exciting new design trends for your nonprofit website? Let’s dive in!
1) Less clicking, more scrolling
Long-scrolling web page designs have become popular in the past year, and we can thank mobile devices for that. After all, using your finger to scroll down a page is a lot easier than trying to tap tiny buttons and navigate to a new page.
The key to a clean long-scrolling design is organizing content into distinct sections or panels. There are a lot of great examples of long-scrolling websites at One Page Love, but one of our favorites is the website for YES Prep's Redefine Possible campaign.
A big advancement in the world of website development is the use of CSS3 to create interesting transition effects. This allows you to add interactive elements like popup boxes, hover effects, and animations to the website. These small “micro-interactions” add personality to a website, and allow you to create an enjoyable user experience for your visitors.
The Global Chamber website, which also happens to be a long-scrolling design, is chock full of engaging animations and hover effects as you scroll down the page.
3) Collapsible/Hidden Menus
If you use a mobile device on a regular basis, you are probably familiar with the “hamburger” menu button. This icon has become the universal icon for a collapsable menu, and it usually appears in mobile apps and the mobile views of responsive websites.
Now these hamburger menu icons are appearing in desktop design, as well. The benefits are a simpler, cleaner design. This is especially helpful if you have a lot of top-level menu items but don’t want to crowd the top of your website.
There is some controversy surrounding the hamburger menu button—whether or not people will recognize the icon for what it is, or whether they will even bother clicking to see what’s hidden. However, in the age where scrolling is more convenient, perhaps the menu is actually becoming less important, and how you promote content on a long-scrolling homepage is what matters most. If that's the case, then a more discreet menu is a pretty good idea.
The sleek website for JCC of Dallas is a great example of this—the latest and most important content is promoted on the homepage, and the rest of the navigation can be accessed when you need it.
4) Card Based Design
Web Design Ledger describes cards as “packages of interactive information, usually presented in the shape of a rectangle. Just like credit cards or baseball cards, web cards provide quick and related information in a condensed format.”
Presenting content within a card can make it more interesting—it’s fun and interactive, and you can display different types of content (text, images, buttons, etc.). Cards also make content more digestible. A small amount of information is presented on the surface, but visitors can dig deeper (or flip the card over, open a pop-out menu, etc.) to see more.
Our own portfolio utilizes card design—each "card" represents a website, and hovering over the card reveals options to open a preview or visit the website.
Another great example of card design is the directory of vacation rentals on Airbnb. Each card tells you some basic details about the rental, gives you the option to favorite it, and allows you to scroll through images of the property.
5) Static Hero Images
Another new trend emerging is a static hero image instead of a rotator. One reason is because it helps with load time, which is important as many visitors are viewing your website on a mobile device. A static hero image is implemented best with little or no text involved. It’s less about advertising, more about evoking emotion.
The Maine Thing Quarterly nails it.
6) No Containers
To create a clean look, many designers are eliminating unnecessary containers.
For example, on the Greene County website, there is no container around the menu. Instead, the menu text sits cleanly and simply on the photo background.
Greene County’s full-width background image is also an example of being without a container. Instead of being contained within a box in the center of the screen, it expands all the way to the edge. We call this “letting the design breathe.”
Some elements of course require a container (card design is all about containers, after all), but backgrounds and pieces of text don’t necessarily need to be stuck inside a box.
7) Material Design
In 2014, flat design was all the rage. But this year, Google introduced a concept that they call Material Design. Rather than completely eliminating dimensions (as in flat design), Material Design attempts to subtly mimic how things look and interact in the real world. Material Design recognizes that sometimes flat design is too flat.
In the examples below, notice the subtle differences in the "Click Me" buttons:
8) Emphasis on typography
Typography is starting to become a focal point in many designs. And thanks to an ever-growing Google Fonts library, there are more options than ever. In 2015, try incorporating a more stylistic typeface into your nonprofit website, whether it’s a large headline font (like the big ampersand on James Hsu's portfolio site) or a light-hearted accent font (as seen on the Mohave County Economic Development website) . Handwritten and brush stroke fonts are particularly popular today.
9) More Vector-Based Graphics
The perfect high-resolution photograph has the ability to create a strong emotional connection with visitors. That’s an important aspect of website design that we won’t argue with.
At the same time, it’s important to remember that many visitors will be viewing a scaled down version of your website on their mobile devices. Even high-quality photographs don’t always translate well on a smaller screen.
For some elements, such as smaller call-to-action boxes, you might try using vector-based graphics instead. These types of images are more scalable and load more quickly.
10) Diagonal Lines
Last year, we wrote about the rise in geometric elements. Rather than the typical square-shaped grids, designers got creative with hexagons and other non-traditional shapes.
This year, the geometric design trend continues on an even larger scale. In additional small elements like headers and buttons, you'll see websites where the entire layout has been slightly skewed and slanted. Diagonal lines are a common theme throughout the Charles County Department of Economic Development website—this trend can be seen in the blue and green overlay, the menu, and as you scroll down through the different panels of content.
As you can see from this list, many of the top website design trends in 2015 are direct results of the rise in mobile browsing—static images load faster on mobile devices, vector graphics scale better, and scrolling is a lot easier than clicking. Other trends, such as diagonal lines and a heavier emphasis on typography, are part of the continuously evolving desire to create fresh design elements. And as we experience continuing advancements in web technology, I believe micro-interactions and card-based design will become even more prevalent.
Before you go, check out our SlideShare deck on the top web design trends of the year!
If your nonprofit is planning on a website redesign, I encourage you to incorporate a few of these current trends into your new website. And if your nonprofit website already incorporates some of these trends, we'd love for you to share them with us in the comments section below!