WPDS - Accessibility | Resources
I didn’t know the Washington Post had a design system or that the system has this good section on accessibility.
Link tags: guides
41
A walkthrough of our design system and how we got here | Kyan
It all started at Patterns Day…
(Note: you’ll probably need to use Reader mode to avoid taxing your eyes reading this—the colour contrast …doesn’t.)
Global and Component Style Settings with CSS Variables — Sara Soueidan
Sara shares how she programmes with custom properties in CSS. It sounds like her sensible approach aligns quite nicely with Andy’s CUBE CSS methodology.
Oh, and she’s using Fractal to organise her components:
I’ve been using Fractal for a couple of years now. I chose it over other pattern library tools because it fit my needs perfectly — I wanted a tool that was unopinionated and flexible enough to allow me to set up and structure my project the way I wanted to. Fractal fit the description perfectly because it is agnostic as to the way I develop or the tools I use.
The Patterns Day Edition | Amy Hupe, content designer.
Amy’s talk at Patterns Day was absolutely brilliant! Here’s an account of the day from her perspective.
The evident care Jeremy put into assembling the lineup meant an incredible mix of talks, covering the big picture stuff right down to the nitty gritty, and plenty in between.
Her observation about pre-talk nerves is spot-on:
I say all of this because it’s important for me and I think anyone who suffers with anxiety about public speaking, or in general, to recognise that having a sense of impending doom doesn’t mean that doom is actually impending.
Patterns Day
Here’s a nice little round-up of Friday’s Patterns Day.
Weeknotes #16 | Trys Mudford
Just look at these fantastic pictures that Trys took (very unobstrusively) at Patterns Day—so rock’n’roll!
Patterns Day notes
Stuart took copious notes during every single talk at Patterns Day—what a star!
GitHub - frctl/awesome-fractal: A curated list of awesome things related to Fractal
A starter list of Fractal examples and links. You can expand it.
Mozilla Protocol - Protocol Design System
Mozilla’s work-in-progress style guide and pattern library.
Beyond style guides: lessons from scaling design at TELUS
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.
Introducing the GOV.UK Design System - Government Digital Service
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.
Priority Guides: A Content-First Alternative to Wireframes · An A List Apart Article
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.
Herman: Automated Pattern Libraries | OddBird
A lightweight style guide generator. This one uses SassDoc to parse out the documentation for colours, type, etc.
Design Systems Handbook - DesignBetter.Co
A weirdly over-engineered online book with bizarre scrolljacking (I would advise disabling JavaScript but then all the links stop working so you won’t be able to go past the table of contents) but it’s free and the content—by Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield— looks good:
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 collection of awesome design systems
A table of design systems, pattern libraries, style guides, or whatever we’re calling them.
Distilling How We Think About Design Systems
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.
Design Systems | susan jean robertson
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!
Patterns Day 2017: Paul Lloyd on Vimeo
Paul pulls no punches in this rousing talk from Patterns Day.
The transcript is on his site.
Patterns Day 2017: Alice Bartlett on Vimeo
At Patterns Day, Alice shared what she has learned from shepherding the Origami project within the Financial Times.