Our friends at the Diane and Norman Bernstein Foundation (DNBF) are no strangers to doing good work.

Based in Washington, D.C., the foundation proudly follows its family values, envisioning a world where everyone can socially and economically thrive. They make good on that vision by helping to change the world within their reach, supporting “organizations and initiatives that meaningfully improve outcomes for justice, dignity, and equity, with a focus on the Washington, D.C. area.” When DNBF came to us hoping to craft a visual identity and launch their web presence all at once, we jumped at the opportunity to do some good and meaningful work for them.

Building a Brand for the Web

Prior to our work together, there was no visual brand for DNBF, so we had a unique opportunity to create something from scratch that would communicate to their current and prospective partners that this is an established and trustworthy organization.

We created a brand intended to embody the edges of DNBF’s personality. Using classic colors to create a sense of trustworthiness, but softening them by grounding the brand in a cream tone; choosing a buttoned-up serif, and pairing it with a friendly sans; complementing all of those contrasts with warm, personal photography of their partners. Importantly, we tested all of these elements together early on in the context of a website, which meant the finished design came together in a flash.

An image of three web browser windows, each showcasing a different web page from a non-profit site, all designed by J2

Getting into the Flow with Webflow

When we build brands for our non-profit clients, functionality is especially top of mind. It’s not unusual for the small teams we partner with to not have a designer on staff, so sites for foundations like DNBF need to be clear and concise for every audience and user. Visitors need an easy-to-use, branded experience and our clients need a hassle-free way to manage their content. When it came time to explore development options, Webflow checked all of our boxes.

For the uninitiated: Webflow is a visual design tool that allows its users to design functional websites without needing to know code. Our team had been curious to try out Webflow for a while, and this project seemed like the right fit—so we jumped in to push pixels. Thanks to Webflow’s amazing tutorial ecosystem, Webflow University, we were able to quickly stand up the foundation for the site.

We realized something pretty quickly. While the basics were easy for us to jump into, the depth of content we needed to manage quickly exceeded our internal design team’s expertise. Taking the site into our hands was a great learning experience that helped uncover some insights about the logistics of development, but the details matter. It was time to call in some experts to really bring the site to life.

A Worthy Web Partner

We’re lucky to have the wonderful web and digital creative agency, Paper Tiger, just over the bridge in beautiful New Jersey. We’re even luckier to call them one of our web and development partners. Consider our luck tripled, because Paper Tiger is a certified Webflow partner, making them the perfect fit for developing DNBF’s website.

As we do with every web project, we walked them through the client’s specific needs around functionality and content management, called out interaction notes, and held discussions around recommendations that Paper Tiger brought to the table. The combination of DNBF’s foundational ideals, our shared vision for the brand, and the web team’s expertise in Webflow development, the site was able to come together quickly—and with pixel-perfect accuracy.

Forging Ahead, Pixel by Pixel

Our collaboration with both the Diane and Norman Bernstein Foundation and Paper Tiger was an exciting one, blending together thoughtful brand design with a seamless web experience. We continue to explore and use Webflow across client websites, learning more each time about its powerful capabilities—as well as our own limitations.

Check out the website here.

Related Journals
The Muse branding project by J2
The Art of Renaming—Breathing New Life into a Rittenhouse Classic
illustration of creative director on a ladder tending to a garden
The Heart of What We Deliver—Integrity by Design
Penn's Landing Park rendering for branding project by J2
A Park for the People—Crafting an Identity for the New Penn’s Landing Park