Mozilla Protocol - Protocol Design System
Mozilla’s work-in-progress style guide and pattern library.
Tags: guide
133
Brighton Guide
Fascinating snippets of information about some of the most interesting buildings in Brighton.
(The website was made by Lydia and Tash as a project for Code First: Girls)
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.
Accessibility for Teams
I really, really like the way that this straightforward accessibility guide is subdivided by discipline. As Maya wrote in the blog post announcing its launch:
Each person on a team, whether you’re a manager, designer, or developer, has a role to play. Your responsibilities are different depending on your role. So that’s how we structured the guide, with a separate section for each of five roles:
- Product management
- Content design
- UX design
- Visual design
- Front-end development
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.
Bulb Design System
I really like the way that this pattern library includes research insights to provide justification for design decisions.
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.
Monzo – Tone of Voice
Monzo’s guidelines for tone of voice, including a reference to “the curse of knowledge.”
Hudl Uniform
This design system takes an interesting approach, splitting the documentation between designing and coding.
Vox Product Accessibility Guidelines
Accessibility isn’t a checklist …but this checklist is a pretty damn good starting point. I really like that it’s organised by audience: designers, engineers, project managers, QA, and editorial. You can use this list as a starting point for creating your own—tick whichever items you want to include, and a handy copy/paste-able version will be generated for you.
The first visual identity for UK Parliament
Some lovely branding work for the UK Parliament, presented very nicely.
Useful accessibility resources
A whoooole bunch of links about inclusive design, gathered together from a presentation.
clean-code-javascript
Opinionated ideas on writing JavaScript. I like it when people share their approaches like this.
TNZ Pattern Library Docs
New Zealand has a pattern library (in Fractal, no less).
Herman: Automated Pattern Libraries | OddBird
A lightweight style guide generator. This one uses SassDoc to parse out the documentation for colours, type, etc.
Back to Bradshaw’s / Paul Robert Lloyd
I really like getting Paul’s insights into building his Bradshaw’s Guide project. Here he shares his process for typography, images and geolocation.
Array Explorer
Oh, this is going to be so useful to future me! Sarah has put together a handy guide to all the JavaScript methods for manipulating arrays.
Why Design Systems Fail ◆ 24 ways
Great advice from Una on getting buy-in and ensuring the long-term success of a design system.
A11Y Style Guide
A library of accessible UI elements that you can use as a starting point, complete with HTML and CSS. Alas, no JavaScript, but there’s always Heydon’s inclusive components for that.
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.