Tags: guide

Dimensions.Guide | Database of Dimensioned Drawings

There’s something quite lovely about this site, both in its purpose and execution.

Dimensions.Guide is a comprehensive reference database of dimensioned drawings documenting the standard measurements and sizes of the everyday objects and spaces that make up our world. Created as a universal resource to better communicate the basic properties, systems, and logics of our built environment, Dimensions.Guide is a free platform for increasing public and professional knowledge of life and design.

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.

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:

1. Is it on brand?
2. Is it accessible?
3. Has it been tested?
4. 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.