Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Using Atomic Design
to Make Your Site Manageable
and Adaptable
Tassos Koutlas - UK Technical Director, FFW
Rob Fitzgibbon ...
ffwagency.com
Introductions
Rob Fitzgibbon Tassos Koutlas
ffwagency.com
Contents
• Introduction
• Benefits
• How we use it
• How you can use it
• Q/A
ffwagency.com
Introduction to Atomic Design
• Definition
• Origins and history
• Methodology of problem solving
ffwagency.com
Definition
• Atomic design is a methodology to create design systems which is inspired by/borrows
from, the ...
ffwagency.com
Definition
Brad Frost, a web developer from Pittsburgh, PA,
created the concept back in 2013.
He wrote a boo...
ffwagency.com
Benefits of Atomic Design
• Process
• Brand
• Innovation potential
source: https://io9.gizmodo.com/the-
terr...
ffwagency.com
Process Benefits
source: http://hereandnow.legacy.wbur.org/2013/10/16/assembly-line-anniversary
ffwagency.com
Brand Benefits
ffwagency.com
Innovation Potential
• Quicker to deploy
• Faster time to market
• Team collaboration
• Easier coding
• Quic...
ffwagency.com
How to use Atomic Design
A few steps into it:
1. Design components
2. Use a style guide
3. Integrate with Dr...
ffwagency.com
Need to share with the rest of the team
Need components to become code
Need to test and optimise based on de...
ffwagency.com
ffwagency.com
Library structure for all the patterns.
Deliver front end work faster
Unified experience
Parallelise work wi...
ffwagency.com
Integrate with Drupal
ffwagency.com
Modern web authoring with Drupal Paragraphs.
Paragraph components map into atomic design patterns.
Data mode...
ffwagency.com
Produce content structure and see the result when
real content is added
More editing power to end users
Each...
ffwagency.com
Adding components
Components present:
• atoms: text, subtitle, image
• molecule: text with image on the side...
ffwagency.com
Adding components
a. Subtitle (atom)
b. Text (atom)
c. Text with image on the side - left position (molecule...
ffwagency.com
Adding components
Vary templates by reusing components in different order.
For extendability, a new componen...
ffwagency.com
Now that we talked about how atomic design works with content
components, what about editors? Some benefits ...
ffwagency.com
Reusable components speed up features and deliverables
Product owners interact with a functioning site at ea...
ffwagency.com
• Before you begin
• Design setup
• Technical setup
•Style guide (Pattern Lab)
•Theme (Drupal)
•Components (...
ffwagency.com
Technical setup
There are 3 main moving parts:
1.Pattern Lab 2 (uses twig)
2.Theme
3.Content components
Desi...
ffwagency.com
Technical setup - Pattern Lab
Design
Pattern Lab Patterns
TemplatesDrupal theme
Content
components
Browsing ...
ffwagency.com
Technical setup - Theme
To enable a Drupal theme to register templates
outside its root you need a module!
F...
ffwagency.com
Technical setup - Content
Design
Pattern Lab Patterns
TemplatesDrupal theme
Content
components
Use Paragraph...
ffwagency.com
Design maintenance
ffwagency.com
Q/A
Thank You!
Upcoming SlideShare
Loading in …5
×

Learn How to Use Atomic Design to Make Your Site Manageable and Adaptable

946 views

Published on

<p>Future-proof your website, speed its delivery and promote consistency by building with Atomic Design principles. Modern websites assume more business responsibility and importance than ever before. As a result, they’ve grown into immensely complex organisms. With their greater size, you now need formal systems to make large websites manageable again - which is why today’s top digital organizations are turning to Atomic design.</p>

<p>Atomic design is a methodology of creating and maintaining design systems that rely on components to produce fully functioning and scalable pages. By building and reusing atoms, you can accelerate your team’s workflow, keep code consistent, avoid redundant work and streamline future site updates. Join FFW’s UK Technical Director and Acquia’s UX Manager to learn high level concepts and anecdotal deep-dives to see how Atomic Design can make your organization more efficient.</p>

<p>You’ll come away with:</p>
<ul>
<li>An introduction and overview of Atomic Design</li>
<li>The tangible benefits of Atomic Design: from content reusability to built in consistency</li>
<li>How we use Atomic Design and how you can use Atomic Design too</li></ul>

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Learn How to Use Atomic Design to Make Your Site Manageable and Adaptable

  1. 1. Using Atomic Design to Make Your Site Manageable and Adaptable Tassos Koutlas - UK Technical Director, FFW Rob Fitzgibbon - UX Manager, Acquia
  2. 2. ffwagency.com Introductions Rob Fitzgibbon Tassos Koutlas
  3. 3. ffwagency.com Contents • Introduction • Benefits • How we use it • How you can use it • Q/A
  4. 4. ffwagency.com Introduction to Atomic Design • Definition • Origins and history • Methodology of problem solving
  5. 5. ffwagency.com Definition • Atomic design is a methodology to create design systems which is inspired by/borrows from, the Linnaean system of biological taxonomy and the Atomic Table of Elements • Just as you can sort living things by size and complexity into kingdom/order/class/family etc., you can do the same with a design system using atomic design. • It’s 5 levels are Atoms/Molecules/Organisms/Templates/Pages • Consider it an evolution from an “artisan” to a more “industrial” method of design creation/production
  6. 6. ffwagency.com Definition Brad Frost, a web developer from Pittsburgh, PA, created the concept back in 2013. He wrote a book, it became popular, he gave talks, he became popular, etc. “Create Systems, Not Pages!” source: http://atomicdesign.bradfrost.com/chapter-1/
  7. 7. ffwagency.com Benefits of Atomic Design • Process • Brand • Innovation potential source: https://io9.gizmodo.com/the- terrifying-age-of-radioactive-toys-for-kids- 1501777693
  8. 8. ffwagency.com Process Benefits source: http://hereandnow.legacy.wbur.org/2013/10/16/assembly-line-anniversary
  9. 9. ffwagency.com Brand Benefits
  10. 10. ffwagency.com Innovation Potential • Quicker to deploy • Faster time to market • Team collaboration • Easier coding • Quicker prototyping • Fewer components • Modular • Agility • Build, measure, learn
  11. 11. ffwagency.com How to use Atomic Design A few steps into it: 1. Design components 2. Use a style guide 3. Integrate with Drupal 4. Align with content 5. Innovate
  12. 12. ffwagency.com Need to share with the rest of the team Need components to become code Need to test and optimise based on devices, viewports and browsers Using a style guide
  13. 13. ffwagency.com
  14. 14. ffwagency.com Library structure for all the patterns. Deliver front end work faster Unified experience Parallelise work with the backend development Guideposts of atomic design very early in the process. Test the UX early with real code Iterate on designs rapidly Benefits
  15. 15. ffwagency.com Integrate with Drupal
  16. 16. ffwagency.com Modern web authoring with Drupal Paragraphs. Paragraph components map into atomic design patterns. Data model per component instead of per page. Specific template per component. Align with content
  17. 17. ffwagency.com Produce content structure and see the result when real content is added More editing power to end users Each component can be used to create content and then piece together to make a fully functional page. Core components can be defined for a functional page and extended with more components Components are not dependent on each other but instead work together Benefits
  18. 18. ffwagency.com Adding components Components present: • atoms: text, subtitle, image • molecule: text with image on the side As these components are added, they contribute to the page authoring process Components are reused in other pieces of content.
  19. 19. ffwagency.com Adding components a. Subtitle (atom) b. Text (atom) c. Text with image on the side - left position (molecule) d. Text with image on the side - right position (molecule) e. Text with image on the side - left position (molecule)
  20. 20. ffwagency.com Adding components Vary templates by reusing components in different order. For extendability, a new component can be easily added to extend page features.
  21. 21. ffwagency.com Now that we talked about how atomic design works with content components, what about editors? Some benefits are: • Design systems speed up team’s workflow through reusing already established UI. • UI components establish a shared vocabulary for editors which creates more collaboration workflows. • Create more future-friendly foundation to modify, extend and improve over time. • Give editors the flexibility to structure pages (via components) as they wish and add different features depending on purpose. Editorial experience
  22. 22. ffwagency.com Reusable components speed up features and deliverables Product owners interact with a functioning site at early stages •Early feedback •Establish visual direction •Discard waterfall Components make it easier to change scope •A change reflects in all pages used Product is adaptable and maintainable •Adapting means better budget control •Future-proof the implementation Agile experience
  23. 23. ffwagency.com • Before you begin • Design setup • Technical setup •Style guide (Pattern Lab) •Theme (Drupal) •Components (Paragraphs module) • Maintenance on the future proofness of design (easy it is to update the site design) • Content (think about content in the same way as design) How You Can Use Atomic Design
  24. 24. ffwagency.com Technical setup There are 3 main moving parts: 1.Pattern Lab 2 (uses twig) 2.Theme 3.Content components Design Pattern Lab Patterns TemplatesDrupal theme Content components
  25. 25. ffwagency.com Technical setup - Pattern Lab Design Pattern Lab Patterns TemplatesDrupal theme Content components Browsing the Pattern Lab github repository there are quite a few options. We suggest to start with Pattern Lab Twig Standard Edition for Drupal. Contains: • Pattern Lab twig edition • Data transfer plugin (e.g. use Attributes class in PL)
  26. 26. ffwagency.com Technical setup - Theme To enable a Drupal theme to register templates outside its root you need a module! Find Component Libraries. It works by registering namespaces that twig understands For example you can do the following: > {% extends "@organisms/header.twig" %} Design Pattern Lab Patterns TemplatesDrupal theme Content components
  27. 27. ffwagency.com Technical setup - Content Design Pattern Lab Patterns TemplatesDrupal theme Content components Use Paragraphs. Define templates per component using standard Drupal notation (they are entities!) Include, extend or embed to pull in the pattern templates from PL as well as pairing the vars together.
  28. 28. ffwagency.com Design maintenance
  29. 29. ffwagency.com Q/A
  30. 30. Thank You!

×