Atomic design

Bryan Wengren | @bwengren

Atomic Design creating systems to promote consistency and scalability

Bryan WengrenSr. Client-side developer UX Generalist “Unicorn”@bwengren

Atomic Design

❖ Core concepts

❖ Real-time application

❖ Is it right for my project/ company?

“I need a mock-up of…”

http://fixitordeal.files.wordpress.com/2010/10/sad-black-kitten-in-hell.jpg

“Atomic design provides a clear methodology for

crafting design systems…”–Brad Frost

http://bradfrostweb.com/blog/post/atomic-web-design/

Atoms combine to form elements, elements create

molecules, molecules create organisms, and so on.

http://bradfrostweb.com/blog/post/atomic-web-design/

ATOMS

ATOMSAtoms are the basic building blocks

MOLECULES

MOLECULESMolecules are groups of atoms bonded together

Iterate, iterate, iterate

ORGANISMS

ORGANISMSCombine molecules together to form organisms

Iterate, iterate, ITERATE!

Which one is a contact us form?

TEMPLATES

TEMPLATESTemplates consist mostly of groups of

organisms stitched together to form pages

PAGES

PAGESPages are specific instances of templates

FRAMEWORKS

Frameworks

❖ Look-alike issues!

❖ Potential for bloated/ unneeded mark-up!

❖ Compatibility issues with existing sites!

❖ Not always the lesser of two evils

DOES IT WORK?

Page title

Input

Error

Buttons

Toggle

Nav bar

“I need a mock-up of…”

IS IT FOR ME?

Is it for me?

❖ Atomic Design may not be for everyone or every situation. !

❖ It has to make sense for the project, the infrastructure. !

❖ It can be difficult to apply to legacy structure.

“Atomic design promotes consistency and cohesive

between teams.”- Luke Wroblewski

http://www.lukew.com/ff/entry.asp?1809

#atomicdesign | @brad_frost | @lukew

http://pattern-lab.info/about.html

Atomic Design

http://bradfrostweb.com/blog/post/atomic-web-design/

Bryan WengrenSr. Client-side developer UX Generalist “Unicorn”@bwengren