When it comes to designing cohesive, on-brand communications for nonprofits, brand guidelines and design templates are tried and true. By taking the guesswork out of design, they help teams quickly create quality content reflective of the brand. However, the production of digital content can get complicated. For nonprofits with multiple related websites or that are publishing-heavy like research institutes, content management across sites grows even more complex.
Enter digital design systems.
Digital design systems are code-based design frameworks that make life easier for anyone designing digital content by translating the core elements of your brand guidelines—think fonts, colors, sizes, illustration, even whole assets—into a single source of truth that designers and web developers can easily access, repurpose, and remix. Instead of contemplating how to combine these elements to your needs, the system will pre-make the design for you. All you have to do is put in the content.
Though digital design systems are traditionally the domain of larger-scale organizations, smaller nonprofits can also find them helpful despite the seemingly heavy lift. Between extensive coding that requires a dedicated dev team and a detailed catalog of the brand’s digital needs, how can creating a whole new system from scratch do anything except pile on more work?
Here’s the thing: it doesn’t have to. When approached from the right angle, design systems can fit seamlessly into what you’re already doing. Gather the brand guidelines you already have, consider the assets or website structures you repeatedly use, and use them as a database without the frills. Or, if you want to explore more complex systems, programs like Zeroheight and Backlight help you dive into the code and experiment.
Like most aspects of a nonprofit’s brand, design systems aren’t an endpoint. They’re ongoing and should be frequently evaluated to ensure that they maintain brand cohesion. But you’ve gotta start somewhere, and to that effect, our Director of Strategy & UX Paul Sternberg and Director of Technology Abel Thomas have pulled together resources to get you started on your digital design system journey—whether that be starting from scratch or looking at basic frameworks to use as building blocks for future systems.
Design Systems 101
What is a design system? Why use (or not use) a design system? What elements make up a design system? And how do I approach adopting a design system? This article by Nielsen Norman Group is a great introduction to the basics.
Design Systems, When and How Much? [Video]
Head of Design at Github, Diana Mounter, discusses Github’s adoption of design systems, how workflows have been improved, and design system work still to be done. She makes a case for the value of systems, and the interaction systems create between design and development.
Yes, Design Systems Do Improve Developer Efficiency and Design Consistency
Using data from their own annual design systems survey, Sparkbox built a study to test whether design systems could increase their efficiency and product outcomes with their own team. The findings? 47% faster development, better visual consistency, and more accessible code.
Do you think your component library is your design system? Think again.
UI component libraries are integral to digital design systems… but they are only one part. As Shantanu Sinha explains in this article, design systems are much more all encompassing than just a component library. Design principles, style-guides, patterns, content tones, and rules and specifications around reusable components, these all are parts that make up an effective design system whole.
Working with Design Principles: Strategic Roots to Grow Your Nonprofit’s Brand
Design principles are an integral part of your design system, especially for mission driven social impact organizations. They’re the strategic roots from which you can build out your design system while continuing to be guided by the ideas of your core values and brand strategy. In this insight our Design Director, Karla Despradel breaks down the basics and talks implementation and best practices.
Brad Frost: The Technical Side of Design Systems [Video]
In this video, Brad Frost, a well respected design system expert, talks at CSS Day in Amsterdam about the technical aspects around creating and maintaining design systems. From the technical benefits of systems to technical needs to develop an effective system, this talk is chock full of insights and resources.
3 Design System Challenges No One is Talking About
Like with implementing any other system in your organization, developing and maintaining a design system does not come without its challenges. This brief article from Senior Product Designer Dana Zipnik discusses three common issues: cross platform deployment, keeping your system alive, and fixing bugs.
Better, Faster, Happier through Systems: The Rosenfeld Review Podcast
In this episode of the Rosenfeld Review podcast, Boeing UX Manager and author Jack Moffett talks to Lou Rosenfeld about the overall importance of design systems for standardizing and scaling activities. He makes a specially convincing argument for design systems’ power in facilitating UX to web development handoffs.
More Constructively Curated
• 7 Resources to Help You Understand and Reduce Your Nonprofit’s Technical Debt
• 6 Resources to Achieve Measurable Goals Online
• 7 Resources on Design Principles for Your Nonprofit’s Brand Strategy
