Here’s a fascinating look at The Guardian’s design system with a step-by-step breakdown of what’s gone into it and what options are available to designers and developers. It shows us how the team treats colors, typography, layouts, and visual cues like rules and borders.… Read article “The Guardian digital design system”
Drop caps & design systems
Robin Rendle
Ethan Marcotte has written up his process for how to make drop caps accessible for screen readers and browsers alike. All of that is very interesting and I’m sure I’ll use a technique like this in the near future, but the part that made me hop out of my seat is where Ethan notes his experience with design systems at Vox:
… Read article “Drop caps & design systems”Since rolling out our new and improved drop caps, we’ve continued to iterate on them. (Including fixing a number
A Practical Use Case for Vue Render Functions: Building a Design System Typography Grid
This post covers how I built a typography grid for a design system using Vue render functions. Here’s the demo and the code. I used render functions because they allow you to create HTML with a greater level of control than regular Vue templates, yet surprisingly I couldn’t find very much when I web searched around for real-life, non-tutorial applications of them. I’m hoping this post will fill that void and provide a helpful and practical use case … Read article “A Practical Use Case for Vue Render Functions: Building a Design System Typography Grid”
Who Are Design Systems For?
Specific design systems, I mean. Design systems, as a concept, are something just about any site can benefit from.
A lot of hype goes into design systems these days. Just the other day, an organization’s published their design system publicly and I got a slew of DMs, emails, and Slack messages encouraging me to check it out. “Looks good to me,” I said. But I’m merely knocking on the hood of a new car, so to speak. I haven’t sat … Read article “Who Are Design Systems For?”
Revisiting the Rendering Tier
Robin Rendle
Have you ever created a well-intentioned, thoughtful design system only to watch it grow into an ever-increasing and scary codebase? I’ve been working in sort of the opposite direction, inheriting the scary codebase and trying to create a thoughtful system from it.
Here’s Alex Sanders on the topic, explaining how his team at The Guardian has tackled the task of creating design systems while combating complexity:
… Read article “Revisiting the Rendering Tier”Systems that try to contain complexity over long periods of time by convention
Design Systems and Portfolios
In my experience working with design systems, I’ve found that I have to sacrifice my portfolio to do it well. Unlike a lot of other design work where it’s relatively easy to present Dribbble-worthy interfaces and designs, I fear that systems are quite a bit trickier than that.
You could make things beautiful, but the best work that happens on a design systems team often isn’t beautiful. In fact, a lot of the best work isn’t even visible.… Read article “Design Systems and Portfolios”
The Elements of UI Engineering
Robin Rendle
I really enjoyed this post by Dan Abramov. He defines his work as a UI engineer and I especially like what he writes about his learning experience:
… Read article “The Elements of UI Engineering”My biggest learning breakthroughs weren’t about a particular technology. Rather, I learned the most when I struggled to solve a particular UI problem. Sometimes, I would later discover libraries or patterns that helped me. In other cases, I’d come up with my own solutions (both good and bad ones).
It’s this combination of
Dealing with Dependencies Inside Design Systems
Chris Coyier
Dependencies in JavaScript are pretty straightforward. I can’t write library.doThing() unless library exists. If library changes in some fundamental way, things break and hopefully our tests catch it.
Dependencies in CSS can be a bit more abstract. Robin just wrote in our newsletter how the styling from certain classes (e.g. position: absolute) can depend on the styling from other classes (e.g. position: relative) and how that can be — at best — obtuse sometimes.
Design has dependencies too, … Read article “Dealing with Dependencies Inside Design Systems”
Creating the “Perfect” CSS System
Robin Rendle
My pal Lindsay Grizzard wrote about creating a CSS system that works across an organization and all of the things to keep in mind when starting a new project:
… Read article “Creating the “Perfect” CSS System”Getting other developers and designers to use the standardized rules is essential. When starting a project, get developers onboard with your CSS, JS and even HTML conventions from the start. Meet early and often to discuss every library, framework, mental model, and gem you are interested in using and take feedback
Developing a design environment
Robin Rendle
Jules Forrest discusses some of the work that her team at Credit Karma has been up to when it comes to design systems. Jules writes:
… Read article “Developing a design environment”…in most engineering organizations, you spend your whole first day setting up your development environment so you can actually ship code. It’s generally pretty tedious and no one likes doing it, but it’s this thing you do to contribute meaningful work to production. Which got me thinking, what would it look like to make it
