Learn How to Use Atomic Design to Make Your Site Manageable and Adaptable
-
Upload
acquia -
Category
Technology
-
view
305 -
download
1
Transcript of Learn How to Use Atomic Design to Make Your Site Manageable and Adaptable
Using Atomic Design to Make Your Site Manageable and Adaptable
Tassos Koutlas - UK Technical Director, FFW
Rob Fitzgibbon - UX Manager, Acquia
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 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
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/
ffwagency.com
Benefits of Atomic Design
• Process
• Brand
• Innovation potential
source: https://io9.gizmodo.com/the-
terrifying-age-of-radioactive-toys-for-kids-
1501777693
ffwagency.com
Process Benefits
source: http://hereandnow.legacy.wbur.org/2013/10/16/assembly-line-anniversary
ffwagency.com
Innovation Potential
• Quicker to deploy
• Faster time to market
• Team collaboration
• Easier coding
• Quicker prototyping
• Fewer components
• Modular
• Agility
• Build, measure, learn
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
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
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
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
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
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.
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)
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.
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
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
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
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
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)
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
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.