Mozilla’s work-in-progress style guide and pattern library.
I like the questions that the TELUS team ask about any potential components to be added to their design system:
- Is it on brand?
- Is it accessible?
- Has it been tested?
- Can it be reused?
They also have design principles.
The Gov.uk design system is looking very, very good indeed—nicely organised with plenty of usage guidelines for every component.
Guidance on using components and patterns now follow a simple, consistent format based on task-based research into what users need in order to follow and trust an approach.
It really, really bothers me that wireframes have evolved from being a prioritisation tool into a layout tool (disempowering UI designers in the process), so I’m happy to see an alternative like this—somewhat like Dan Brown’s Page Description Diagrams.
A design system unites product teams around a common visual language. It reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring products to life. Learn how you can create your design system and help your team improve product quality while reducing design debt.
A table of design systems, pattern libraries, style guides, or whatever we’re calling them.
Advice on building design systems:
- If you can avoid being ambiguous, please do.
- Favor common understanding over dictionary correctness.
- Make great operations a priority.
- Don’t get trapped in defining things instead of explaining things.
Susan reviews Alla’s superb book on design systems:
If you’re interested in or wanting to create a design system or improve the one you have or get buy in to take your side project at work and make it part of the normal work flow, read this book. And even better, get your colleagues to do the same, so you’ll have a shared understanding before you begin the hard work to build your own system.
Susan also published her highlights from the book. I really like that!
At Patterns Day, Alice shared what she has learned from shepherding the Origami project within the Financial Times.
Jina invented an entirely new genre for her Patterns Day talk—autobiographical fantasy.
The videos are coming! The videos are coming!
Here’s the first one: Laura Elizabeth opening the show at Patterns Day.
What’s the difference between style guides, pattern libraries, and design systems? – Joseph Fitzsimmons
Ah, the age-old question!
The Venn diagram here pretty much maps to how I think about these different terms, and how they relate to one another.
Paul has published the slides and transcript of his knock-out talk at Patterns Day. This a must-read: superb stuff!
Design systems are an attempt to add a layer of logic and reasoning over a series decisions made by complex, irrational, emotional human beings. As such, they are subject to individual perspectives, biases, and aspirations.
How does the culture in which they are made effect the resulting design?
Alla’s book is going to be a must-have (I know because I’ve been reviewing it as she’s been writing it). Pre-order it now. It’s out in September.
A comparison of a few different tools for generating pattern libraries.
In this particular case, Fractal comes out on top:
It has the features we need, and I’m happier than I should be with how simple the directory and file structure is. The documentation has also been super helpful thus far. We’ve customized it with our client’s branding and are ready to roll.
Having spent half a decade encouraging people to make their pattern libraries public and doing my best to encourage openness and sharing, I find this kind of styleguide-shaming quite disheartening:
These all offer something different but more often than not they have something in common. They look ugly enough to have been designed by someone who enjoys configuring a router.
If a pattern library is intended to inspire, then make it inspiring. But if it’s intended to be an ever-changing codebase (made for and by the kind of people who enjoy configuring a router), then that’s where the effort and time should be concentrated.
But before designing anything—whether it’s a website or a pattern library—figure out who the audience is first.