+

Atomic Design ByPattern LabDelaney 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 CompanyAddressAddress Line 2

EmailPhone

HomeAboutServicesContact Us

Enter Keyword

Search Site

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