adventures in atomic design
TRANSCRIPT
ABOUT MEWeb developer since 1997
Senior frontend developer at MoZeus
Illustrator, cartoonist, writer, daddy
2
I’m AtlantaJones everywhere:
WHAT ARE PAGES EVEN?“We’re a startup looking to launch a 5-page website this October…”
“How long will it take just to build the home page?”
“How are we ever going to redesign this university website that contains over 30,000 pages?!”
7
GOING MODULARBackends don’t always generate fully-baked “pages”
Their API’s are consumed by components on multiple platforms
Web apps are already using modular components for architecture
Why not our designs and UI?
10
EARLY ISSUESOrganization like SMACSS only got us so far
Not accessible for designers
No references for existing components
Too easy to reinvent wheels
Style bloat ensues
11
smacss.com
EARLY ISSUES“Living” style guides?
Not very flexible
Provides no context
Easily outdated or abandoned
14
WHAT IS ATOMIC DESIGN?Dreamed up by Brad Frost in 2013
Based on a chemistry-inspired metaphor
Five phases:
16
ATOMSThe basic building block of all matter
Can’t be broken down further without losing function or meaning
Mostly limited to HTML tags
Also more abstract elements like color palettes, font stacks or animations17
MOLECULESGroups of two or more atoms
Form simple, functional components
Groups of UI elements functioning together as a unit
19
ORGANISMSGroups of molecules and atoms
Can also contain smaller organisms
Form distinct sections of an interface
21
ORGANISMS: EXAMPLE
23
SEARCH THE SITE
SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT
Atom: logo Molecule: Nav Molecule: Search
Organism: Global Header
TEMPLATESLike low-fidelity wireframes
Provide context for molecules and organisms
Contain only placeholder text and images
24
PAGESMost concrete stage in Atomic Design
Specific “instances” of templates
Real representative content
Multiple pages from single templates
26
PATTERN LIBRARIESPromote consistency
Allow faster, more collaborative workflow
Establish a shared vocabulary
Make testing easier
Make estimating easier
Serve as documentation
30
PATTERN LABWeb app that compiles code patterns into a functional front-end UI
Allows for separation between structure and content
Serves as a blueprint for backend developers
Allows non-developers to contribute to the living, breathing design system
34
PATTERN LABBoth PHP and Node-based versions
Static site generator
Multiple “editions” support both Mustache and Twig templates
Also a Drupal-friendly version
35
UNDER THE HOOD
65
misc config filesPattern Lab “engine”static file outputworking files & templatesphp Composer dependencies
MUSTACHE VS. TWIG?Both very capable choices
Mustache:
“logic-less”
No “ifs”, “elses” or “for loops”
Twig:
Offers more features and flexibility
More PHP project friendly69
THE PROBLEMPatterns need to be consumed by backend
Crap.
Patterns should serve as the blueprint
Patterns easily detached from the library
PHP-based projects may have an easier transition
73
THE HOLY GRAILTwo-way synchronization between the library and backend
Gem libraries?
Composer packages??
Node modules???
74
CAUTIONS & CAVEATSEveryone has to be on board
Make/test components within library first
Roll in “hot fix” changes ASAP
Avoid “Bootstrap-itis”
Naming things is super hard
Avoid names based on appearance or location
77
NOTES ON ATOMIC DESIGNIt’s not restricted to any certain technology
Can be applied to all UI, not just web
Helps when designing web and mobileUI’s simultaneously
78
“AFTER WE DELIVER THIS SITE, WE WON’T BE INVOLVED
ANYMORE.
IS IT STILL WORTH BUILDING A WHOLE PATTERN LIBRARY?”
79
“DON’T FORGET, ONE OF THE DELIVERABLES IS A STYLE GUIDE.”
80
the client:
“THIS IS IT. YOU’VE BEEN LOOKING AT
IT THIS WHOLE TIME.”
me:
GO FORTH“Pages” giving way to modular systems
Teams need something more
Atomic Designs == better communication
Better, more consistent, reusable components
Better, faster response from clients
A ready-made instruction manual
82
RESOURCEShttp://bradfrost.com/blog/post/atomic-web-design
http://atomicdesign.bradfrost.com
http://patternlab.io
http://mustache.github.io
http://twig.sensiolabs.org
Smashing Magazine Pattern Lab 2 Article
83