Monzo – Tone of Voice
Monzo’s guidelines for tone of voice, including a reference to “the curse of knowledge.”
Tags: guide
126
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.
A collection of awesome design systems
A table of design systems, pattern libraries, style guides, or whatever we’re calling them.
Design Guidelines — The way products are built.
A collection of publicly available design systems, pattern libraries, and interface guidelines.
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.
Voice Guidelines | Clearleft
I love what Ben is doing with this single-serving site (similar to my design principles collection)—it’s a collection of handy links and resources around voice UI:
Designing a voice interface? Here’s a useful list of lists: as many guiding principles as we could find, all in one place. List compiled and edited by Ben Sauer @bensauer.
BONUS ITEM: Have him run a voice workshop for you!
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!
18F: Digital service delivery | Building a large-scale design system: How we created a design system for the U.S. government
Maya Benari provides an in-depth walkthrough of 18F’s mission to create a consistent design system for many, many different government sites.
When building out a large-scale design system, it can be hard to know where to start. By focusing on the basics, from core styles to coding conventions to design principles, you can create a strong foundation that spreads to different parts of your team.
There’s an interface inventory, then mood boards, then the work starts on typography and colour, then white space, and finally the grid system.
The lessons learned make for good design principles:
- Talk to the people
- Look for duplication of efforts
- Know your values
- Empower your team
- Start small and iterate
- Don’t work in a vacuum
- Reuse and specialize
- Promote your system
- Be flexible
Photon Design System
Most design systems I link to are for websites, so interesting to see this one for a web browser: Firefox.
There are guidelines for tone of voice and motion design as well as the usual guidelines for typography, colour, and interface elements.