Episode № 103 Brad Frost — Atomic Design

January 25th, 2017 · 50 minutes

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.

Guest Starring: Brad Frost

This episode of Non Breaking Space Show 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 “NONBREAKINGSPACE” 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—like us on Facebook.
  • 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.


Links and Show Notes

Screenshot of Brad Frost during Non Breaking Space Show

Discussion Jump Points
  • 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

Christopher Schmitt
Christopher Schmitt on Twitter
Brad Frost
Brad Frost on Twitter
📺 Brad Frost —Atomic Design on YouTube
Brad Frost's Blog Post on Atomic Design
Pattern Lab
Dave Olsen talking about Pattern Lab on Non Breaking Space Show №86
📺 Dave Olsen interview — Pattern Lab 2 on YouTube
Bootstrap
Foundation
Brian Muenzenmeyer
LAMP Stack
ARTIFACT Conference
Shopify
Brad Frost 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
Non Breaking Space Show on Amazon Echo

Say aloud, "Alexa, play Non Breaking Space Show podcast on Tune-in!"

Non Breaking Space Show on TuneIn
Non Breaking Space Show on iTunes
Non Breaking Space Show on Facebook
📺 Non Breaking Space Show on YouTube
Non Breaking Space Show Newsletter