20 jan 2016 - Frontend Bucharest - TechHub

1. Atomic Design

2. What is Atomic Design?
- a methodology, a set of rules, guidelines for constructing web design systems
What about other methodologies?
e.g.: DRY, KISS, SMACSS, BEM, etc
- use with whichever you want, Atomic Design doesn’t interfere with other
methodologies

3. What it isn’t?
It is not a UI framework (e.g.: bootstrap, foundation)
It is not library dependent (it isn’t bundled up with any js library nor plugin)
It is not production ready.

4. A better description
and understanding of Atomic Design:
It is more of a tool for
team education. It’s meant
to help designers do less
but with an inconsistency-proof
structure.

5. Layout inconsistencies:
.page-example1 {
.blockType1,
.blockType2 {
margin-bottom: 10px;
}
}
.page-example25 {
.blockType1 {
margin-bottom: 10px;
}
.blockType2 {
margin-bottom: 20px;
}
.blockType2 + .blockType1 {
margin-bottom: 30px;
}
}

6. Results expected:
1. Solid layout structure
Interfaces are made out of blocks (or components).
They fit together perfectly no matter their order.

7. 2. Time efficiency
An application doesn’t require a layout for every page.
Define each component and build pages
based on content structure.
e.g.:
block A = user content
block B = brand features
block C = newsletter box
Page 1 = block A + B +C
Page 2 = block B + A + C + A

8. Interface inventory
Index every element that will be used in a layout.
Classify every element and build components out of them.

9. Atoms
In interfaces, atoms are the smallest units, basic tags.
e.g.: headings, paragraph, label, inputs
Atoms can be classified in categories: text atoms, image atoms...
Molecules
Groups of atoms form a module.
e.g.:
image atom
paragraph atom => comment molecule
link atom

10. Organisms
Multiple molecules (or atoms) form a complex module.
e.g.: comment molecule * N times = comment organism
logo atom
navigation molecule => header organism
search form molecule

11. Templates
Starting with templates, be break the biochemistry analogy.
Templates are page-level objects formed by organisms.
e.g.: header organism + comment organism
+ footer organism = blog template
Pages
Pages are instances of templates, where dummy text
and placeholders are swapped with actual content.

12. Thank you