THE PATTERN LANGUAGE

253 patterns for towns, buildings, and construction

offices, workshops, and public buildings

• 146. FLEXIBLE OFFICE SPACE
• 147. COMMUNAL EATING
• 148. SMALL WORK GROUPS
• 149. RECEPTION WELCOMES YOU
• I50. A PLACE TO WAIT

What is Atomic Design

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are: Atoms. Molecules. Organisms. Templates. Pages. – Brad Frost

Atoms

molecules

organisms

What is Modular Design?

-Modular web design is comprised of two types of patterns   Content Patterns and Display Patterns

Content Patterns

 “a solution to a recurring design problem, such that you could use the solution many times and never use it in the same way twice.”

-Nathan Curtis

Display pattern

Display pattern describes a specific rendering and can be applied to multiple types of Content patterns.

Content Pattern

Display Pattern

Advantages of using Modular Design Methodology

Dry Code

More collaborative and iterative process

Empower admins and content editors

Dry - Don't Repeat Yourself

WaterFall is Broken

More collaborative and iterative process

Agile With Atomic Design

Empower admins and content editors

Modular Design Process

Identify Patterns

Categorize Patterns

Categorize patterns

Content Pattern – WP editor Gutenberg Blocks

Design Pattern – HTML & SCSS

Organize you SCSS

Atoms –  Color, Typography, Iconography – Global SCSS

Molecules – Theme styles, layout, utils

Organisms – A SCSS file for each Block

Questions?

Thank You