Download Atomic Design By Pattern Lab

+
Atomic Design By
Pattern Lab
Delaney Metzger
+
Goal of Atomic Design

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
+
What is Atomic Design?

“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
+
Atoms

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
+
Atoms - Example

<button type=“button”
onclick=“alert(“Hello
World!”)”>Click!</button>
Click!
+
Molecules

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
+
Molecules - Example

Labels

Inputs

Submit Button
Name
Email
Message
Submit
+
Organisms

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
+
Organisms - Example

Paragraph Element

Secondary Navigation

Search Form
Our Company
Address
Address Line 2
Email
Phone
Home
About
Services
Contact Us
Search Site
Enter Keyword
Search
+
Templates

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
+
Templates - Example
+
Pages

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
+
Conclusions

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
+
Exam Questions

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?
+
Exam Question Answers

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.
+
Works Cited

Pattern Lab


http://pattern-lab.info/about.html
Atomic Design

http://www.slideshare.net/bradfrostweb/atomic-design