Upload
bryan-wengren
View
487
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Atomic Design: Creating systems to promote consistency and scalability. This was a presentation I gave at #FredDev on 2/11/14 and is based on the Atomic Design Principals from @brad_frost bradfrostweb.com/blog/post/atomic-web-design/
Citation preview
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