Atomic design
-
Upload
bryan-wengren -
Category
Technology
-
view
431 -
download
0
description
Transcript of 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