SlideShare a Scribd company logo
Atomic Design & React
(A Word or Two About Atomic Design and React) => Atomic Components
Riddle Me This
Should Developers Design?
Should Designers Develop?
Designer + Dev not Designer vs Dev
https://www.gravitatedesign.com/blog/designers-and-developers/
Answer
Well at least,
We should try to design the way we code!
OR
We should try to code the way we design!
No matter who is doing it!

Recommended for you

Design System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, TestDesign System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, Test

Slides for a few events i was lucky to give a talk this year. From my experiences of building a design system for the product team. Figma and storybook js are introduced.

web design and developmentui designproduct developement
Design Systems
Design SystemsDesign Systems
Design Systems

Let's talk about Design Systems and how they could help you build better products in terms of efficiency, consistency, UX, code quality and accessibility. Summary: 1. About me 2. Why have one? 3. Design system (fundamentals) 4. How to build a design system (process) 5. Cost and value 6. Inspiration 7. Q&A

designweb designdesign systems
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

- How to build a design system from scratch - How to audit your product for design consistency - How to structure and communicate a design system to an Agile team

product designuser interfaceui
What if?
 UI rendering was 100% pure components?
 Or conversely, all business logic/state was elsewhere?
 What if your framework notified when to render and provided
you all the data at the time of render?
 What if HTML / ES6 / CSS all lived together harmoniously?
IT CERTAINLY WOULD BE EASIER
FOR A DESIGNER TO CODE!
In a way that forms a
pleasing or consistent
whole.
In a way that is free
from disagreement or
dissent.
Enter Atomic Design by Brad Frost
Create Design Systems, not pages.
The cornerstones of good design systems are style guides!
We’re not designing pages,
we’re designing systems of components.
— Stephen Hay
Atomic Design Style Guides
Organize design materials,
while providing guidelines, usage, and guardrails.
Make them alive and interactive,
so that you can see the impact of change.
Share vocabulary (What is the System Status Button Bar?)
and educate!
Atomic Methodology
Think Chemistry

Recommended for you

Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design

This Presentation base on Joshua Porter Blog (http://bokardo.com/principles-of-user-interface-design/)

user experienceuxuser interface
Design Systems at Scale
Design Systems at ScaleDesign Systems at Scale
Design Systems at Scale

A design system can vastly improve your team's productivity, but most of all, it leads to better products! The challenge lies in creating a mature system and leading its adoption across the company successfully. Let's talk about how we learned to meet the needs of different designers and developers on different products, on different tech stacks, on different platforms. Attendees will go home with tips they can use to improve design systems of any stage.

design systemsstyleguideui design
Design System as a Product
Design System as a ProductDesign System as a Product
Design System as a Product

Design System as a Product - Maria Elena Duenias, Esther Butcher Design systems are a great example where web development and design meet. You can find innumerable resources on the internet, books and conferences on how to build them, and how they are exactly what your organization needs. But, building one requires a lot more than following a recipe. In this talk we are going to discuss how to build a design system as an internal product, and how it evolves to become what the users need.

adoptioncohesivecollaboration
Atomic Methodology
Lately I’ve been more interested in
what our interfaces are comprised of
and how we can construct design
systems in a more methodical way.
— Brad Frost
Atomic Methodology
Atoms => HTML tags
Molecules => label, input & button
Organisms => logo, nav, search form
Templates => organism groups
Pages => complete view
Atomic Components
React Components
Atomic Components Methodology
Atoms => styled-components
Molecules => behavioral components
Organisms => domain composition
Ecosystems => route
Environment => themes, state, async

Recommended for you

Design System 101
Design System 101Design System 101
Design System 101

The SlideShare presentation consists of the summary of the Design System 101 Workshop, as presented by UX Gorilla with Mayank Dhawan. Link of the event: https://bit.ly/2RwN4RF The workshop took place on December 01, 2018 at 91springboard, Jhandewalan Extension, New Delhi. This event was for designers, developers or members of the product team to help them with a clear understanding and give them useful ideas to make better decisions, help their teams to save time so that they can do things they would enjoy.

web designgraphic designdevelopment
Design Systems (english) #UXcamHH
Design Systems (english) #UXcamHHDesign Systems (english) #UXcamHH
Design Systems (english) #UXcamHH

UI design becomes increasingly important for products and services. Influencing their users' expierence. UX itself determines the value of digital offerings and is their key differentiator. But "historically grown" incoherent interfaces deteriorate value and brand of products and services. This talk is about design systems, that help to avoid (or overcome) design dept and to enable scaling UX across platforms, products and devices. Modularity and standardisation of repeatedly used aspects helps speeding up processes and increasing business value. Design systems help making user experience tangible to teams and brand values actionable.

designsystemsdesignsystemproductdesign
Everything you need to know about design system.pdf
Everything you need to know about design system.pdfEverything you need to know about design system.pdf
Everything you need to know about design system.pdf

Oftentimes, people tend to confuse a design system with a style guide, or even design principles. The truth is that a design system comprises all of these and more. To know more about how a design system can benefit your product, read our free guide.

ux designkoru ux designui
Top 9 reasons to use Atomic Design
1. Reusability
2. Easier to create style guide
3. Easy to understand layout
4. Code is more consistent
5. No focus on pixel perfect designs
6. More efficient, quicker prototyping
7. Easier to update and remove parts
8. More modular file structure
9. Less components overall
http://www.creativebloq.com/web-design/10-reasons-you-should-be-using-atomic-design-61620771
Top 9 reasons to use Atomic Components
1. Reusability
2. Easier to create style guide
3. Easy to understand layout
4. Code is more consistent
5. No focus on pixel perfect designs
6. More efficient, quicker prototyping
7. Easier to update and remove parts
8. More modular file structure
9. Less components overall
http://www.creativebloq.com/web-design/10-reasons-you-should-be-using-atomic-design-61620771
1. 100% Pure components helps
2. Make your reused components LIVE
3. Very structured
4. Code is more consistent!
5. You will WANT to reuse existing
6. Using inject instead of passing props
7. Hiring UX / Graphic Design later
8. HTML/Javascript/CSS live together
9. Less code / Less bugs / Less work
Atomic Design - Get Creative
Its not about using an existing design system,
its about creating your own!
Code Walkthrough - Atoms
import styled from 'styled-components';
const ButtonDiv = styled.div`
background-color:
${props => props.show ? props.theme.buttonColorShow : 'inherit'};
/* Layout */
overflow: hidden;
flex: 1 0 auto;
width: ${props => props.theme.iconSize.width};
height: ${props => props.theme.iconSize.height};
display: flex;
align-items: center;
justify-content: center;
`
export default ButtonDiv;

Recommended for you

Evolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and ProcessEvolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and Process

You'll learn: How to create and maintain a design system over several years How people, process, and product change alongside a design system Lessons learned from growing the Linkedin design system

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.

In this talk we’ll uncover our journey in creating a Design System for Skyscanner and share our learnings on how we sold it to the business by proving its worth. We’ll talk through some of the design and tech considerations we’ve made and share the tools and techniques which have helped us along the way.

systemdesign
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth

The terms UI and UX (design) are very often and used as a single term by many people or designers. The first thing we need to know straight is that UI and UX are not the same. Design is a rather broad and huge term. When someone says “I’m a designer,” it is not that clear what they actually do. There are a number of different responsibilities term designer. There are many aspects of design now a days.

Get Coding
Now that it is easier!
Reference
 http://bradfrost.com/blog/post/atomic-web-design/
 http://atomicdesign.bradfrost.com/table-of-contents/
 https://medium.com/@yejodido/atomic-components-managing-dynamic-
react-components-using-atomic-design-part-1-5f07451f261f#.d9vjasek0
 https://medium.com/front-end-hacking/react-for-designers-
3fbc7b6560dd#.7utd3ri06
 https://github.com/styled-components/styled-components
 http://patternlab.io

More Related Content

What's hot

Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
eggcellent
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
Vani Jain
 
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX EvolutionDesign Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
Anne Grundhoefer
 
Design System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, TestDesign System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, Test
Paya Do
 
Design Systems
Design SystemsDesign Systems
Design Systems
Nadal Soler
 
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
uxpin
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
KANKIPATI KISHORE
 
Design Systems at Scale
Design Systems at ScaleDesign Systems at Scale
Design Systems at Scale
Sarah Federman
 
Design System as a Product
Design System as a ProductDesign System as a Product
Design System as a Product
Thoughtworks
 
Design System 101
Design System 101Design System 101
Design System 101
Mayank Dhawan
 
Design Systems (english) #UXcamHH
Design Systems (english) #UXcamHHDesign Systems (english) #UXcamHH
Design Systems (english) #UXcamHH
Benno Lœwenberg
 
Everything you need to know about design system.pdf
Everything you need to know about design system.pdfEverything you need to know about design system.pdf
Everything you need to know about design system.pdf
Koru UX Design
 
Evolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and ProcessEvolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and Process
uxpin
 
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
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
Shrestha Raaz
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
Dzung Nguyen
 
Intro Design System for Visual Designers
Intro Design System for Visual DesignersIntro Design System for Visual Designers
Intro Design System for Visual Designers
Inyoung Choi
 
ITea&Coffee - Atomic design systems 2.0
ITea&Coffee - Atomic design systems 2.0ITea&Coffee - Atomic design systems 2.0
ITea&Coffee - Atomic design systems 2.0
Aneta Kołosowska (Wiśniewska)
 
Uxpin Why Build a Design System
Uxpin Why Build a Design SystemUxpin Why Build a Design System
Uxpin Why Build a Design System
Lewis Lin 🦊
 
Design system presentation - How to sell it internally
Design system presentation - How to sell it internallyDesign system presentation - How to sell it internally
Design system presentation - How to sell it internally
Eugene Kardash
 

What's hot (20)

Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
 
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX EvolutionDesign Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
 
Design System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, TestDesign System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, Test
 
Design Systems
Design SystemsDesign Systems
Design Systems
 
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
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
 
Design Systems at Scale
Design Systems at ScaleDesign Systems at Scale
Design Systems at Scale
 
Design System as a Product
Design System as a ProductDesign System as a Product
Design System as a Product
 
Design System 101
Design System 101Design System 101
Design System 101
 
Design Systems (english) #UXcamHH
Design Systems (english) #UXcamHHDesign Systems (english) #UXcamHH
Design Systems (english) #UXcamHH
 
Everything you need to know about design system.pdf
Everything you need to know about design system.pdfEverything you need to know about design system.pdf
Everything you need to know about design system.pdf
 
Evolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and ProcessEvolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and Process
 
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.
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
 
Intro Design System for Visual Designers
Intro Design System for Visual DesignersIntro Design System for Visual Designers
Intro Design System for Visual Designers
 
ITea&Coffee - Atomic design systems 2.0
ITea&Coffee - Atomic design systems 2.0ITea&Coffee - Atomic design systems 2.0
ITea&Coffee - Atomic design systems 2.0
 
Uxpin Why Build a Design System
Uxpin Why Build a Design SystemUxpin Why Build a Design System
Uxpin Why Build a Design System
 
Design system presentation - How to sell it internally
Design system presentation - How to sell it internallyDesign system presentation - How to sell it internally
Design system presentation - How to sell it internally
 

Viewers also liked

Atomic Design - Dallas Digital Agency
Atomic Design - Dallas Digital AgencyAtomic Design - Dallas Digital Agency
Atomic Design - Dallas Digital Agency
Atomic Design & Consulting
 
Use atomic design ftw
Use atomic design ftwUse atomic design ftw
Use atomic design ftw
GiantJohnPepper
 
Atomic design, a problem of expectations
Atomic design, a problem of expectationsAtomic design, a problem of expectations
Atomic design, a problem of expectations
Francesco Improta
 
Building an Atomic Design System
Building an Atomic Design SystemBuilding an Atomic Design System
Building an Atomic Design System
Tim Wright
 
Atomic design
Atomic designAtomic design
Atomic design
danielModea
 
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Luciano Mammino
 
система обеспечения безопасности
система обеспечения безопасностисистема обеспечения безопасности
система обеспечения безопасности
journalrubezh
 
Weever Media App Marketing
Weever Media App MarketingWeever Media App Marketing
Weever Media App Marketing
App Marketing Agentur
 
Iridium idea searcher_slice&reverse_water
Iridium idea searcher_slice&reverse_waterIridium idea searcher_slice&reverse_water
Iridium idea searcher_slice&reverse_water
Iridium
 
RST2014_Tomsk_IndoodAnalytics
RST2014_Tomsk_IndoodAnalyticsRST2014_Tomsk_IndoodAnalytics
RST2014_Tomsk_IndoodAnalytics
RussianStartupTour
 
Multi rotor
Multi rotorMulti rotor
Multi rotor
Dmitry Dorogoy
 
iBeacon в гиперлокальном маркетинге
iBeacon в гиперлокальном маркетингеiBeacon в гиперлокальном маркетинге
iBeacon в гиперлокальном маркетинге
Neklo
 
Happiest Minds Brand Journey
Happiest Minds  Brand JourneyHappiest Minds  Brand Journey
Happiest Minds Brand Journey
Happiest Minds Technologies
 
Презентация iBeacon. Что такое iBeacon и как эту технологию применять?
Презентация iBeacon. Что такое iBeacon и как эту технологию применять?Презентация iBeacon. Что такое iBeacon и как эту технологию применять?
Презентация iBeacon. Что такое iBeacon и как эту технологию применять?
Notissimus
 
LifeHackDay 2015: MOOCology
LifeHackDay 2015: MOOCologyLifeHackDay 2015: MOOCology
LifeHackDay 2015: MOOCology
Sergey Dovgopolyy
 
iBeacon technology for your events
iBeacon technology for your eventsiBeacon technology for your events
iBeacon technology for your events
helenka8
 
Whitepaper: Unified Communications Solution on Communication Enabled Business...
Whitepaper: Unified Communications Solution on Communication Enabled Business...Whitepaper: Unified Communications Solution on Communication Enabled Business...
Whitepaper: Unified Communications Solution on Communication Enabled Business...
Happiest Minds Technologies
 
RuUborka
RuUborkaRuUborka
RuUborka
spbguru
 
Фишки продвижения мобильных приложений от Netpeak
Фишки продвижения мобильных приложений от NetpeakФишки продвижения мобильных приложений от Netpeak
Фишки продвижения мобильных приложений от Netpeak
Netpeak
 

Viewers also liked (20)

Atomic Design - Dallas Digital Agency
Atomic Design - Dallas Digital AgencyAtomic Design - Dallas Digital Agency
Atomic Design - Dallas Digital Agency
 
Use atomic design ftw
Use atomic design ftwUse atomic design ftw
Use atomic design ftw
 
Atomic design, a problem of expectations
Atomic design, a problem of expectationsAtomic design, a problem of expectations
Atomic design, a problem of expectations
 
Building an Atomic Design System
Building an Atomic Design SystemBuilding an Atomic Design System
Building an Atomic Design System
 
Atomic design
Atomic designAtomic design
Atomic design
 
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
 
система обеспечения безопасности
система обеспечения безопасностисистема обеспечения безопасности
система обеспечения безопасности
 
Weever Media App Marketing
Weever Media App MarketingWeever Media App Marketing
Weever Media App Marketing
 
Iridium idea searcher_slice&reverse_water
Iridium idea searcher_slice&reverse_waterIridium idea searcher_slice&reverse_water
Iridium idea searcher_slice&reverse_water
 
RST2014_Tomsk_IndoodAnalytics
RST2014_Tomsk_IndoodAnalyticsRST2014_Tomsk_IndoodAnalytics
RST2014_Tomsk_IndoodAnalytics
 
Multi rotor
Multi rotorMulti rotor
Multi rotor
 
iBeacon в гиперлокальном маркетинге
iBeacon в гиперлокальном маркетингеiBeacon в гиперлокальном маркетинге
iBeacon в гиперлокальном маркетинге
 
Happiest Minds Brand Journey
Happiest Minds  Brand JourneyHappiest Minds  Brand Journey
Happiest Minds Brand Journey
 
Презентация iBeacon. Что такое iBeacon и как эту технологию применять?
Презентация iBeacon. Что такое iBeacon и как эту технологию применять?Презентация iBeacon. Что такое iBeacon и как эту технологию применять?
Презентация iBeacon. Что такое iBeacon и как эту технологию применять?
 
LifeHackDay 2015: MOOCology
LifeHackDay 2015: MOOCologyLifeHackDay 2015: MOOCology
LifeHackDay 2015: MOOCology
 
Proximity presentation rus
Proximity presentation rusProximity presentation rus
Proximity presentation rus
 
iBeacon technology for your events
iBeacon technology for your eventsiBeacon technology for your events
iBeacon technology for your events
 
Whitepaper: Unified Communications Solution on Communication Enabled Business...
Whitepaper: Unified Communications Solution on Communication Enabled Business...Whitepaper: Unified Communications Solution on Communication Enabled Business...
Whitepaper: Unified Communications Solution on Communication Enabled Business...
 
RuUborka
RuUborkaRuUborka
RuUborka
 
Фишки продвижения мобильных приложений от Netpeak
Фишки продвижения мобильных приложений от NetpeakФишки продвижения мобильных приложений от Netpeak
Фишки продвижения мобильных приложений от Netpeak
 

Similar to Atomic design React Nova Presentation

Design Systems are Coming... Are you Ready?
Design Systems are Coming... Are you Ready?Design Systems are Coming... Are you Ready?
Design Systems are Coming... Are you Ready?
Vernon Kesner
 
Learn How to Use Atomic Design to Make Your Site Manageable and Adaptable
Learn How to Use Atomic Design to Make Your Site Manageable and AdaptableLearn How to Use Atomic Design to Make Your Site Manageable and Adaptable
Learn How to Use Atomic Design to Make Your Site Manageable and Adaptable
Acquia
 
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In BanglaWeb Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
Stack Learner
 
Atomic Design: Effective Way of Designing UI
Atomic Design: Effective Way of Designing UIAtomic Design: Effective Way of Designing UI
Atomic Design: Effective Way of Designing UI
Fibonalabs
 
BADCamp 2012 -Beginner Best Practices
BADCamp 2012 -Beginner Best PracticesBADCamp 2012 -Beginner Best Practices
BADCamp 2012 -Beginner Best Practices
meghsweet
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
Gareth Saunders
 
LvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design SystemLvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design System
Vlad Fedosov
 
10 Ways To Improve Your Code
10 Ways To Improve Your Code10 Ways To Improve Your Code
10 Ways To Improve Your Code
ConSanFrancisco123
 
Unify Design & Deliverables
Unify Design & DeliverablesUnify Design & Deliverables
Unify Design & Deliverables
nathanacurtis
 
10 Ways To Improve Your Code( Neal Ford)
10  Ways To  Improve  Your  Code( Neal  Ford)10  Ways To  Improve  Your  Code( Neal  Ford)
10 Ways To Improve Your Code( Neal Ford)
guestebde
 
Building resuable and customizable Vue components
Building resuable and customizable Vue componentsBuilding resuable and customizable Vue components
Building resuable and customizable Vue components
Filip Rakowski
 
Measuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb EditionMeasuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb Edition
Dave Olsen
 
Is everything we used to do wrong?
Is everything we used to do wrong?Is everything we used to do wrong?
Is everything we used to do wrong?
Russ Weakley
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Cantina
 
The "Evils" of Optimization
The "Evils" of OptimizationThe "Evils" of Optimization
The "Evils" of Optimization
BlackRabbitCoder
 
Improving Drupal Performances
Improving Drupal PerformancesImproving Drupal Performances
Improving Drupal Performances
Vladimir Ilic
 
KharkivJS: Flaws of the Web Components in 2019 and how to address them
KharkivJS: Flaws of the Web Components in 2019 and how to address themKharkivJS: Flaws of the Web Components in 2019 and how to address them
KharkivJS: Flaws of the Web Components in 2019 and how to address them
Vlad Fedosov
 
Bootstrap for Beginners
Bootstrap for BeginnersBootstrap for Beginners
Bootstrap for Beginners
D'arce Hess
 
Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for Developers
Melvin John
 
Wireframing /Prototyping with HTML
Wireframing /Prototyping with HTMLWireframing /Prototyping with HTML
Wireframing /Prototyping with HTML
Dee Sadler
 

Similar to Atomic design React Nova Presentation (20)

Design Systems are Coming... Are you Ready?
Design Systems are Coming... Are you Ready?Design Systems are Coming... Are you Ready?
Design Systems are Coming... Are you Ready?
 
Learn How to Use Atomic Design to Make Your Site Manageable and Adaptable
Learn How to Use Atomic Design to Make Your Site Manageable and AdaptableLearn How to Use Atomic Design to Make Your Site Manageable and Adaptable
Learn How to Use Atomic Design to Make Your Site Manageable and Adaptable
 
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In BanglaWeb Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
 
Atomic Design: Effective Way of Designing UI
Atomic Design: Effective Way of Designing UIAtomic Design: Effective Way of Designing UI
Atomic Design: Effective Way of Designing UI
 
BADCamp 2012 -Beginner Best Practices
BADCamp 2012 -Beginner Best PracticesBADCamp 2012 -Beginner Best Practices
BADCamp 2012 -Beginner Best Practices
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
LvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design SystemLvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design System
 
10 Ways To Improve Your Code
10 Ways To Improve Your Code10 Ways To Improve Your Code
10 Ways To Improve Your Code
 
Unify Design & Deliverables
Unify Design & DeliverablesUnify Design & Deliverables
Unify Design & Deliverables
 
10 Ways To Improve Your Code( Neal Ford)
10  Ways To  Improve  Your  Code( Neal  Ford)10  Ways To  Improve  Your  Code( Neal  Ford)
10 Ways To Improve Your Code( Neal Ford)
 
Building resuable and customizable Vue components
Building resuable and customizable Vue componentsBuilding resuable and customizable Vue components
Building resuable and customizable Vue components
 
Measuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb EditionMeasuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb Edition
 
Is everything we used to do wrong?
Is everything we used to do wrong?Is everything we used to do wrong?
Is everything we used to do wrong?
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
The "Evils" of Optimization
The "Evils" of OptimizationThe "Evils" of Optimization
The "Evils" of Optimization
 
Improving Drupal Performances
Improving Drupal PerformancesImproving Drupal Performances
Improving Drupal Performances
 
KharkivJS: Flaws of the Web Components in 2019 and how to address them
KharkivJS: Flaws of the Web Components in 2019 and how to address themKharkivJS: Flaws of the Web Components in 2019 and how to address them
KharkivJS: Flaws of the Web Components in 2019 and how to address them
 
Bootstrap for Beginners
Bootstrap for BeginnersBootstrap for Beginners
Bootstrap for Beginners
 
Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for Developers
 
Wireframing /Prototyping with HTML
Wireframing /Prototyping with HTMLWireframing /Prototyping with HTML
Wireframing /Prototyping with HTML
 

Recently uploaded

Development of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML TechnologiesDevelopment of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML Technologies
MaisnamLuwangPibarel
 
introduction of Ansys software and basic and advance knowledge of modelling s...
introduction of Ansys software and basic and advance knowledge of modelling s...introduction of Ansys software and basic and advance knowledge of modelling s...
introduction of Ansys software and basic and advance knowledge of modelling s...
sachin chaurasia
 
Top 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your WebsiteTop 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your Website
e-Definers Technology
 
Intro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AIIntro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AI
Ortus Solutions, Corp
 
WEBINAR SLIDES: CCX for Cloud Service Providers
WEBINAR SLIDES: CCX for Cloud Service ProvidersWEBINAR SLIDES: CCX for Cloud Service Providers
WEBINAR SLIDES: CCX for Cloud Service Providers
Severalnines
 
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
onemonitarsoftware
 
How we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hoursHow we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hours
Ortus Solutions, Corp
 
Google ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learningGoogle ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learning
VishrutGoyani1
 
React Native vs Flutter - SSTech System
React Native vs Flutter  - SSTech SystemReact Native vs Flutter  - SSTech System
React Native vs Flutter - SSTech System
SSTech System
 
ENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentationENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentation
sofiafernandezon
 
Safe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work PermitsSafe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work Permits
sheqnetworkmarketing
 
Folding Cheat Sheet #7 - seventh in a series
Folding Cheat Sheet #7 - seventh in a seriesFolding Cheat Sheet #7 - seventh in a series
Folding Cheat Sheet #7 - seventh in a series
Philip Schwarz
 
Seamless PostgreSQL to Snowflake Data Transfer in 8 Simple Steps
Seamless PostgreSQL to Snowflake Data Transfer in 8 Simple StepsSeamless PostgreSQL to Snowflake Data Transfer in 8 Simple Steps
Seamless PostgreSQL to Snowflake Data Transfer in 8 Simple Steps
Estuary Flow
 
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptxAddressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
Sparity1
 
ANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdfANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdf
sachin chaurasia
 
MVP Mobile Application - Codearrest.pptx
MVP Mobile Application - Codearrest.pptxMVP Mobile Application - Codearrest.pptx
MVP Mobile Application - Codearrest.pptx
Mitchell Marsh
 
Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)
miso_uam
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
karim wahed
 
Overview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptxOverview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptx
Mitchell Marsh
 
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdfdachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
DNUG e.V.
 

Recently uploaded (20)

Development of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML TechnologiesDevelopment of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML Technologies
 
introduction of Ansys software and basic and advance knowledge of modelling s...
introduction of Ansys software and basic and advance knowledge of modelling s...introduction of Ansys software and basic and advance knowledge of modelling s...
introduction of Ansys software and basic and advance knowledge of modelling s...
 
Top 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your WebsiteTop 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your Website
 
Intro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AIIntro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AI
 
WEBINAR SLIDES: CCX for Cloud Service Providers
WEBINAR SLIDES: CCX for Cloud Service ProvidersWEBINAR SLIDES: CCX for Cloud Service Providers
WEBINAR SLIDES: CCX for Cloud Service Providers
 
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
 
How we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hoursHow we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hours
 
Google ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learningGoogle ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learning
 
React Native vs Flutter - SSTech System
React Native vs Flutter  - SSTech SystemReact Native vs Flutter  - SSTech System
React Native vs Flutter - SSTech System
 
ENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentationENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentation
 
Safe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work PermitsSafe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work Permits
 
Folding Cheat Sheet #7 - seventh in a series
Folding Cheat Sheet #7 - seventh in a seriesFolding Cheat Sheet #7 - seventh in a series
Folding Cheat Sheet #7 - seventh in a series
 
Seamless PostgreSQL to Snowflake Data Transfer in 8 Simple Steps
Seamless PostgreSQL to Snowflake Data Transfer in 8 Simple StepsSeamless PostgreSQL to Snowflake Data Transfer in 8 Simple Steps
Seamless PostgreSQL to Snowflake Data Transfer in 8 Simple Steps
 
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptxAddressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
 
ANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdfANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdf
 
MVP Mobile Application - Codearrest.pptx
MVP Mobile Application - Codearrest.pptxMVP Mobile Application - Codearrest.pptx
MVP Mobile Application - Codearrest.pptx
 
Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
 
Overview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptxOverview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptx
 
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdfdachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
 

Atomic design React Nova Presentation

  • 1. Atomic Design & React (A Word or Two About Atomic Design and React) => Atomic Components
  • 2. Riddle Me This Should Developers Design? Should Designers Develop?
  • 3. Designer + Dev not Designer vs Dev https://www.gravitatedesign.com/blog/designers-and-developers/
  • 4. Answer Well at least, We should try to design the way we code! OR We should try to code the way we design! No matter who is doing it!
  • 5. What if?  UI rendering was 100% pure components?  Or conversely, all business logic/state was elsewhere?  What if your framework notified when to render and provided you all the data at the time of render?  What if HTML / ES6 / CSS all lived together harmoniously? IT CERTAINLY WOULD BE EASIER FOR A DESIGNER TO CODE! In a way that forms a pleasing or consistent whole. In a way that is free from disagreement or dissent.
  • 6. Enter Atomic Design by Brad Frost Create Design Systems, not pages. The cornerstones of good design systems are style guides! We’re not designing pages, we’re designing systems of components. — Stephen Hay
  • 7. Atomic Design Style Guides Organize design materials, while providing guidelines, usage, and guardrails. Make them alive and interactive, so that you can see the impact of change. Share vocabulary (What is the System Status Button Bar?) and educate!
  • 9. Atomic Methodology Lately I’ve been more interested in what our interfaces are comprised of and how we can construct design systems in a more methodical way. — Brad Frost
  • 10. Atomic Methodology Atoms => HTML tags Molecules => label, input & button Organisms => logo, nav, search form Templates => organism groups Pages => complete view
  • 12. Atomic Components Methodology Atoms => styled-components Molecules => behavioral components Organisms => domain composition Ecosystems => route Environment => themes, state, async
  • 13. Top 9 reasons to use Atomic Design 1. Reusability 2. Easier to create style guide 3. Easy to understand layout 4. Code is more consistent 5. No focus on pixel perfect designs 6. More efficient, quicker prototyping 7. Easier to update and remove parts 8. More modular file structure 9. Less components overall http://www.creativebloq.com/web-design/10-reasons-you-should-be-using-atomic-design-61620771
  • 14. Top 9 reasons to use Atomic Components 1. Reusability 2. Easier to create style guide 3. Easy to understand layout 4. Code is more consistent 5. No focus on pixel perfect designs 6. More efficient, quicker prototyping 7. Easier to update and remove parts 8. More modular file structure 9. Less components overall http://www.creativebloq.com/web-design/10-reasons-you-should-be-using-atomic-design-61620771 1. 100% Pure components helps 2. Make your reused components LIVE 3. Very structured 4. Code is more consistent! 5. You will WANT to reuse existing 6. Using inject instead of passing props 7. Hiring UX / Graphic Design later 8. HTML/Javascript/CSS live together 9. Less code / Less bugs / Less work
  • 15. Atomic Design - Get Creative Its not about using an existing design system, its about creating your own!
  • 16. Code Walkthrough - Atoms import styled from 'styled-components'; const ButtonDiv = styled.div` background-color: ${props => props.show ? props.theme.buttonColorShow : 'inherit'}; /* Layout */ overflow: hidden; flex: 1 0 auto; width: ${props => props.theme.iconSize.width}; height: ${props => props.theme.iconSize.height}; display: flex; align-items: center; justify-content: center; ` export default ButtonDiv;
  • 17. Get Coding Now that it is easier!
  • 18. Reference  http://bradfrost.com/blog/post/atomic-web-design/  http://atomicdesign.bradfrost.com/table-of-contents/  https://medium.com/@yejodido/atomic-components-managing-dynamic- react-components-using-atomic-design-part-1-5f07451f261f#.d9vjasek0  https://medium.com/front-end-hacking/react-for-designers- 3fbc7b6560dd#.7utd3ri06  https://github.com/styled-components/styled-components  http://patternlab.io