5 things I learned working on a design system for a year (by Anda Popovici)
I was delighted to discover that my talented colleague Anda has her own website and uses it to write articles like this! This one is obviously pretty relevant to me too, given that I work on the same team.
Design Systems should avoid “God components” and Swiss Army Knives
Something we often talk about in our Design System team is that components should not be like Swiss Army Knives. It’s better for them to be laser-focused because by limiting their scope to a single task they are more reusable and support a more extensible system through composition.
No Style Design System
Adam Silver’s collection of accessible form-related components – a companion to his book Form Design Patterns – is a brilliant reference.
The Component Gallery
The component gallery is an up-to-date list of interface component examples. It’s really helpful for looking up existing naming conventions. It also contains a list of Design Systems.
Nordhealth’s Design System
There’s so much to admire in Nord Health’s Design System and specifically its reference website.
Choosing a date - we want to know your use cases (a discussion re. gov.uk design system)
We want to find out if adding a 'date picker' component to the Design System is a good idea.
We're currently looking for: examples of date pickers in services: screenshots, prototypes, links to live services; use cases: explanations of why a 'date picker' was used in a service instead of a 'date input', or something else; research: how well 'date pickers' tested with users to complete different tasks.
Division and construction in design systems
Over the last couple of days I’ve been watching an interview with Brad Frost on Storybook’s channel. I’m still only halfway through but it’s great so far.
What open-source design systems are built with web components?
Alex Page, a Design System engineer at Spotify, has just asked:
What open-source design systems are built with web components? Anyone exploring this space? Curious to learn what is working and what is challenging. #designsystems #webcomponents
And there are lots of interesting examples in the replies.
GOV.UK introduce an experimental block link component
Here’s an interesting development in the block link saga: GOV.UK have introduced one (named
.chevron-card) on their Homepage, citing how it’ll improve accessibility by increasing mobile touch targets. It’s not yet been added to their Design System while they’re monitoring it to see if it is successful. They’ve chosen the approach which starts with a standard, single, non-wrapping anchor then “stretches” it across the whole card via some pseudo elements and absolute positioning magic. I’m slightly surprised at this choice because it breaks the user’s ability to select text within the link. Really interested to see how it pans out!
BBC WebCore Design System
A Storybook UI explorer containing the components and layouts for making the front end of a BBC web experience.
From designing interfaces to designing systems (on The history of the web)
A history of Design Systems by Jay Hoffman taking in (amongst other milestones) the notion of Front-end Style Guides, followed by the arrival of Bootstrap, then Brad Frost’s Atomic Design, culminating in the dawn of the Design System movement with Jina Anne’s Clarity Conference.
W3C Design System
The W3C have just published a new Design System. It was developed by British Digital Agency Studio 24, who are also working (in the open) on the redesign of the W3C website.
Use Eleventy templating to include static code demos
Here’s a great tutorial from Eleventy guru Stephanie Eckles in which she explains how to create a page that displays multiple code demos, similar to SmolCSS.dev.
Reusable code snippets and components in Eleventy
There are (at least) three cunning ways in Eleventy to get “reusable snippet” or “reusable component” functionality.
Crafting Component API, Together (by Nathan Curtis, on Medium)
Nathan (of EightShapes) discusses how to unify anatomy and props across code and design tools.
Manage Design Tokens in Eleventy
One interesting aspect of the Duet Design System is that they use Eleventy to not only generate their reference website but also to generate their Design Tokens.
Duet Design System
Here’s a lovely Design System that interestingly uses Eleventy for its reference website and other generated artefacts:
GDS on Twitter: The GOV.UK Design System is turning 3 years old!
The GOV.UK Design System is a nice Design System success story. At 3 years old it’s reporting high traffic, usage and satisfaction ratings. GDS do so much great, thoughtful and inclusive work (which they also share with the community) and it’s inspiring to see it being a success.
There are now more than 900 live cross-government services using the GOV.UK Design System - 75% more than a year ago. It’s being used in more than 2,600 repositories on GitHub and has been forked more than 200 times.
Lightning Design System
I should have bookmarked it long before now, but just revisiting the Lightning Design System I’m reminded that is really well organised and executed.
SLDS saves time and energy, freeing designers and developers to focus on larger issues of usability and meaning. Standardized, reusable components support collaboration, reinforce branding, and provide a consistent look and user experience.
Shifting left: how introducing accessibility earlier helps the BBC’s design system (by Sophie Beaumont)
Absolute gold here regarding accessibility, bloated components, and purpose versus appearance.
It’s easy for a component to become bloated and its purpose increasingly ambiguous.
Design-ish systems (by Ethan Marcotte)
Here’s an interesting new article from Ethan Marcotte, in which he muses on better ways to think about Design Systems based on his recent experience.
Once you’ve identified the root causes, you’ll be in a far, far better place to choose the right things — and, more importantly, to create a system that finally supports your design.
Making sense of atomic design: molecules and organisms (on Future Learn)
From 2015: Alla Kholmatova reflects on the difficulty in choosing between molecule or organism when categorising components using atomic design at FutureLearn. She also provides some handy insights into how they handled it.
When thinking about complexity of elements, it helps viewing molecules as “helpers” and organisms as “standalone” modules.
Design system components, recipes, and snowflakes (on bradfrost.com)
An excellent article from Brad Frost in which he gives us some vocabulary for separating context-agnostic components intended for maximal use from specific variants and one-offs.
BBC GEL | The lessons learnt creating a design system for BBC Online
Interesting insight into the BBC design system and the five areas it’s split into: Foundations, Components, Layout Components (including Stack, Grid etc) Levers and Containers.
A Guide To The State Of Print Stylesheets In 2018 - Smashing Magazine
Rachel Andrew explains how to write CSS for a nicely optimised printed page that uses a minimum of ink and paper and ensures that content is easy to read.
Not every Design System Pattern should be represented by a component (CSS-Tricks)
My point with all this is that it’s easy to see every problem or design as a new component or a mix of currently existing components. But instead, we should make components that can slot into each other neatly, rather just continue to make more components.
GOV.UK Design System
Use this design system to make your service consistent with GOV.UK. Learn from the research and experience of other service teams and avoid repeating work that’s already been done.
The Guardian Digital Design Style Guide
This is a nice whistle-stop tour of the the Guardian’s current digital design system. Apart from looking great, some of the terminology is interesting (fronts, kickers and thrashers) and I like the way they have different Card types for different types of article, “each having its own flavour and tone”.
Solar Design System by Bulb
It’s a collection of shared patterns and practices that allow our team to build quality user interfaces consistently and quickly.
Atomic Design by Brad Frost
The original call-to-arms and manual for Design Systems.
See all tags.