This week we look at the Firefox's Photon Design System, how Dropbox is making a play in the design space, an interesting correlation between pattern libraries and hiring, writing a CSS-in-JS library from scratch, and the future of accessibility for custom elements.
Emanuela Damiani from the Firefox UX team reflects on the process of getting to the Beta release of Firefox Quantum, which realizes all the work done on the Photon Design System.
The Photon documentation currently provide a lot of guidance on principles, visuals, motions and copy, but is fairly light on components and patterns. This is not accidental – there is a lot to learn about how the Firefox team is approaching this holistically:
We are working on the components and patterns. Day to day, our job resembles a detective’s. We follow leads in all the products and identify the ones that can bring extra value to the Firefox team. Where we see complexity, we act to simplify...
A design system is not built overnight but shaped gradually through our daily practices. It evolves every day — or maybe every week — and most importantly, it’s never done.
Chris Coyier asked the readers of CSS-Tricks:
If a company were actively using (or working toward) a pattern library for their site(s), you would...
- Be more likely to want a job there
- Be less likely to want a job there
- Doesn't matter to me
The results are in. 61% said they would be more likely to want a job somewhere that were actively using (or working toward) a pattern library. 32% said that it doesn't matter to them, and only 7% said that they would be less likely to want to work there.
As Chris explains, that means that 93% are either incentivized to work for you because of a pattern library, or don't mind. The take out is that pattern libraries are good not only for your codebase and business, but for attracting talent as well.
You're not a designer unless you have opinions on the Dropbox rebrand. We won't go into that here. In terms of it's impact on the product design, so far apart from the new logo and illustration style there isn't much from the new brand system that affects the core user experience. We'll see if that changes in the coming weeks.
A lot of people have pointed out that the new Dropbox seems to be making a play for the hearts and minds of creative types. Today, we've got some more evidence that this is true. Check out this landing page for some kind of vague design tool that may or may not exist already. It's a very interesting move, to say the least.
Kyle Hohenberger, creator of the fantastic CSS-in-JS library emotion, explains the basic internals of most CSS-in-JS solutions by walking through the code. It's a fantastic exercise for anyone who is interested in CSS-in-JS as an architecture pattern and wants to learn more.
Using custom elements, the foundation of web components, web developers can create new HTML tags, beef-up existing HTML tags, or extend the components other developers have authored. The problem is, unlike built-in elements, custom elements have no implicit semantics or keyboard support.
When you define a new tag, the browser really has no way of knowing if you’re trying to build a button, or a slider, or just a fancy text container. Adding these features back in requires a fair bit of work on the developer’s part and it can be difficult to reach parity with the native equivalents.
Google Chrome Labs have released HowTo: Components, a project that aims to build custom element equivalents of the built-ins to educate developers, and push standards forward for custom elements through example. If you're working with web components and care about accessibility, you're going to want to read this article and stay across the project.