Tags: guide

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.

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!