Brad Frost @ #btconf
Written by Jan Beck on in Düsseldorf, Germany.
“Atomic Design” - notes from Brad Frosts talk at Beyond Tellerrand 2013.
We understood that designs are no longer pixel-perfect. We design no longer screen pages but a series of compounds. Some solutions:
Pattern Gallery, ui parade, and responsive patterns try to solve some problems of the multi-device era.
- Front-end Style Guides by Anna Debenham
- Style Guide Boilerplate
- Style Guide by Starbucks
- Pattern Primer by Jeremy Keith
- Common Patterns in Styleguides, Boilerplates and Pattern Libraries
These things are awesome but they are
- time consuming,
- treated as auxiliary project,
- often created after a project launches,
- often too abstract,
- often incomplete / only serving present cases,
- lacking methodology or
- seen only as a designer/developer tool.
Atoms (HTML elements)
- Building blocks of an interface
- Can’t be broken down any further
- can’t do anything alone
- More concrete than atoms
- encourages a “do one thing and do it well” philosophy (see Harry )
- Often serve as a backbone of a more complex system
Organisms (site snippets like header, footer, navigation etc.)
- Group of molecules joined together to form a distinct section
- Enourages creating standalone, portable, reusable components
- Responsive Comping: Obtaining Signoff without Mockups
- Page level
- mostly comprised of groups of organisms
- Begin their life as HTML wireframes, increase fidelity over time
- Client facing. Very concrete.
- We are not throwing away code: Eventually it becomes the deliverable/production code.
- specific instance of a template
- Highest fidelity. Template content is replaced with real / sample content
- Hub for most people involved in the process
- test the effectiveness of the system
- Test variations in the template: design/content tweaks, include/exclude organisms, etc.
Everybody benefits: the client sees something. Creators are actually creating the product. When reviewing pages atoms remain the reference point for the pages.
Introducing Pattern Lab
A collection of tools to help create and maintain atomic web design systems.
What it is:
- A comprehensive component library
- A pattern starter kit
- A design system builder
- A practical viewport resizer
- A design annotation tool
What it’s not:
- A UI framework
- Language/library/style dependent
- Incredibly rigid