Design Systems are our current model of making sense of the intersection of front-end code and design. With the tools we have today, what is our working model of a component? How do we define them, create them, and ensure they work at scale? In this talk we’ll discuss how our tools affect our understanding, create a checklist of factors that make a component a component, and how to implement the theory of components with the tools you have at hand.
“One of those great ones: masterfully weaving two topics, astronomy and web development, with an impeccable presentation, purposeful analogies, valuable insight and captivating stories.” — Razvan Caliman, Apple
“Even though it's a few years old, I still share this talk every time I need someone to grok the concept of components.” — Jeffrey Cherewaty, Rapid Robotics
Over the past 15 years, our understanding of the world of front end development has changed. We have been iterating constantly on our working theory of how to design and code for the web.
We’ve used the tools we have not just to create solutions to the problems we face, but also to create new tools. These tools aren’t just helping us do our job; they are changing the way we can even conceptualize our work. We’re building on what we learned previously, filling in the gaps and unknowns. We are coming to a new understanding, with these new tools, of how to create the front end at scale: Design Systems.
We want isolated components that we can reuse, styles that don’t conflict, and an easy authoring experience.
At a high level, we know that a component needs to be three things:
Our theory of components should be mostly applicable regardless of our tools. What works for one project may not work for another. But when you find things that don’t work, gaps in our knowledge, that doesn’t mean the whole theory is broken.
We are experimenting with this theory of design systems every day as we work. What we learn will add to the theory, help us move forward, and create even better tools to improve our work. Searching for new solutions might even propel us forward so far we have as many new questions as answers. As we work together today and tomorrow and in the months and years to come, keep thinking beyond today’s understanding of the world, and on to tomorrow’s.
See what the internet had to say.
A beautiful talk by Elyse Holladay about components, using space physics as an intro. —Sarah Heidari
When u open a CSS talk with Principia Mathematica. Boss move by Elyse Holladay #cssconfeu —HJ Chen
I saw Elyse Holladay talk almost two years ago at @clarity_conf and its been one of my favorite talks ever. So happy to be able to see her here again at #CSSConfEU (and now Ligo has finally detected black holes collapsing one into another) —Cristiano Rastelli
Despite all our different opinions of specific technologies/framework/solutions, we all want isolated components we can reuse, styles that don't conflict, and an easy authoring experience. @elyseholladay at #Clarity2017 — Brad Frost
I like this talk by Elyse Holladay that compares Design Systems to scientific theories: components are constantly evolving based on observations. — Dave Rupert
Loving this talk and callout about always keeping an open mind about changing technology — Una Kravets
Most Lovely Slide Typography Award goes to @elyseholladay. —Cameron Moll
She's a class act, that @elyseholladay. Was a pleasure collaborating on this project and supporting this brilliant lady. —Ainsley Wagoner
These books inspired and served as reference for the science story in my talk.
Links and explainers about the science of black holes, gravitational waves, and astronomy history.
Slide designs, illustrations, color palette by the talented and lovely Ainsley Wagoner. Typeface is Klim Foundry’s Tiempos Text and Headline.
