狠狠撸

Me
? Scheldeman Simon
? UX consultant @ Pàu
? Currently: UX Researcher @ Mediahuis

Atoms Molecules Organisms Templates Pages

How to break down
? A house
Template

How to break down
? A roof
? Front
? Back
? Sides
Organisms
Template: House

How to break down
Organism: Front
? Door
? Window
? Wall
? …
Molecules

How to break down
? Door case
? Door window
? Lock
? Handle
Atoms
Molecule: Door

How to break down
Atom: Door case

How to break down
Atom or molecule

How to break down
A house
TemplateOrganisms
A roof
Front
Back
Sides
Molecules
Door
Window
Wall
…
Atoms
Door case
Door window
Lock
Handle

Template: Homepage
Header
Data widget
Route planner
News section
Projects
FAQ
Social
Banner

Title
Link (More)
Highlight view
Title
Link (More)
Article

Template: homepage
Organism: Highlight view
Molecule: Information section
Atom: Title
Title
Title

Template: homepage
Organism: News section
Molecule: Article
Atom: Title
Title
Title
Title

How to break down
Homepage
TemplateOrganisms
Highlight view
News section
…
Molecules
Information section
Article
…
Atoms
Title
…

How to ?ll in the content
? Dimensions: 2 x 0.9 m
? Material: Wood
? Available colours: Dark, light, brown
? Restrictions: Must have a handle
Attributes
Atom: Door case

? Position of the handle
? Lock and handle position relative to
each other
? What happens when we open the
lock
Interactions
Molecule: Door
Differences
? If part of front organism: do this
? If part of Back organism: do this

Organism: Front
? Door
? Window
? Wall
? …
Possible Molecules and con?gurations

Organism: Front

Template: House
? A roof
? Front
? Back
? Sides
Possible organisms
Possible ?ows

How to decide what design
system you need?

Depends on your ?
company/product

Small company with speci?c
knowledge and experience
? One product but still with the ability to modify
? Will mostly follow the same ?ow but with some tools/
components to differentiate
Design system will help to document the basic ?ow
and common components

Small company with mostly
custom work
? High(er) budget
? Only a few common components
No need of a design system, library of components
would suf?ce

Medium company with small(er)
catalogue
? Not a lot of products in offer, but always the same
styling
? Will mostly follow the same ?ow and use the same
components
Design system will be needed to document the
common ?ow and components across the multiple
products

Medium sized company with
multiple offerings
? A lot of products in offer
? Will have multiple ?ows with some unique differences but
the same core values
Design system will be needed to document the core
?ow, common parts but mostly the unique
characteristics

Large company with multiple
offerings/world-wide network
? Multiple offerings
? Lot of ?ows and components speci?c to a section of the
brand/company
? Every brand has it’s own brand expression
Design system (with themes) will help to document
the ?ow for each brand/product and will keep the
components to a minimum

? Find names for atoms, molecules, organisms & templates which will ?t your
company
? Should be integrated in the process of workshops, reviews and the de?nition of
done
? Other responsibilities for you and your team
Implementation …

? Periodic updates and reviews of the design system
? Changes made to the components will need to be implemented retro-actively
? Every stakeholder should know how to work with the design system
? Every stakeholder should have the ability to make suggestions
Speci?c process …

Thanks!
Further questions:
Simon@pau.be

狠狠撸

UX Beers - How To Atomic Design - Simon Scheldeman

More Related Content

UX Beers - How To Atomic Design - Simon Scheldeman