SlideShare ist ein Scribd-Unternehmen logo
1 von 173
Downloaden Sie, um offline zu lesen
ATOMIC DESIGN@brad_frost
Atomic design
DESIGN SYSTEMS
Atomic design
Atomic design
http://styletil.es
Atomic design
Atomic design
Atomic design
http://sparkbox.github.com/style-prototype/
Atomic design
COMPONENTS
We’re not designing pages,
we’re designing systems of components.
-Stephen Hay
http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
WHAT IS AN INTERFACE MADE OF?
Atomic design
Atomic design
Atomic design
http://bradfrost.github.com/this-is-responsive/patterns.html
FRAMEWORKS
RESOURCE
http://foundation.zurb.com/
RESOURCE
http://twitter.github.com/bootstrap/
THESE THINGS ARE GREAT, BUT...
FRAMEWORK POTENTIAL PITFALLS
๏ Subscribe to other developers’ structure/naming/style
๏ Lookalike issues
๏ One-size-fits-all
๏ Potential for bloat/unneeded stuff
๏ Might not do everything you need
๏ Ability to scale
๏ Compatibility with existing sites
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/
PATTERN LIBRARIES
We’re not designing pages, we’re
designing systems of components.
-Stephen Hay
http://24ways.org/2011/front-end-style-guides/
BENEFITS OF FRONT-END STYLE GUIDES
๏ Easier to test
๏ Better workflow
๏ Shared vocabulary
๏ Useful reference
http://24ways.org/2011/front-end-style-guides/
http://gim.ie/fZyK
http://pea.rs/
http://brettjankord.com/projects/style-guide-boilerplate/
http://patternprimer.adactio.com/
http://barebones.paulrobertlloyd.com
Atomic design
Atomic design
Atomic design
http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/
Atomic design
Atomic design
Atomic design
I LOVE THESE.
MO’ PATTERNS, MO’ PROBLEMS
๏ Time consuming to create
๏ Treated as a auxiliary project
๏ Often created after a project launches
๏ Often too abstract
๏ Seen only as a designer/developer tool
๏ Often incomplete/only serving present cases
๏ Lacking a methodology
ATOMIC DESIGN
H2 + O2 → H20
C + O2 → CO2
CH4 + O2 → CO2 + H2O
C8H18 + O2 → CO2 + H20
C2H6 + O2 → CO2 + H2O
Atomic design
H2+O2=H20
H2+O2→H20
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
http://joshduck.com/periodic-table.html
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
ATOMS
๏ Building blocks of an interface
๏ Can’t be broken down any further
without losing their meaning
๏ Abstract
๏ Often not too useful on their own
๏ Good as an at-a-glance reference
๏ See all your global styles laid out
at once
Atomic design
Actin’ fool breakin’ shit down
to molecules
-Busta Rhymes
Atomic design
H2+O2=H20
H2+O2→H20
Atomic design
Atomic design
MOLECULES
๏ Group of atoms bonded together
๏ Smallest fundamental units of a
compound
๏ More concrete than atoms
๏ Encourage a “do one thing and
do it well” philosophy
๏ Often serve as the backbone for a
more complex system
Atomic design
Atomic design
Atomic design
Atomic design
ORGANISMS
๏ Group of molecules joined
together to form a distinct section
๏ Complex molecules
๏ Can consist of similar and/or
different molecule types
๏ Encourages creating standalone,
portable, reusable components
Atomic design
Atomic design
Atomic design
http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups
Atomic design
Atomic design
TEMPLATES
๏ Page-level
๏ Mostly comprised of groups of
organisms
๏ Begin their life as HTML
wireframes, increase fidelity over
time
๏ Client facing.Very concrete.
๏ Eventually becomes the
deliverable/production code
f
Atomic design
Atomic design
PAGES
๏ Specific instance of a template
๏ Highest fidelity.Template content
is replaced with real/sample
content
๏ The hub for most people involved
in the process.
๏ Test the effectiveness of the
system
๏ Test variations in the template:
design/content tweaks, include/
exclude organisms, etc.
Atomic design
ABSTRACT CONCRETE
ABSTRACT CONCRETE
CREATORS CLIENTS
REFERENCE BUILD REVIEW
ATOMIC DESIGN
๏ Provides a methodology for crafting an effective
design system
๏ Easily traverse from abstract to concrete
๏ Promotes consistency and cohesion
๏ Assembles rather than deconstructs
Atomic design
Atomic design
Pattern Lab is a collection of tools
to help create and maintain
atomic web design systems.
WHAT PATTERN LAB IS
๏ A comprehensive component library
๏ A pattern starter kit
๏ A design system builder
๏ A practical viewport resizer
๏ A design annotation tool
WHAT PATTERN LAB ISN’T
๏ A UI framework
๏ Language/library/style dependent
๏ Incredibly rigid
Atomic design
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/
PATTERN BUILDER
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
MOLECULE GUTS
code block<div class="block block-inset">
<a href="#" class="inner">
<div class="b-thumb">
<?php inc('atom','landscape') ?>
</div>
<div class="b-text">
<h2 class="headline">Headline:
Lorem ipsum dolor sit amet,
consectetur adipisicing</h2>
</div>
</a>
</div>
BASIC INCLUDE
code block
<?php inc(‘molecule’,‘pagination’)?>
Atomic design
Atomic design
ORGANISM GUTS
code block<section class="comments section">
<div class="comments-container" id="comments-
container">
<h2 class="section-title">59 Comments</h2>
<?php inc('molecule','comment-form'); ?>
<ul class="comment-list">
<?php inc('molecule','single-comment'); ?>
<?php inc('molecule','single-comment'); ?>
<?php inc('molecule','single-comment'); ?>
<?php inc('molecule','single-comment'); ?>
<?php inc('molecule','single-comment'); ?>
</ul>
</div>
<?php inc('molecule','pagination') ?>
</section>
BASIC INCLUDE
code block
<?php inc(‘organism’,‘comments’)?>
Atomic design
Atomic design
Atomic design
Atomic design
TEMPLATE GUTS
code block<?php inc('organism','header'); ?>
<div role="main">
<div class="l-two-col">
<div class="l-main">
<article class="article">
<header class="article-header">
<h1>Article Headline Lorem ipsum dolor sit</h1>
<?php inc('molecule','byline-author-time') ?>
</header>
<?php inc('organism','article-body') ?>
</article><!--end .article-->
<?php inc('molecule','social-share') ?>
<?php inc('organism','comment-thread') ?>
</div><!--end l-main-->
<div class="l-sidebar">
<?php inc('organism','related-posts') ?>
<?php inc('organism','recent-tweets') ?>
</div><!--end l-sidebar-->
</div><!--end l-two-col-->
</div><!--End role=main-->
<?php inc('organism','footer'); ?>
f
Atomic design
Atomic design
Atomic design
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.
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
DISCO MODE
Atomic design
HAY! MODE
Start with the small screen first,
then expand until it looks like shit.
Time for a breakpoint!
-Stephen Hay
http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
Atomic design
MANUAL
Atomic design
Atomic design
VIEW MODES
Atomic design
Atomic design
Atomic design
WHY PATTERN LAB
๏ Serves as a hub for the entire design process
๏ Useful tool for everyone: information architects, designers,
developers, clients
๏ Can easily traverse from abstract to concrete
๏ Write HTML/CSS/JS as you please. Name things as you
please.
๏ Start with a system rather than deconstruct later
๏ Encourages flexibility
๏ Document as you go
WHAT’S NEXT?
DAVE OLSEN@dmolsen
Atomic design
Atomic design
Atomic design
MINIMIZE DEPENDENCIES
MO LANGUAGES
Atomic design
Atomic design
INCLUDES ARE INCLUDES
code block//PHP
<?php inc(‘molecule’,‘pagination’)?>
//Codekit
<!-- @import "m-pagination.kit" -->
//Hammer
<!-- @include _m-pagination.html -->
//Ruby (maybe, I don’t know)
load 'm-pagination.rb'
Atomic design
HUGE THANK YOU
๏ Dave Olsen
๏ Dan Mall
๏ Josh Clark
๏ Jonathan Stark
๏ Jennifer Brook
๏ Anna Debenham
๏ Jeremy Keith
๏ Brett Jankord
๏ Paul Robert Lloyd
๏ Tyler Sticka
๏ Harry Roberts
๏ Dan Cederholm
Atomic design
https://github.com/bradfrost/patternlab
Atomic design
http://patternlab.bradfrostweb.com
WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.
Atomic design
Atomic design
Atomic design
WORK HARD.
DON’T BE AN ASSHOLE.
SHARE WHAT YOU KNOW.
THANKS!@brad_frost

Más contenido relacionado

Was ist angesagt?

Creating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany SonefeldCreating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany Sonefelduxpin
 
Design System Proposal
Design System ProposalDesign System Proposal
Design System ProposalCharlie Weston
 
Design System as a Product
Design System as a ProductDesign System as a Product
Design System as a ProductThoughtworks
 
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX EvolutionDesign Systems: Enterprise UX Evolution
Design Systems: Enterprise UX EvolutionAnne Grundhoefer
 
A design system. A year in review.
A design system. A year in review.A design system. A year in review.
A design system. A year in review.James Ferguson
 
Design Systems (english) #UXcamHH
Design Systems (english) #UXcamHHDesign Systems (english) #UXcamHH
Design Systems (english) #UXcamHHBenno Loewenberg
 
Building a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case StudyBuilding a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case Studyuxpin
 
Atomic design React Nova Presentation
Atomic design React Nova PresentationAtomic design React Nova Presentation
Atomic design React Nova PresentationSteve Zyglowicz
 
Design System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, TestDesign System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, TestPaya Do
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and PrinciplesPeeyush Sahu CAPM®
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design ProcessesMuhammad Hijazi
 
Intro Design System for Visual Designers
Intro Design System for Visual DesignersIntro Design System for Visual Designers
Intro Design System for Visual DesignersInyoung Choi
 
Building a Mature Design System
Building a Mature Design SystemBuilding a Mature Design System
Building a Mature Design SystemDrew Burdick
 
Initiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the EnterpriseInitiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the Enterpriseuxpin
 
zeroheight + Figma (March 2019)
zeroheight + Figma (March 2019)zeroheight + Figma (March 2019)
zeroheight + Figma (March 2019)Robin Tindale
 
Uxpin Why Build a Design System
Uxpin Why Build a Design SystemUxpin Why Build a Design System
Uxpin Why Build a Design SystemLewis Lin 🦊
 
Fundamentals of User Interface Design
Fundamentals of User Interface DesignFundamentals of User Interface Design
Fundamentals of User Interface DesignMerlin Rebrović
 

Was ist angesagt? (20)

Creating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany SonefeldCreating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany Sonefeld
 
Design System 101
Design System 101Design System 101
Design System 101
 
Design System Proposal
Design System ProposalDesign System Proposal
Design System Proposal
 
Design System as a Product
Design System as a ProductDesign System as a Product
Design System as a Product
 
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX EvolutionDesign Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
 
A design system. A year in review.
A design system. A year in review.A design system. A year in review.
A design system. A year in review.
 
Design Systems (english) #UXcamHH
Design Systems (english) #UXcamHHDesign Systems (english) #UXcamHH
Design Systems (english) #UXcamHH
 
Building a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case StudyBuilding a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case Study
 
Atomic design React Nova Presentation
Atomic design React Nova PresentationAtomic design React Nova Presentation
Atomic design React Nova Presentation
 
Design System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, TestDesign System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, Test
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design Processes
 
Intro Design System for Visual Designers
Intro Design System for Visual DesignersIntro Design System for Visual Designers
Intro Design System for Visual Designers
 
Building a Mature Design System
Building a Mature Design SystemBuilding a Mature Design System
Building a Mature Design System
 
Initiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the EnterpriseInitiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the Enterprise
 
zeroheight + Figma (March 2019)
zeroheight + Figma (March 2019)zeroheight + Figma (March 2019)
zeroheight + Figma (March 2019)
 
Design Systems
Design SystemsDesign Systems
Design Systems
 
UX design
UX designUX design
UX design
 
Uxpin Why Build a Design System
Uxpin Why Build a Design SystemUxpin Why Build a Design System
Uxpin Why Build a Design System
 
Fundamentals of User Interface Design
Fundamentals of User Interface DesignFundamentals of User Interface Design
Fundamentals of User Interface Design
 

Andere mochten auch

Getting started with your research skills
Getting started with your research skillsGetting started with your research skills
Getting started with your research skillsL. D. Morris
 
Planning Innovations: Conjoint Analysis Slides
Planning Innovations: Conjoint Analysis SlidesPlanning Innovations: Conjoint Analysis Slides
Planning Innovations: Conjoint Analysis SlidesQuestionPro
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern librariesRuss Weakley
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web DesignDave Olsen
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Stephen Hay
 
Content Design, UI Architecture and UI Mapping
Content Design, UI Architecture and UI MappingContent Design, UI Architecture and UI Mapping
Content Design, UI Architecture and UI MappingWolfram Nagel
 
Practical Diversity at Thinking Digital Women
Practical Diversity at Thinking Digital Women Practical Diversity at Thinking Digital Women
Practical Diversity at Thinking Digital Women Meri Williams
 
Modern Management at #wintech17
Modern Management at #wintech17Modern Management at #wintech17
Modern Management at #wintech17Meri Williams
 
Awesome People Management with Agile at Agile North East
Awesome People Management with Agile at Agile North EastAwesome People Management with Agile at Agile North East
Awesome People Management with Agile at Agile North EastMeri Williams
 
Modern Management: Creating Space for Everyone to Be Awesome
Modern Management: Creating Space for Everyone to Be AwesomeModern Management: Creating Space for Everyone to Be Awesome
Modern Management: Creating Space for Everyone to Be AwesomeMeri Williams
 
Creating Space to Be Awesome at ScotlandPHP17
Creating Space to Be Awesome at ScotlandPHP17Creating Space to Be Awesome at ScotlandPHP17
Creating Space to Be Awesome at ScotlandPHP17Meri Williams
 
Creating Space to Be Awesome at QCon London
Creating Space to Be Awesome at QCon LondonCreating Space to Be Awesome at QCon London
Creating Space to Be Awesome at QCon LondonMeri Williams
 
Modern Leadership & Team Science: Creating Space to Be Awesome
Modern Leadership & Team Science: Creating Space to Be AwesomeModern Leadership & Team Science: Creating Space to Be Awesome
Modern Leadership & Team Science: Creating Space to Be AwesomeMeri Williams
 
Creating Space to Be Awesome -- Offentlig Chef
Creating Space to Be Awesome -- Offentlig ChefCreating Space to Be Awesome -- Offentlig Chef
Creating Space to Be Awesome -- Offentlig ChefMeri Williams
 
10 Steps to build Awesome Business Ideas
10 Steps to build Awesome Business Ideas10 Steps to build Awesome Business Ideas
10 Steps to build Awesome Business IdeasBoard of Innovation
 
14 steps to build a professional reseller partner program
14 steps to build a professional reseller partner program14 steps to build a professional reseller partner program
14 steps to build a professional reseller partner programDaniel Nilsson
 
アメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpringアメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpringTakuya Hattori
 

Andere mochten auch (17)

Getting started with your research skills
Getting started with your research skillsGetting started with your research skills
Getting started with your research skills
 
Planning Innovations: Conjoint Analysis Slides
Planning Innovations: Conjoint Analysis SlidesPlanning Innovations: Conjoint Analysis Slides
Planning Innovations: Conjoint Analysis Slides
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
 
Content Design, UI Architecture and UI Mapping
Content Design, UI Architecture and UI MappingContent Design, UI Architecture and UI Mapping
Content Design, UI Architecture and UI Mapping
 
Practical Diversity at Thinking Digital Women
Practical Diversity at Thinking Digital Women Practical Diversity at Thinking Digital Women
Practical Diversity at Thinking Digital Women
 
Modern Management at #wintech17
Modern Management at #wintech17Modern Management at #wintech17
Modern Management at #wintech17
 
Awesome People Management with Agile at Agile North East
Awesome People Management with Agile at Agile North EastAwesome People Management with Agile at Agile North East
Awesome People Management with Agile at Agile North East
 
Modern Management: Creating Space for Everyone to Be Awesome
Modern Management: Creating Space for Everyone to Be AwesomeModern Management: Creating Space for Everyone to Be Awesome
Modern Management: Creating Space for Everyone to Be Awesome
 
Creating Space to Be Awesome at ScotlandPHP17
Creating Space to Be Awesome at ScotlandPHP17Creating Space to Be Awesome at ScotlandPHP17
Creating Space to Be Awesome at ScotlandPHP17
 
Creating Space to Be Awesome at QCon London
Creating Space to Be Awesome at QCon LondonCreating Space to Be Awesome at QCon London
Creating Space to Be Awesome at QCon London
 
Modern Leadership & Team Science: Creating Space to Be Awesome
Modern Leadership & Team Science: Creating Space to Be AwesomeModern Leadership & Team Science: Creating Space to Be Awesome
Modern Leadership & Team Science: Creating Space to Be Awesome
 
Creating Space to Be Awesome -- Offentlig Chef
Creating Space to Be Awesome -- Offentlig ChefCreating Space to Be Awesome -- Offentlig Chef
Creating Space to Be Awesome -- Offentlig Chef
 
10 Steps to build Awesome Business Ideas
10 Steps to build Awesome Business Ideas10 Steps to build Awesome Business Ideas
10 Steps to build Awesome Business Ideas
 
14 steps to build a professional reseller partner program
14 steps to build a professional reseller partner program14 steps to build a professional reseller partner program
14 steps to build a professional reseller partner program
 
アメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpringアメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpring
 

Ähnlich wie Atomic design

HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010alanburke
 
Turku loves-storybook-styleguidist-styled-components
Turku loves-storybook-styleguidist-styled-componentsTurku loves-storybook-styleguidist-styled-components
Turku loves-storybook-styleguidist-styled-componentsJames Stone
 
Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08Jamie Oastler
 
WordPress 3.0 at DC PHP
WordPress 3.0 at DC PHPWordPress 3.0 at DC PHP
WordPress 3.0 at DC PHPandrewnacin
 
An Unexpected Solution to Microservices UI Composition
An Unexpected Solution to Microservices UI CompositionAn Unexpected Solution to Microservices UI Composition
An Unexpected Solution to Microservices UI CompositionDr. Arif Wider
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 BoilerplateMichael Enslow
 
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
 
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...Adam Khan
 
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
 
Improving your responsive workflow with style guides
Improving your responsive workflow with style guidesImproving your responsive workflow with style guides
Improving your responsive workflow with style guidesLuke Brooker
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5Derek Jacoby
 
Create rich web stories with Drupal 8 and paragraphs
Create rich web stories with Drupal 8 and paragraphsCreate rich web stories with Drupal 8 and paragraphs
Create rich web stories with Drupal 8 and paragraphsTassos Koutlas
 
Design Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPressDesign Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPressJesse James Arnold
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Brad Frost
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB
 
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017Introduction to Magento 2 module development - PHP Antwerp Meetup 2017
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017Joke Puts
 
Style Guide Best Practices
Style Guide Best PracticesStyle Guide Best Practices
Style Guide Best PracticesBrad Frost
 
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch TutorialMongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch TutorialMongoDB
 
Modeling Rich Narrative Content
Modeling Rich Narrative ContentModeling Rich Narrative Content
Modeling Rich Narrative ContentJeff Eaton
 
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and GulpOptimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and GulpMatthew Davis
 

Ähnlich wie Atomic design (20)

HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010
 
Turku loves-storybook-styleguidist-styled-components
Turku loves-storybook-styleguidist-styled-componentsTurku loves-storybook-styleguidist-styled-components
Turku loves-storybook-styleguidist-styled-components
 
Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08
 
WordPress 3.0 at DC PHP
WordPress 3.0 at DC PHPWordPress 3.0 at DC PHP
WordPress 3.0 at DC PHP
 
An Unexpected Solution to Microservices UI Composition
An Unexpected Solution to Microservices UI CompositionAn Unexpected Solution to Microservices UI Composition
An Unexpected Solution to Microservices UI Composition
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
 
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
 
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...
 
Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)
 
Improving your responsive workflow with style guides
Improving your responsive workflow with style guidesImproving your responsive workflow with style guides
Improving your responsive workflow with style guides
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5
 
Create rich web stories with Drupal 8 and paragraphs
Create rich web stories with Drupal 8 and paragraphsCreate rich web stories with Drupal 8 and paragraphs
Create rich web stories with Drupal 8 and paragraphs
 
Design Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPressDesign Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPress
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
 
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017Introduction to Magento 2 module development - PHP Antwerp Meetup 2017
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017
 
Style Guide Best Practices
Style Guide Best PracticesStyle Guide Best Practices
Style Guide Best Practices
 
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch TutorialMongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
 
Modeling Rich Narrative Content
Modeling Rich Narrative ContentModeling Rich Narrative Content
Modeling Rich Narrative Content
 
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and GulpOptimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
 

Mehr von Brad Frost

Let's Work Together!
Let's Work Together!Let's Work Together!
Let's Work Together!Brad Frost
 
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
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoBrad Frost
 
Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!Brad Frost
 
Death To Bullshit
Death To BullshitDeath To Bullshit
Death To BullshitBrad 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
 
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
 
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
 
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...Brad 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
 
Selling The Mobile Web
Selling The Mobile WebSelling The Mobile Web
Selling The Mobile WebBrad Frost
 

Mehr von Brad Frost (13)

Let's Work Together!
Let's Work Together!Let's Work Together!
Let's Work Together!
 
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
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
 
Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!
 
Death To Bullshit
Death To BullshitDeath To Bullshit
Death To Bullshit
 
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
 
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)
 
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
 
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
 
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
 
Selling The Mobile Web
Selling The Mobile WebSelling The Mobile Web
Selling The Mobile Web
 

Último

LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 

Último (20)

LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 

Atomic design