This time we’re not going to tell you how great design systems/atomic designs can be for your company or how we did it, for this half hour we will explore on how you can break down your app/website so you can create a design system and implement it into your company.

1. How to Atomic design

2. Me
• Scheldeman Simon
• UX consultant @ Pàu
• Currently: UX Researcher @ Mediahuis

3. Atomic Design

4. Atoms Molecules Organisms Templates Pages

5. How to …

6. How to break down

7. How to break down

8. How to break down
• A house
Template

9. How to break down
• A roof
• Front
• Back
• Sides
Organisms
Template: House

10. How to break down
Organism: Front
• Door
• Window
• Wall
• …
Molecules

11. How to break down
• Door case
• Door window
• Lock
• Handle
Atoms
Molecule: Door

12. How to break down
Atom: Door case

13. How to break down
Atom or molecule

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

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

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

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

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

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

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

21. How to provide content

22. How to fill 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

23. How to fill in the content
• 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

24. How to fill in the content
Organism: Front
• Door
• Window
• Wall
• …
Possible Molecules and configurations

25. How to fill in the content
Organism: Front

26. How to fill in the content
Template: House
• A roof
• Front
• Back
• Sides
Possible organisms
Possible flows

27. How to decide what design
system you need?

28. Depends on your
company/product

29. Small company with specific
knowledge and experience
• One product but still with the ability to modify
• Will mostly follow the same flow but with some tools/
components to differentiate
Design system will help to document the basic flow
and common components

30. Small company with mostly
custom work
• High(er) budget
• Only a few common components
No need of a design system, library of components
would suffice

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

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

33. Large company with multiple
offerings/world-wide network
• Multiple offerings
• Lot of flows and components specific to a section of the
brand/company
• Every brand has it’s own brand expression
Design system (with themes) will help to document
the flow for each brand/product and will keep the
components to a minimum

34. … of a design system

35. • Find names for atoms, molecules, organisms & templates which will fit your
company
• Should be integrated in the process of workshops, reviews and the definition of
done
• Other responsibilities for you and your team
Implementation …

36. • 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
Specific process …

37. Thanks!
Further questions:
Simon@pau.be