Blog Insights
2020 Design Trends: the Nonprofit Edition

Digital design continues to make strides as we enter a new decade. Here is our take on the biggest design trends that can make an impact on mission-driven organizations in 2020.

This year — and this decade — we see the continued emergence of some trends we saw develop in 2019, as well as some new and exciting evolutions of tried-and-true design standards. Our team at Forum One has been keeping a close eye on the industry, and we think the following four areas are ripe for innovation and impact this year.

1. Asymmetrical layouts will draw users into content.

Asymmetrical layouts have been gaining in popularity for a few years now in part as a reaction to overused approaches to web design, such as the three-column grid. The problem with the “standard” approach of mainstage with a slider (a.k.a., a carousel) and three columns is that the design starts to look templated and users end up skimming too quickly over the content.

 
Large companies as well as nonprofit organizations, such as Quartz and The Nature Conservancy, are using this new approach to help guide their users down a page. Nonprofits can take advantage of this approach to create interest and draw a user’s attention to key calls to action throughout the scrolling experience.

Design Trends

Quartz.com uses asymmetrical layouts to feature illustration and keep the user’s eye moving down the page, encouraging them to scroll.
2020 Design predictions

Nature.org features a broken grid to help the call to action stand out from the content above it.

Why does this excite us? Well, our design team loves to break the rules (but don’t worry, we always learn the rules first). For many years it has been hard to get creative with layout in web design but, given the rise of technologies such as CSS Grid, designers and engineers are now able to push beyond the basic to develop asymmetrical layouts and related approaches such as broken grids and the use of overlapping elements.

2. Split scrolling experiences will increase flexibility and enhance movement.

In the spirit of trying new layout ideas, another very effective approach that draws from editorial roots is split layout or scrolling. This effectively allows content to be broken into two separate columns. While this isn’t a new pattern or trend, it can now be done much more smoothly and effectively, which is why we see this approach becoming even more popular in 2020. It allows organizations to feature content more prominently on the screen, with more options for organizing a lot of content. Additionally, it can aid in telling your story, since the website becomes less of a strictly-linear experience. Users can delve in and interact more easily with the content they want to learn more about, and designers can play with the vertical scroll, while leveraging the horizontal canvas within each pane. 

Starbucks does this well by splitting the canvas screen to keep the branding and call-to-action (to sign up) present throughout the experience, while allowing the user to explore and learn more on the right-hand side:

2020 design examples
The Starbucks reward page leverages both the vertical and horizontal space while keeping the call to action prominent.

However, one of the first examples of this we can remember seeing remains one of the best: this story of Jack Nicklaus’s life demonstrates to perfection the ways in which nonprofits can capitalize on this trend. By combining stunning imagery with impact stories, tables, statistics, and timelines, the two-sided panes effectively take the user through key highlights and in-depth narratives to tell a compelling story.

design example
The 50/50 layout allows the Mr. Columbus site to feature a map to explore on the left, while going more in-depth in the scrolling experience on the right.

3. Microinteractions will bring life to the digital canvas.

Often overlooked, micro-interactions are becoming essential to creating a great user experience. Often referred to as “the delight” of the experience, they are a series of visual cues that let the user know that an action has occurred. 

There are several easy ways to capitalize on microinteractions to add more delight to your nonprofit digital product. The simplest way is to carefully consider how content appears on the page. Do titles and content fade in as a user scrolls, or do they move? What does it feel like for a user to interact with your content? Perhaps a microinteraction could take place as they select items on your site? Microinteractions are not only a visual enhancement, but feedback and confirmation for a user that they have successfully completed an action. 

These types of movements can even extend to how one page transitions into another. A curated design experience can seamlessly take a user through the journey of selecting an action, to seeing the result appear. In addition to movement, the page can even change color to signal to the user that a change has taken place. IDEO uses a subtle background color change as a user explores their content, while Konform (see below) takes it a step further by using solid blocks of color to move content from one place on the page to another. 

2020 nonprofit design trends
Konform has a unique approach to page transitions that help the site appear highly curated and innovative.

Though it could appear superficial and focused solely on how a site looks, this trend can go beyond the visual design of the page to allow organizations to capitalize on their users’ attention. Nonprofits can take advantage of order and hierarchy to direct users’ focus towards key actions and content. A user’s instinct is to look at the last thing to move on a page, so what happens if the last thing to appear is your donate button? Or a call to download a report? Taking advantage of microinteractions can lead to increased conversions, in addition to breathing life into a previously-static website.

4. “Branimation” and illustration will create delight and evolve brands.

Motion, animation, and illustration are becoming a huge part of branding, and we hesitate to even call it a trend. Here at Forum One, we’ve been known to toss around the term “branimation”— not only because we love a good portmanteau, but because we see branded animation, motion design, and illustration as a key part of the online brand experience in 2020 and beyond. 

Visual delight is easy to capture with motion, and the software to create even simple animations is becoming more and more accessible. The key part of this trend, however, is the branded element. What’s new is taking that extra step to apply your brand’s look, tone, and messaging to add an extra level of finesse to motion. Even beyond the web, organizations can extend their brand with animation and motion throughout physical spaces with screens and other digital displays.

design trends for nonprofits in 2020
This branded animation from MailChimp breathes life into a standard statistical graphic.

Though large tech companies like Google and IBM are prioritizing motion design by hiring up animators and designers in droves, the commercial sector doesn’t have to be alone in capitalizing on this trend. It’s long been known that movement can drive conversions more than a static image or page, and motion design could be the next step in helping nonprofits succeed at this.

Looking ahead: keep your design eyes sharp.

The trends we’ve outlined above are just a few of the many ways we see interactive design evolving over the next twelve months. Our design team is starting to implement many of these features into our work with nonprofits, foundations, associations and government agencies. Interested in seeing these come to life on your organization’s digital platforms? Get in touch today!

Are you ready to create impact?

We'd love to connect and discuss your next project.