Atomic

Design

by zach fedor

What is Design?

which one of the two possible websites are you currently designing?

de - sign

/dəˈzīn/

noun:

  1. a plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made.
  2. purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object.

Generic Design Process

  • Discovery
  • Atmosphere
  • Layout
  • Comprehensives

...now you can start to build it

Generic Design Process

  • Discovery
  • Atmosphere
  • Layout
  • Comprehensives

...now you can start to build it

...again.

What Could

Go Wrong?

Problems With current Process

  • Developers Aren't Involved
  • Users Don't Like Change
  • Leads to Artifacts
  • Page Metaphor

The Page

(3500 Years Ago)

The Page

(Today)

Design Systems

Are needed over a

Collection of Pages

Visual Identity is important

but will always be subjective

The Elements of Chemistry

The Elements of Interface

Atoms

  • HTML elements
  • Color, Animations, etc.
  • Useless on it's own

Molecules

  • Groups of bonded atoms
  • Useful entity
  • Does one thing well

Organisms

  • Molecules are building blocks
  • Added complexity
  • Composed of similar or dissimilar parts

Templates

  • Groups of organisms to form layout
  • Low fidelity
  • Start to see final design

Pages

  • Instance of a template
  • Context
  • Allows testing

One
Two
Three

DesignEr to Developer Handoff

DesignEr And Developer System

What the Usual Process Looks Like

Isn't This just a new step?

You're Creating a Foundation

Tools

  • Pattern Libraries
  • Pattern Libraries
  • Pattern Libraries

Time for a Demo

Astrum     +     JEKYLL

Credit:

Brad Frost

http://atomicdesign.bradfrost.com/

Questions?

@zachfedor

the industrial resolution

techlancaster.com

Atomic Design

By zach fedor

Atomic Design

An overview of Brad Frost's philosophy on designing systems of components as opposed to a collection of pages.

  • 1,400