+
Delaney Metzger
+
Atomic Design is an idea that can be used to translate the creative side into what the client wants
Starts with basic ideas and builds up to working prototypes
These building blocks go from abstract ideas to concrete interfaces
+
“Atomic Design is a methodology used to construct web design systems”
In other words Atomic Design is a way to create your own effective, web based templates
Atomic Design is the idea that all sites, no matter how complex can be broken down into five distinct stages:
Atoms, Molecules, Organisms, Templates, and Pages
+
The building blocks of a website
Basic tags
These items cannot be broken down any further
Not very useful on their own
Examples
Form labels
Buttons
Fonts
+
<button type=“button” onclick=“alert(“Hello
World!”)”>Click!</button>
Click!
+
Molecules refer to groups of atoms bonded together
In Atomic Design this translates to “groups of elements
(atoms) that function together as a unit”
The idea of do one thing well
Example
Three form labels (one for name, one for email, and one for message), three input boxes, and a button combine together to form a contact form molecule
+
Labels
Inputs
Submit Button
Name
Message
Submit
+
Organisms are “groups of molecules joined together to form distinct sections of an interface”
Building molecules with atoms, and in turn organisms leads to creating portable and reusable components
Can have similar and dissimilar molecules types
Example
Footer organism may include a search form, secondary navigation, and paragraph atom of contact information
+
Paragraph Element
Secondary Navigation
Search Form
Our Company
Address
Address Line 2
Phone
Home
About
Services
Contact Us
Search Site
Enter Keyword
Search
+
Templates are made up of “mostly organisms combined together to form page-level objects”
This is where HTML and wireframes come into play
Focuses on structure alone, not content
Eventually yields deliverable/production code
+
+
Pages are specific illustrations of a particular template
They are used to test the effectiveness of the design
Are there changes to be made?
In this stage real content is substituted for placeholder content for the client to see
+
No matter how complex a site build is, it can be broken
down into simple components
Breaking down a build into smaller parts makes for easier changes and additions
Easier to go from abstract ides to concrete interfaces with smaller building blocks
+
1) What are the five basic components of Atomic Design?
2) Which component takes into account user testing and input from the client?
3) What advantages are there to utilizing Atomic Design?
+
1) Atoms, Molecules, Organisms, Templates, and Pages
2) The Pages component is when real content is placed into the interface and testing should occur here as well as any changes should be made at this stage
3) In utilizing Atomic Design, smaller components can be built first and then assembled into the interface. This makes for easily repeatable sections and faster building of web site templates. In addition Atomic Design allows for easier changes and additions by slowly building up from small ideas to the finished piece.
+
Pattern Lab
http://pattern-lab.info/about.html
Atomic Design
http://www.slideshare.net/bradfrostweb/atomic-design