SlideShare a Scribd company logo
1 of 181
Download to read offline
ATOMIC DESIGN@brad_frost
PAGES
GRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH?
http://www.flickr.com/photos/pandora_6666/4927865092/
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
WHAT IS AN INTERFACE MADE OF?
http://bradfrost.github.com/this-is-responsive/patterns.html
Design systems, not pages.
-Andy Clarke
http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/
http://foundation.zurb.com/
getbootstrap.com
THESE THINGS ARE GREAT, BUT...
Atomic Design - An Event Apart San Diego
FRAMEWORK POTENTIAL PITFALLS
๏ One-size-fits-all
๏ Lookalike issues
๏ Potential for bloat/unneeded stuff
๏ Might not do everything you need
๏ Compatibility with existing sites
๏ Subscribe to someone else’s structure, naming, style
Tiny Bootstraps, for every client.
-Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/
Responsive deliverables should look
a lot like fully-functioning Twitter
Bootstrap-style systems custom
tailored for your clients’ needs.
-Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/
http://maban.co.uk/projects/front-end-style-guides/
BENEFITS OF FRONT-END STYLE GUIDES
๏ Promotes consistency and cohesion
๏ Easier to test
๏ Better workflow
๏ Creates a shared vocabulary
๏ Useful reference
http://24ways.org/2011/front-end-style-guides/
http://brettjankord.com/projects/style-guide-boilerplate/
http://patternprimer.adactio.com/
http://barebones.paulrobertlloyd.com
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
http://style.codeforamerica.org/
http://ux.mailchimp.com/patterns/
http://yelp.com/styleguide
http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
I LOVE THESE.
MO’ PATTERNS, MO’ PROBLEMS
๏ Time consuming to create
๏ Treated as a auxiliary project
๏ Often too abstract
๏ Seen only as a designer/developer tool
๏ Often created after a project launches
๏ Often incomplete/only serving present cases
๏ Lacking a clear methodology
ATOMIC DESIGN
2H2 + O2 → 2H20
C + O2 → CO2
CH4 + O2 → CO2 + H2O
C8H18 + O2 → CO2 + H20
C2H6 + O2 → CO2 + H2O
Atomic Design - An Event Apart San Diego
2H2+O2→2H20
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
http://joshduck.com/periodic-table.html
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
ENTER KEYWORD
SEARCH THE SITE
SEARCH
ENTER KEYWORD
SEARCH THE SITE
SEARCH
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
You can create good experiences without
knowing the content. What you can’t do is
create good experiences without knowing
your content structure. What is your content
made from, not what your content is.
-Mark Boulton
http://www.markboulton.co.uk/journal/structure-first-content-always
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
ABSTRACT CONCRETE
ABSTRACT CONCRETE
CREATORS CLIENTS
REFERENCE BUILD REVIEW
The idea of designing components like this, out of
context and without layout, might sound strange—
particularly if you’ve been used to designing Web pages
the traditional way. But we’ve been abstracting design
ideas like this for the longest time, for example in our
use of mood boards and even the cropped designs we find
on sites like Dribbble.
-Andy Clarke
http://stuffandnonsense.co.uk/blog/about/an-extract-from-designing-atoms-and-elements
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
DAVE OLSEN@dmolsen
WHAT PATTERN LAB IS
๏ A design system builder
๏ A comprehensive custom component library
๏ A pattern starter kit
๏ A practical viewport resizer
๏ An annotation tool
WHAT PATTERN LAB AIN’T
๏ A UI framework
๏ Language, library, or style dependent
๏ Incredibly rigid
๏ “Just” a pattern library, but also not a production-ready
static site generator
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
MOLECULE GUTS
code block!
!
<div class="block block-inset">
<div class="b-thumb">
{{> atoms-img-landscape-4x3 }}
</div>
<div class="b-text">
<h2>{{ headline.short }}</h2>
</div>
</div>
!
BASIC INCLUDE
code block!
!
!
!
!
!
!
!
{{> molecules-block-inset }}
!
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
ORGANISM GUTS
code block!
!
!
<header class="header" role="banner">
{{> atoms-header-ad }}
{{> atoms-logo }}
{{> molecules-primary-nav }}
{{> molecules-search }}
{{> molecules-social-nav }}
</header>
BASIC INCLUDE
code block!
!
!
!
!
{{> organisms-header }}
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
TEMPLATE GUTS
code block{{> organisms-header }}
<main role="main">
<div class="l-two-col">
<div class="l-main">
{{> organisms-article-body }}
{{> molecules-social-share }}
{{> organisms-comments }}
</div><!--end l-main-->
!
<div class="l-sidebar">
{{> organisms-related-posts }}
{{> organisms-recent-tweets }}
</div><!--end l-sidebar-->
</div><!--end l-two-col-->
</main><!--End role=main-->
{{> organisms-footer }}
!
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
CONTENT STRUCTURE ACTUAL CONTENT
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
TEMPLATE GUTS
code block{{# hero }}
{{> molecules-block-hero }}
{{/ hero}}
!
<div class="g g-3up">
{{# touts}}
<div class="gi">
{{> molecules-inset-block }}
</div>
{{/ touts}}
</div>
PIPING IN REAL CONTENT WITH JSON
code block!
!
"hero" : {
"img": {
"landscape-16x9": {
"src": "images/sample/mountains.jpg",
"alt": "Mountains"
}
},
"headline" : {
"medium" : "Top 10 mountin ranges"
}
}
PIPING IN REAL CONTENT WITH JSON
code block"touts" : [
{
"img": {
"landscape-4x3": {
"src": "../../images/sample/climber.jpg",
"alt": "Climber"
}
},
"headline" : {
"short" : "Extreme climbing tips"
}
},
{
"img": {
"landscape-4x3": {
"src": “../../images/sample/stream.jpg",
"alt": "Stream"
}
},
"headline" : {
"short" : “Stream Hiking"
}
VIEWER
320PX.
320PX.
480PX.
320PX.
480PX.
768PX.
320PX.
480PX.
768PX.
1024PX.
320PX.
480PX.
768PX.
1024PX.
THE FOLD.
320PX.
480PX.
768PX.
1024PX.
THE FOLD.
OH GOD THE FOLD.
RESOURCE
http://bradfrostweb.com/demo/ish/
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
ANNOTATIONS
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
code block!
!
{
"el": ".header",
"title": "Header",
"title": "The header is a global element…"
},
{
"el": ".nav",
"title": "Primary Navigation",
"title": "The navigation is…"
}
ANNOTATIONS WITH JSON
LINEAGE
Atomic Design - An Event Apart San Diego
A BUNCH OF OTHER STUFF
๏ Code view (Mustache and rendered HTML)
๏ Pattern status
๏ Auto-refresh
๏ Page follow
๏ Future: plugins
http://patternlab.io
IF ANYTHING GOES WRONG WITH
PATTERN LAB, BLAME @DMOLSEN.
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
SET EXPECTATIONS
http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg
As an industry, we sell websites like
paintings. Instead, we should be selling
beautiful and easy access to content,
agnostic of device, screen size, or context.
-Dan Mall
http://danielmall.com/articles/the-post-psd-era/
COMPLEX NAVIGATIONDEATH TO THE WATERFALL
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
GATHER
http://stylifyme.com/
Atomic Design - An Event Apart San Diego
http://bradfrostweb.com/blog/post/interface-inventory/
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
๏ Document your interface
๏ Promote consistency
๏ Establish which elements will be challenging to translate
into a responsive environment
๏ Lay the groundwork for a future style guide/pattern library
INTERFACE INVENTORY
http://blog.easy-designs.net/archives/evernote-for-interface-inventories/
ESTABLISH DIRECTION
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
RESOURCE
http://styletil.es/
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
ROLL UP OUR SLEEVES
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
CONTENT STRUCTURE ACTUAL CONTENT
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
http://trentwalton.com/2011/07/14/content-choreography/
Atomic Design - An Event Apart San Diego
WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.
THIS IS FUN!
MOBILE WEB
THANKS!@brad_frost

More Related Content

What's hot

Atomic design React Nova Presentation
Atomic design React Nova PresentationAtomic design React Nova Presentation
Atomic design React Nova PresentationSteve Zyglowicz
 
Git and GitFlow branching model
Git and GitFlow branching modelGit and GitFlow branching model
Git and GitFlow branching modelPavlo Hodysh
 
Introduction to CICD
Introduction to CICDIntroduction to CICD
Introduction to CICDKnoldus Inc.
 
CI CD Pipeline Using Jenkins | Continuous Integration and Deployment | DevOps...
CI CD Pipeline Using Jenkins | Continuous Integration and Deployment | DevOps...CI CD Pipeline Using Jenkins | Continuous Integration and Deployment | DevOps...
CI CD Pipeline Using Jenkins | Continuous Integration and Deployment | DevOps...Edureka!
 
Git branching strategies
Git branching strategiesGit branching strategies
Git branching strategiesjstack
 
Introduction to CI/CD
Introduction to CI/CDIntroduction to CI/CD
Introduction to CI/CDHoang Le
 
Build CICD Pipeline for Container Presentation Slides
Build CICD Pipeline for Container Presentation SlidesBuild CICD Pipeline for Container Presentation Slides
Build CICD Pipeline for Container Presentation SlidesAmazon Web Services
 
Mikrofrontend a Module Federation
Mikrofrontend a Module FederationMikrofrontend a Module Federation
Mikrofrontend a Module FederationThe Software House
 
CI/CD Best Practices for Your DevOps Journey
CI/CD Best  Practices for Your DevOps JourneyCI/CD Best  Practices for Your DevOps Journey
CI/CD Best Practices for Your DevOps JourneyDevOps.com
 
Flusso Continuous Integration & Continuous Delivery
Flusso Continuous Integration & Continuous DeliveryFlusso Continuous Integration & Continuous Delivery
Flusso Continuous Integration & Continuous DeliveryJoost van der Griendt
 
Technical Webinar: By the (Play) Book: The Agile Practice at OutSystems
Technical Webinar: By the (Play) Book: The Agile Practice at OutSystemsTechnical Webinar: By the (Play) Book: The Agile Practice at OutSystems
Technical Webinar: By the (Play) Book: The Agile Practice at OutSystemsOutSystems
 
"Micro-frontends, web development", Oleksandr Khivrych
"Micro-frontends, web development", Oleksandr Khivrych"Micro-frontends, web development", Oleksandr Khivrych
"Micro-frontends, web development", Oleksandr KhivrychFwdays
 
CI/CD for React Native
CI/CD for React NativeCI/CD for React Native
CI/CD for React NativeJoao Marins
 
CI/CD 101
CI/CD 101CI/CD 101
CI/CD 101djdule
 
DevOps Overview
DevOps OverviewDevOps Overview
DevOps OverviewSagar Mody
 

What's hot (20)

Atomic design in React
Atomic design in ReactAtomic design in React
Atomic design in React
 
Atomic design React Nova Presentation
Atomic design React Nova PresentationAtomic design React Nova Presentation
Atomic design React Nova Presentation
 
Git and GitFlow branching model
Git and GitFlow branching modelGit and GitFlow branching model
Git and GitFlow branching model
 
Feature Flags.pdf
Feature Flags.pdfFeature Flags.pdf
Feature Flags.pdf
 
Introduction to CICD
Introduction to CICDIntroduction to CICD
Introduction to CICD
 
CI CD Pipeline Using Jenkins | Continuous Integration and Deployment | DevOps...
CI CD Pipeline Using Jenkins | Continuous Integration and Deployment | DevOps...CI CD Pipeline Using Jenkins | Continuous Integration and Deployment | DevOps...
CI CD Pipeline Using Jenkins | Continuous Integration and Deployment | DevOps...
 
Git branching strategies
Git branching strategiesGit branching strategies
Git branching strategies
 
Introduction to CI/CD
Introduction to CI/CDIntroduction to CI/CD
Introduction to CI/CD
 
Build CICD Pipeline for Container Presentation Slides
Build CICD Pipeline for Container Presentation SlidesBuild CICD Pipeline for Container Presentation Slides
Build CICD Pipeline for Container Presentation Slides
 
Git101
Git101Git101
Git101
 
Mikrofrontend a Module Federation
Mikrofrontend a Module FederationMikrofrontend a Module Federation
Mikrofrontend a Module Federation
 
CI/CD Best Practices for Your DevOps Journey
CI/CD Best  Practices for Your DevOps JourneyCI/CD Best  Practices for Your DevOps Journey
CI/CD Best Practices for Your DevOps Journey
 
Flusso Continuous Integration & Continuous Delivery
Flusso Continuous Integration & Continuous DeliveryFlusso Continuous Integration & Continuous Delivery
Flusso Continuous Integration & Continuous Delivery
 
Technical Webinar: By the (Play) Book: The Agile Practice at OutSystems
Technical Webinar: By the (Play) Book: The Agile Practice at OutSystemsTechnical Webinar: By the (Play) Book: The Agile Practice at OutSystems
Technical Webinar: By the (Play) Book: The Agile Practice at OutSystems
 
"Micro-frontends, web development", Oleksandr Khivrych
"Micro-frontends, web development", Oleksandr Khivrych"Micro-frontends, web development", Oleksandr Khivrych
"Micro-frontends, web development", Oleksandr Khivrych
 
CI/CD for React Native
CI/CD for React NativeCI/CD for React Native
CI/CD for React Native
 
CI/CD 101
CI/CD 101CI/CD 101
CI/CD 101
 
DevOps Overview
DevOps OverviewDevOps Overview
DevOps Overview
 
Introduction to CI/CD
Introduction to CI/CDIntroduction to CI/CD
Introduction to CI/CD
 
Sonarlint
SonarlintSonarlint
Sonarlint
 

Viewers also liked

Looking for a place to hang my helmet
Looking for a place to hang my helmetLooking for a place to hang my helmet
Looking for a place to hang my helmetBrad Frost
 
Beyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web DesignBeyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web DesignBrad Frost
 
For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)Brad Frost
 
For a Future-Friendly Web
For a Future-Friendly WebFor a Future-Friendly Web
For a Future-Friendly WebBrad Frost
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
 
Selling The Mobile Web
Selling The Mobile WebSelling The Mobile Web
Selling The Mobile WebBrad Frost
 
Death To Bullshit
Death To BullshitDeath To Bullshit
Death To BullshitBrad Frost
 
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown EditionResponsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown EditionBrad Frost
 
For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)Brad Frost
 
Adventures in Atomic Design
Adventures in Atomic DesignAdventures in Atomic Design
Adventures in Atomic DesignAndrew Jones
 
Helping Your Company Adopt a User-Centered Process
Helping Your Company Adopt a User-Centered ProcessHelping Your Company Adopt a User-Centered Process
Helping Your Company Adopt a User-Centered ProcessZack Naylor
 
Wp3 refresh pgh
Wp3 refresh pghWp3 refresh pgh
Wp3 refresh pghMrDirby
 
The Designers Duty
The Designers DutyThe Designers Duty
The Designers DutyJon Dascola
 
Presentation Drupal Content Management Framework
Presentation Drupal Content Management FrameworkPresentation Drupal Content Management Framework
Presentation Drupal Content Management FrameworkJoshua Powell
 
Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)webdagene
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerkdie.agilen GmbH
 
Finding and Keeping your Creative Motivation
Finding and Keeping your Creative MotivationFinding and Keeping your Creative Motivation
Finding and Keeping your Creative MotivationElliott Munoz
 
Lean Experiments for Agile Teams
Lean Experiments for Agile TeamsLean Experiments for Agile Teams
Lean Experiments for Agile Teamsuxpin
 

Viewers also liked (20)

Looking for a place to hang my helmet
Looking for a place to hang my helmetLooking for a place to hang my helmet
Looking for a place to hang my helmet
 
Beyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web DesignBeyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web Design
 
For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)
 
For a Future-Friendly Web
For a Future-Friendly WebFor a Future-Friendly Web
For a Future-Friendly Web
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
 
Selling The Mobile Web
Selling The Mobile WebSelling The Mobile Web
Selling The Mobile Web
 
Death To Bullshit
Death To BullshitDeath To Bullshit
Death To Bullshit
 
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown EditionResponsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
 
For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)
 
Adventures in Atomic Design
Adventures in Atomic DesignAdventures in Atomic Design
Adventures in Atomic Design
 
Uso de las tics en la formación ddes
Uso de las tics en la formación  ddesUso de las tics en la formación  ddes
Uso de las tics en la formación ddes
 
Helping Your Company Adopt a User-Centered Process
Helping Your Company Adopt a User-Centered ProcessHelping Your Company Adopt a User-Centered Process
Helping Your Company Adopt a User-Centered Process
 
Wp3 refresh pgh
Wp3 refresh pghWp3 refresh pgh
Wp3 refresh pgh
 
Web Design Process vs. Philadelphia
Web Design Process vs. PhiladelphiaWeb Design Process vs. Philadelphia
Web Design Process vs. Philadelphia
 
The Designers Duty
The Designers DutyThe Designers Duty
The Designers Duty
 
Presentation Drupal Content Management Framework
Presentation Drupal Content Management FrameworkPresentation Drupal Content Management Framework
Presentation Drupal Content Management Framework
 
Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
 
Finding and Keeping your Creative Motivation
Finding and Keeping your Creative MotivationFinding and Keeping your Creative Motivation
Finding and Keeping your Creative Motivation
 
Lean Experiments for Agile Teams
Lean Experiments for Agile TeamsLean Experiments for Agile Teams
Lean Experiments for Agile Teams
 

Similar to Atomic Design - An Event Apart San Diego

Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Brad Frost
 
Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)Ryan Cross
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)Christopher Schmitt
 
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style GuidesAdvanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style GuidesAidan Foster
 
Does my DIV look big in this?
Does my DIV look big in this?Does my DIV look big in this?
Does my DIV look big in this?glen_a_smith
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 BoilerplateMichael Enslow
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)Future Insights
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Clarissa Peterson
 
How to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPressHow to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPressGerald Glynn
 
Killing the Angle Bracket
Killing the Angle BracketKilling the Angle Bracket
Killing the Angle Bracketjnewmanux
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedGil Fink
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapJosh Jeffryes
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Developmentmwrather
 
Frontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser renderingFrontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser renderingManuel Garcia
 
Introduction to web components
Introduction to web componentsIntroduction to web components
Introduction to web componentsMarc Bächinger
 

Similar to Atomic Design - An Event Apart San Diego (20)

Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
 
Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
 
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style GuidesAdvanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
 
Does my DIV look big in this?
Does my DIV look big in this?Does my DIV look big in this?
Does my DIV look big in this?
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
How to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPressHow to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPress
 
Killing the Angle Bracket
Killing the Angle BracketKilling the Angle Bracket
Killing the Angle Bracket
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop
 
Frontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser renderingFrontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser rendering
 
Introduction to web components
Introduction to web componentsIntroduction to web components
Introduction to web components
 
SCSS Styleguide
SCSS StyleguideSCSS Styleguide
SCSS Styleguide
 

Recently uploaded

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 

Recently uploaded (19)

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 

Atomic Design - An Event Apart San Diego