サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
bradfrost.com
TL;DR: This is a call to action to create a Global Design System that provides the world’s web designers & developers a library of common UI components. A Global Design System would improve the quality and accessibility of the world’s web experiences, save the world’s web designers and developers millions of hours, and make better use of our collective human potential. Sounds pretty good, right? I
What does a mature, end-to-end design system look like in a big, complex organization? What are all the moving pieces, and how do they hang together as a well-considered architecture? What’s required and what’s optional? Hold onto your butts, because we’re going to go deep on this one. Let’s start here: a design system’s relationship to digital products can be boiled down like so: There’s a design
Web components! They’re currently at the vanguard of web development and are a reliable source of hot drama in the community. We’ve built a number of web component-powered design systems with Fortune 500 companies over the last 4 years, and it’s been a wild ride. We’ve seen a ton of success, we’ve bumped up against many rough edges, and we’re still here. We are increasingly relying on web componen
Very rarely is exactly one design system created to serve exactly one product that expresses exactly one design language. Nearly all the design systems we’ve worked on require a high degree of flexibility in order to properly serve our clients’ needs. Some of this flexibility is achieved by variability in component structure, style, behavior, and content. But advanced aesthetic flexibility is ofte
We often talk about design systems as singular entities. “The design system saves time and increases quality.” “Oh, the design system provides that.” “Update to the latest version of the design system.” The reality is that a design system is a multi-faceted layer cake, and also operates as part of other layered systems within an organization. Design systems are systems of systems, but not all syst
Front-of-the-front-end and back-of-the-front-end web development The Great Divide is real, and I’m pleased that the terms “front-of-the-front-end” and “back-of-the-front-end” have gained traction ever since I quipped about them on the Shop Talk Show. A few of my clients have actually moved away from a culture of “we only hire full-stack developers” and have instead adopted the labels “front-of-the
“When should we make something a component?” is a question I’ve been fielding for years. My strong answer: right from the start. Creating things with a component-based mindset right out the gate saves countless hours and wailing and gnashing of teeth. Everything is a component. But there’s some nuance to this. Where each component lives matters. In my client design system work, we’ve arrived at so
Successful design systems are finely tuned to the organization they serve. At the beginning of every client design system engagement, we spend a great deal of time learning about our client’s culture, politics, products, tools, and workflows. Sure, we’ll get links to decks, GitHub repositories, and Sketch libraries, but these artifacts don’t really tell the story of how digital products get built
Frontend Design, React, and a Bridge over the Great Divide Frontend designers create the HTML, CSS, and presentational JavaScript code that powers web products’ user interfaces. I see frontend design as helpful mortar that bridges the gap between design and development. Of course “frontend designer” may or may not be the right title for it. Some others titles that companies use are: UI developer C
Atomic design is now over 6 years old (which is nuts!). I’m thrilled that all these years later the methodology continues to help teams think of their user interfaces as a hierarchical, interconnected set of components that build real product screens. I thought I’d be sick of talking about this by now, but I’m still passionate about atomic design after hearing so many success stories, as well as w
I was just talking with Dave about the accessibility of moving images on the web, and he said: hm… I wonder if you could use picture + prefers-reduced-motion? He then sends the following code: <picture> <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source> <img srcset="animated.gif alt="brick wall"/> </picture> I copied the code, dropped it into a post of mine, created
Last week I got a call from my bank regarding a wire transfer I had just scheduled. The customer support guy had me repeat everything back to him because there seemed to be a problem with the information. “Hmmmm, everything you said is right right except the last 3 digits of the account number.” He had me resubmit the wire transfer form. When I exited the account number field, the corner of my eye
As time goes on I find myself increasingly annoyed with login forms. As password managers like 1Password (which is what I use) and Chrome’s password manager (which I also sorta use) become more popular, it’s important for websites to be aware of how users go about logging into their sites. Let’s walk through some login patterns and why I think they’re not ideal. And then let’s look at some better
I threw a question out on Twitter regarding CSS/Sass authoring style. It was a difference between Option 1: .c-btn { ... } .c-btn__icon { ... } and Option 2: .c-btn { &__icon { ... } } The results were interesting so I wanted to write them up. Here we go! Option 1: Not Nested .c-btn { ... } .c-btn__icon { ... } As you can see, this looks like regular ol’ CSS. Because it is! Let’s unpack the pros a
We’re happy to announce Style Guide Guide, Gatsby Edition! You can check out the demo here. The workshop and the storefront There are lots of moving parts, tools, and environments involved in making a design systems take shape. We’ve found it helpful to break down two important environments of a design system into the “workshop” and the “storefront”. The “workshop” is the environment designed for
A while back, Harry Roberts introduced the concept of shame.css: a stylesheet dedicated to housing your nasty, hacky, quick-fix CSS The idea is to isolate all the stuff that doesn’t belong in your beautiful, well-architected CSS architecture, in order to revisit it when the team has time to refactor code and create more sturdy solutions. Application-specific components At the heart of a design sys
I absolutely love this article by Sarah Drasner about replacing jQuery with Vue.js. We need more articles like this. “Here’s how to replace the once-new hotness with the new hotness.” I’ve been neck-deep in React-land for a while, and I’m trying to think of how this article would look like for React. I’d imagine doing a toggle would look something like: Burn all of your markup down to the ground a
I’m going to be honest: I’ve had a hell of a time getting my head around React. More than any other technology I’ve touched over the last 10 years of my career, I just haven’t had it click for me. It’s very frustrating as I really want to learn it, and it’s clear the library has legs. Thankfully, Dan Abramov reached out to me when he saw me tweet in frustration about learning the library. He’s bee
I have yet to dive deep into CSS-in-JS, but I’ll admit I’m skeptical. This podcast by Chris Ferdinandi lays out a lot of the reasons why I’m a bit apprehensive. Three other observations I’ve noticed as I encounter CSS-in-JS in my consulting clients’ work and other projects I come across: Lack of portability: So much of my work involves helping gigantic organizations create and deploy design system
TL;DR: Design systems + CSS Zen Garden = Awesome. Is it possible to create a single design system that powers wildly different-looking brands and experiences? The answer is yes! But why would you want to? Different audiences and contexts – The team at GE recently discussed the opportunities and challenges of sending their Predix design system to different audiences within their gigantic, diverse o
I wrote a post where I talk about how a set of components living inside static design tools like Sketch isn’t itself a design system. Pardon my clickbait. Perhaps a better title would have been “Your Sketch library is not a(n entire) design system.” No doubt tools like Sketch are super valuable, and having a set of reusable components inside them helps design teams establish thoughtful and consist
You can write words explaining how to properly use a toaster, draw pictures of toasters, and even create more efficient ways to draw pictures of toasters. But at the end of the day, if you don’t have a functioning toaster, all that effort is for naught. In my design system workshops at design conferences, I’ll ask attendees where they are in their design system journey. Most hands go up when I ask
There are many facets of a design system initiative, so it can be extremely daunting to figure out where to begin. There are stakeholders to educate, tools to choose, principles to establish, frontend guidelines to settle on, components to build, tokens to create, design guidelines to write, contribution models to sort out, and so on. In my workshops and consulting engagements, I’ll often have tea
Things you could be doing instead of designing & building that card component for the umpteenth time Making that card pattern more accessible Making that card pattern more responsive Making that card pattern more performant Making that card pattern more agnostic so it can handle different content patterns Making that card pattern more resilient to extreme content edge cases Creating a thoughtful v
So I am writing a book. And I am really excited about it. It’s called Atomic Design and it’s all about creating and maintaining effective interface design systems. Here’s what I’m going to cover in the book: Explain why it’s increasingly essential to think of interfaces as systems rather than a collection of pages Introduce atomic design as a sound methodology for crafting effective interface desi
In his talk Designing Inspired Style Guides, Andy Clarke discusses the importance of creating digital style guides that go beyond being humble containers for UI assets and instead operate as beautiful vehicles that evoke the essence of the brand. When it comes to the current look of many UI pattern libraries, he says: They look ugly enough to have been designed by someone who enjoys configuring a
We just created a design system for a huge organization and established a CSS architecture we’re quite pleased with. It’s one of the first times I’ve ever gotten to a project’s finish line without wishing I’d done at least a few things differently. So I thought it would be great to share how we went about creating our system’s CSS architecture. To give a bit of a context for the project, we were t
Technically a pattern library is a simple collection of UI components, but in order for design system users do their best work, a pattern library should also present other important info. Let’s take a look at what information can be displayed alongside each pattern Title The name of the pattern should be prominent and easy to understand by everyone who visits the pattern library. Naming things is
Many are familiar with the concept of a content inventory. Content audits are usually performed in the early stages of a website redesign process to take stock of all a site’s content. It’s a tedious process involving spreadsheets and caffeine, but the hard work pays off. You end up all your content laid out on the table, which gives you a new perspective on what your content is and how to tackle
次のページ
このページを最初にブックマークしてみませんか？
『Brad Frost Web』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
