Non Breaking Space Show 103: Brad Frost — Atomic Design

Brad Frost is the web designer who created the mental model of Atomic Design. He’s a sought-after designer, speaker, and consultant about responsive design. His new book Atomic Design explains the concept of modular design as well as how to position it in a workflow for multi-device web developers.

Brad Frost is the web designer who created the mental model of Atomic Design. He’s a sought-after designer, speaker, and consultant about responsive design. His new book Atomic Design explains the concept of modular design as well as how to position it in a workflow for multi-device web developers.

This episode of Goodstuff Master Audio Feed is sponsored by:


SVG Summit — A full-day, virtual UX design conference on SVG that you can attend online on February 15th. Free recordings with registration at SVG Summit. Use discount code NONBREAKINGSPACESHOW for 20% off.
CSS Dev Conf — Conference dedicated to CSS and its super friend technologies like JavaScript, Sass, NPM, and more. A limited supply of Early Bird Tickets go on sale soon. Register now!
UX Design Newsletter — A weekly free newsletter containing a collection of tutorials, articles, and videos about frontend design and development, plus tips on how to bring better engagement to the multi-device world curated by Christopher Schmitt.
Feed.Press — Hosting and feed support provided by Feed.Press. Sign-up today and try FeedPress on a 14-day trial (no contracts or commitments). Use promo code NBSP during checkout to get 10% off your first year.

Brad Frost
Brad Frost on Twitter
Brad Frost’s blog post on Atomic Design
Dave Olsen on Non-Breaking Space Show #86 talking Pattern Lab
Bootstrap
Foundation
Pattern Lab
Brian Muenzenmeyer
Lamp Stack
Pattern Lab
Tiffany & Co.
Artifact Conference
Shopify
Brad on GitHub
Atomic Design on Github
DeployBot
The book, Atomic Design, free online version
Buy Brad’s Frost Atomic Design book
Ron Popeil
Owen Gregory

Jump to a conversation on…

3:10 Introduction
3:40 Brad describing Atomic Design
5:01 5 Distinct stages of UI
8:02 Organisms and hierarchy of a webpage
10:40 Introduction of pattern lab
12:30 Pattern lab is really plain, you have to bring your own vision, it’s a workspace
16:16 UI Auditing, consistency and patterns of website forms
18:02 How to introduce people to change and convince them that change is good
21:04 Communication with boss, don’t ask permission because boss only cares about end result
23:30 We’re already doing things like Pattern Lab - we just need to be more aware of it.
24:35 Don’t ask for permission, ask for forgiveness after.
27:01 Don’t need to go vertical for approval, talk with your colleagues
29:01 29:30 Example of how responsive experience works
30:03 Approval by way of conversion instead of convincing
31:30 Working without boss approval to make a bank site responsive
33:01 Page concept is out of date and from process standpoint doesn’t serve it’s use
34:20 Keep language the same, call it a webpage, but make website an ecosystem not a printed page
37:05 Keeping things above the fold
38:03 Using open source for writing the book and book deployment
41:45 Contributions to the book from others
45:19 How to find the book
48:15 Ending the interview with thanks