Tags: pattern

205

sparkline

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.

My foreword for Design Systems. — Ethan Marcotte

Ethan’s foreword for Alla’s brilliant book.

(I know the book is brilliant because I was reviewer throughout. Pre-order it now.)

Infusion: An Inclusive Documentation Builder

Two of my favourite things together at last: pattern libraries and service workers. Infusion is a tool for generating pattern libraries that also work offline.

Thinking about it, it makes total sense that a pattern library should be a progressive web app.

Integrating Animation into a Design System · An A List Apart Article

Alla looks at ways of documenting animations into a pattern library. I tell ya, her book is going to be unmissable!

Patterns Day 2017 | Flickr

Marc took some great pictures at Patterns Day.

In the break

I made a style guide for my personal web site and you should too.—zachleat.com

Here’s Zach’s style guide. But the real reason I’m linking to this is his lovely description of having a personal website that grows over time:

As my own little corner of the web unceremoniously turned ten years old this year, it’s really starting to feel more like a garden than a piece of software. I certainly enjoy tending to it. I can plant what I like and with proper care it can grow into something useful.

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.

Tooltips & Toggletips

Another great deep dive by Heydon into a single interface pattern. This time it’s the tooltip, and its cousin, the toggletip.

There’s some great accessibility advice in here.

Patterns Day 2017: Jina Anne on Vimeo

Jina invented an entirely new genre for her Patterns Day talk—autobiographical fantasy.

Testing the accessibility of pattern libraries

Riffing on Rachel’s talk at Patterns Day:

At the Patterns Day conference last month, Rachel Andrew mentioned something interesting about patterns. She said that working with reusable interface components, where each one has its own page, made her realise that those work quite well as isolated test cases. I feel this also goes for some accessibility tests: there is a number of criteria where isolation aids testing.

Hidde specifically singles out these patterns:

  • Collapsible (“Show/hide”)
  • Form field
  • Video player

Patterns Day 2017: Rachel Andrew on Vimeo

Rachel’s fantastic talk from Patterns Day. There’s a lot of love for Fractal specifically, but there are also some great points about keeping a pattern library in sync with a live site, and treating individual components as reduced test-cases.

Patterns Day 2017: Sareh Heidari on Vimeo

Time for another video from Patterns Day. Here’s Sareh Heidari walking us through Grandstand, the CSS framework at the BBC.

Patterns Day 2017: Ellen De Vries on Vimeo

The latest video from Patterns Day is up—Ellen’s superb philosophical presentation: Patterns in Language, Language in Patterns.

There’s so much packed into this one, it might take more than one viewing to take it all in.

A Design System Grammar | Daniel T. Eden, Designer

Once again, we can learn from Christoper Alexander’s A Pattern Language when it comes to create digital design systems, especially this part (which reminds me of one of the panes you can view in Fractal’s default interface):

  • Each pattern’s documentation is preceded with a list of other patterns that employ the upcoming pattern
  • Each pattern’s documentation is followed by a list of other patterns that are required for this pattern

Patterns Day 2017: Laura Elizabeth on Vimeo

The videos are coming! The videos are coming!

Here’s the first one: Laura Elizabeth opening the show at Patterns Day.

Jon Aizlewood | Design systems don’t start with components

Jon’s worried that thinking about components first might damage the big picture.

One doesn’t create a design system starting with a loose collection of parts before creating the whole.

Won’t somebody think of the parents!?

Without creative direction, a design system becomes a group of disconnected elements existing alongside one another.

What’s the difference between style guides, pattern libraries, and design systems? – Joseph Fitzsimmons

Ah, the age-old question!

The Venn diagram here pretty much maps to how I think about these different terms, and how they relate to one another.

Patterns in language and language in patterns. – Ellen de Vries – Medium

A transcript of the superb talk that Ellen delivered at Patterns Day. So good!