Atomic Design with PatternLabs

Atomic Design & Pattern Lab
AGENDA
Atomic Design
• What is atomic design
• What are the advantages
Pattern Lab
• What is Pattern Lab (information about interface)
• What are the advantages

Atomic Design
What is atomic design
Atomic design is a methodology composed of five distinct stages
working together to create interface design systems in a more
deliberate and hierarchical manner.
 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
Here is the five stages of Atomic Design
Atomic design is not a linear process, but rather a mental model
to help us think of our user interfaces as both a cohesive whole
and a collection of parts at the same time. Each of the five stages
plays a key role in the hierarchy of our interface design systems.
 Atoms
 Molecules
 Organisms
 Templates
 Pages

Atomic Design

Atoms
Atoms are the simplest, smallest and most elements on pages.
They can’t be broken down any more. Each atom in the natural
world has its own unique properties and its is not useful just on
their own.
Example
• Color’s
• Fonts
• Buttons
• input fields
• Headings (h1,h2 etc. with there respective css properties)
• radio buttons
• text paragraphs

Atoms

Molecules
To create meaning and new properties, atoms bond together to
form molecules. In interfaces, molecules are relatively simple
groups of UI elements functioning together as a unit.

Molecules
Example: A form label, search input, and button can join
together to create a search form molecule.

Organisms
If molecules are the smallest fundamental units of a compound,
organisms allow us to combine them into a relatively complex
section of an interface.

Organisms
Example : Here we can add atoms and molecules together
Atoms – logo, navigation
Molecules – Search sections

Template
Once you have organisms created, you can explore how these
might fit together to create templates. It’s here where we begin
to see the layout and flow of a page. Templates provide
additional context to the abstract molecules and organisms.

Template
Example : we can take that header organism and apply it to a
homepage template.

Pages
Finally, pages are the highest level of fidelity. They take our
templates and incorporate real representative content. Pages
allow us to test the system we created with different inputs to
ensure that things don’t break. They allow us to test variations
of the template.

Pages

Advantages
Advantages of Atomic Designs
• You can mix and match components - By breaking down
components into basic atoms it's easy to see what parts of
the site can be reused, and how they can be mixed and
matched to form other molecules and even organisms.

Advantages
• Easy to understand layout - Because of the documentation
around what atoms molecules and organisms are being used
and where, it's easy to see what each part of the code
represents. Another bonus of this is that it makes it easier to
explain the codebase to a new developer.
• Code is more consistent – As we define each smaller
component in atoms or molecules, so it is easy to see which
components are being used for different parts of the site. And
it’s reduce the chances of writing duplicate code.

Advantages
• Easier to update and remove parts of the site – As only one
atom, molecule or organism is being changed at any one time,
it is easy to ensure that any updates to a component are
carried across to all other instances across the site.
• More modular file structure – As we are dividing each
component into smaller parts, so our code is more modular,
reusable and easy to understand.
• Fewer components overall - If a creator has a list of atoms,
molecules and organisms presented to them before site
creation begins, they are more likely to use what already
exists than create new components for small variations.

Pattern Lab
In order to apply Atomic design methodology we need to use
Pattern Lab:
Pattern Lab is a collection of tools to help create and maintain
atomic web design systems.
What is Pattern Lab
 A comprehensive component library
 A design system builder
 A practical viewport resizer
 Its not a UI framework like bootstrap or fondation
 It’s not a languagelibrarystyle depended

Pattern Lab
Why Patten Lab
Pattern Lab provides a way to help you develop, describe, &
stitch together mark-up and style patterns
 See all your global styles laid out at once (h1 h2, fonts, color’s etc)
 Can’t be broken down any further without losing their meaning
 Building blocks of an interface
 Easier to test
 Better workflow

Pattern Lab
Pattern lab font-end view option and uses
 Pattern List

Pattern Lab
Pattern lab font-end view option and uses
 Resizing options

Pattern Lab
Link about creating new pattern, atoms and molecules
https://www.youtube.com/watch?v=F0O3EaAFIqs

Pattern Lab
Atoms -
Example creating navigation which we can use on multiple
places
Here is the mustache file code
<nav>
<ul class="{{classname}}">
<li>
{{#nav}}
<a href="{{{url}}}" target="_blank" >{{nav-value}}</a>
{{/nav}}
</li>
</ul>
</nav>

• You can create good experiences without
knowing the content. What you can’t do is
create good experiences without knowing your
content structure. What is your
content made from, not what your
content is.Mark Boulton

Atomic Design with PatternLabs

More Related Content

Similar to Atomic Design with PatternLabs

More from Atlogys Technical Consulting

Recently uploaded

Atomic Design with PatternLabs