Tags: library

95

sparkline

The Most Exciting Design Systems Are Boring | Big Medium

Design-system builders should resist the lure of the new. Don’t confuse design-system work with a rebrand or a tech-stack overhaul. The system’s design patterns should be familiar, even boring.

The job is not to invent, but to curate.

Interesting thoughts from Josh on large-scale design systems and how they should prioritise the mundane but oft-used patterns.

When the design system is boring, it frees designers and developers to do the new stuff, to solve new problems. The design system carries the burden of the boring, so that designers and developers don’t have to.

Patterns Beyond Context · Matthias Ott – User Experience Designer

If we describe patterns also in terms of content, context, and contrast, we are able to define more precisely what a specific pattern is all about, what its role within a design system is, and how it is defined and shaped by its environment.

“What have they done to my library?” - Caitlin Moran

That library was a Pandorica of fabulous, interwoven randomness, as rich as plum cake. Push a seed of curiosity in between any two books and it would grow, overnight, into a rainforest hot with monkeys and jaguars and blowpipes and clouds. The room was full, and my head was full. What a magical system to place around a penniless girl.

Inclusive Components

A great new site from Heydon:

A blog trying to be a pattern library. Each post explores the design of a robust, accessible interface component.

The first component is a deep dive into toggle buttons.

Fractal Iterations | Clearleft

Danielle and Mark have been working flat out on Fractal. Here’s the roadmap they’re working to.

The Secret History of Hypertext - The Atlantic

The latest excellent missive from The History Of The Web—A Brief History of Hypertext—leads back to this great article by Alex Wright on Paul Otlet’s Mundaneum.

Evaluating Tools For Building a Component Library | Chromatic

A comparison of a few different tools for generating pattern libraries.

Spoiler…

In this particular case, Fractal comes out on top:

It has the features we need, and I’m happier than I should be with how simple the directory and file structure is. The documentation has also been super helpful thus far. We’ve customized it with our client’s branding and are ready to roll.

The road to Firefly 6, part 2, Roobottom.com

A look at the technical details behind Firefly’s pattern library. The tech stack includes Less, BEM, and some React, but it’s Anna and Danielle that really made it work.

Designing inspired style guides presentation slides and transcript | Stuff & Nonsense

Having spent half a decade encouraging people to make their pattern libraries public and doing my best to encourage openness and sharing, I find this kind of styleguide-shaming quite disheartening:

These all offer something different but more often than not they have something in common. They look ugly enough to have been designed by someone who enjoys configuring a router.

If a pattern library is intended to inspire, then make it inspiring. But if it’s intended to be an ever-changing codebase (made for and by the kind of people who enjoy configuring a router), then that’s where the effort and time should be concentrated.

But before designing anything—whether it’s a website or a pattern library—figure out who the audience is first.

BAgel

The styleguide, design principles, and pattern library for British Airways. It’s the “global experience language” for BA …so it’s called BAgel.

KUTE.js | Javascript Animation Engine

This looks like an interesting little JavaScript library for scripting animations.

Document your design systems with Fractal | Creative Bloq

This quick dip into Fractal was in last month’s Net magazine.

It’s very gratifying to see how much Fractal is resonating with people—Mark has put so much hard work into it.

From Pages to Patterns – Charlotte Jackson - btconfBER2016 on Vimeo

The video of Charlotte’s excellent pattern library talk that she presented yesterday in Berlin.

Overview | Atlassian Design Guidelines

A nicely-documented styleguide from Atlassian. It’s not a component library, though—there’s no code here.

Maintaining and organising a pattern library - FutureLearn

Alla looks at a few different ways of organising the contents of a pattern library, based on her experience with the FutureLearn team.

Heydon/fukol-grids

The most minimal responsive, flexible grid library you can find. In fact, here’s the whole thing:

.fukol-grid {
  display: flex; /* 1 */
  flex-wrap: wrap; /* 2 */
  margin: -0.5em; /* 5 (edit me!) */
}

.fukol-grid > * {
  flex: 1 0 5em; /* 3 (edit me!) */
  margin: 0.5em; /* 4 (edit me!) */
}

Style Guides, Pattern Libraries, Design Systems and other amenities. // Speaker Deck

This slide deck is a whistle-stop tour of all things styleguide and pattern-library related. Nice to see Charlotte’s excellent exercise get a shout-out.

“Researching Design Systems,” an article by Dan Mall

Dan has been researching the history of design systems, annotating as he goes.

sw-toolbox

If you’re going to dip your toes into the world of service workers, this handy library from the Chrome team is a good place to start.

Join Fractal on Slack!

If you’re planning on giving Fractal a test drive, jump into this Slack channel. Mark and others will be able to help you out with any questions that aren’t covered in the docs.