Tags: components

134

sparkline

The three lessons that changed how I think about design systems

  1. Know where you stand before starting the journey
  2. Make sure everyone is speaking the same language
  3. Integrate the right tools into your team’s workflow

“Distinct Design Systems,” an article by Dan Mall

Dan asks:

Do we have too many design systems?

Spoiler: the answer is “no”. There. Saved you a click.

(Not really; you should definitely click.)

5 ways having a shared design system has helped us ship our designs faster – Product at Canva

The steps that the Canva team took to turbocharge their design ops.

I’ll talk about why creating a shared design system has boosted our organizational productivity—and how you can help your teams improve product quality while reducing your company’s ‘design debt’.

Bulb Design System

I really like the way that this pattern library includes research insights to provide justification for design decisions.

Web Components Club – A journal about learning web components

Andy Bell is documenting is journey of getting to grips with web components. I think it’s so valuable to share like this as you’re learning, instead of waiting until you’ve learned it all—the fresh perspective is so useful!

CSS Grid — Responsive layouts and components – Deemaze Writing Wall – Medium

Rafaela Ferro has written a good case study on Ev’s blog of using CSS grid to build some practical image-based responsive components.

No, design systems will not replace design jobs — DesignSystems.com

No longer focused on recreating the wheel (or icon), designers can turn their attention to different types of challenges.

CSS and Markup in Javascript is an Evolutionary Dead End

The bet to make is that we’re going to see more use of specialized languages. And HTML and CSS are the grandaddy specialized languages that have enough social consensus and capital investment to be the seeds of the next generation.

Easy Toggle State

I think about 90% of the JavaScript I’ve ever written was some DOM scripting to handle the situation of “when the user triggers an event on this element, do something to this other element.” Toggles, lightboxes, accordions, tabs, tooltips …they’re all basically following the same underlying pattern. So it makes sense to me to see this pattern abstracted into a little library.

What’s in a pattern name? — Ethan Marcotte

Ethan emphasises the importance of making a shared language the heart of any design system. I heartily agree!

This isn’t new thinking, mind: folks like Alla Kholmatova and Charlotte Jackson have been talking about this for ages. (And in doing so, they’ve massively influenced how I think about modular, pattern-driven design.)

Designing Button States - Cloud Four

The canonical example in just about every pattern library is documenting button variations. Here, Tyler shows how even this seemingly simple pattern takes a lot of thought.

Hudl Uniform

This design system takes an interesting approach, splitting the documentation between designing and coding.

Documenting Components – EightShapes – Medium

Part one of a deep dive by Nathan into structuring design system documentation, published on Ev’s blog.

Useful accessibility resources

A whoooole bunch of links about inclusive design, gathered together from a presentation.

Australian Government Open Language for Design

The design system for the Australian government is a work in progress but it looks very impressive. The components are nicely organised and documented.

(I’ve contributed a suggestion for the documentation in line with what I wrote about recently.)

The People Part of Design Systems – Related Works – Medium

I like the idea of “design bugs”:

Every two weeks or so, a group of designers would get together for a couple of hours to fix what we called “design bugs.” These were things that didn’t hinder functionality and wouldn’t have been filed as an engineering bug, but were places where we were using an old component, an existing one incorrectly, or a one-off alteration.

Notifications

Heydon keeps on delivering the goods. This time, he looks at making on-screen notification messages accessible using ARIA’s live regions.

As ever, structuring content is paramount, even where it pertains to dynamic events inside realtime web applications.

Questions To Ask Before Building a Component Library | Chromatic

  • What problems will a component library solve?
  • Is everyone on the project behind the component library?
  • How will the component library be used?
  • What tool(s) will be used to build the component library?
  • Where should the component library live?
  • How granular should the library be? How should it be organized?
  • How will component code be scoped? What about page layout?
  • What data will the library use? What else should it have?

Responsive Components: a Solution to the Container Queries Problem — Philip Walton

Here’s a really smart approach to creating container queries today—it uses ResizeObserver to ensure that listening for size changes is nice and performant.

There’s a demo site you can play around with to see it in action.

While the strategy I outline in this post is production-ready, I see us as being still very much in the early stages of this space. As the web development community starts shifting its component design from viewport or device-oriented to container-oriented, I’m excited to see what possibilities and best practices emerge.