Design Systems: Reading Takeaways
One of the great things about design is that it’s constantly changing in the digital climate. The number of viewport sizes and device types will only continue to grow – making UI design something that is never really “complete.”
So how does a brand and UI designer like myself maintain visual consistency throughout all the experiences? The answer: design systems and their reusable components.
What is a design system? “A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.”1 A design system can be composed using design principles, UI components, UX guidelines, code standards, processes, design toolkits, code repositories, resources, and more.
Those who know my career, know I am a stickler for brand and visual consistency. I’ve been known to catch things that were even a pixel off. While one pixel might an extreme case, consistency matters in design. It helps users become familiar with which brand they’re looking at, how to navigate a website, and make development all that much faster! Given this draw to consistency and dedication to better collaboration, I’m expanding my expertise on design systems. So I’ve joined Memorisely’s Design Systems Bootcamp.
We start class this week and I’ve completed the prep-work readings. Notably, I read “Laying the Foundations: How to Design Websites and Products Systematically” by Andrew Couldwell and “Atomic Design” by Brad Frost.
I encourage you to read them, but here were some of my favorite takeaways:
A design system isn’t just for UI or brand designers, it involves everyone. A design system requires buy-in from stakeholders and contributions from development, content, brand, UX, and UI. The more we work together, the more our language, process, and mission become unified.
Build your design system in tandem with your product or website, not after the fact. The design system and product (or website) feed each other. Saving documentation and outlining components for “the end” is a disservice, we all need the latest information now while we’re designing, not once it’s already done.
Digital is not necessarily linear, and waterfall workflows don’t always work. The thought process of print design has a heavy influence on how people approach product and system design now. For example, having things perfect for print is important since reprinting is expensive! Not for us digital friends. In fact, “Pixels are cheap.”2
Pixels can change in instant. So UX, UI, development, and content can all be working at once.
We’re not designing pages or screens, we’re designing a system of components. Again, this is the print design mindset. A 300-page book requires more work than a 30-page book. In digital design, one web page could have heavy animations and an endless amount of unique components. While a 100-page site could use the same 5 components! Updating that 100-page site is a lot less daunting. Components indicate design effort, not the number of screens or pages.
I highly encourage you to read these books, as other takeaways may resonate with your immediate design system needs. Find the books here and let me know what you think!
Links:
“Laying the Foundations: How to Design Websites and Products Systematically” by Andrew Couldwell
“Atomic Design” by Brad Frost.
Sources:
“Atomic Design” by Brad Frost.