From a lecture for product designers, describing the Atomic Design Approach in theory and practice: the idea of approach and how it was used in production.

1. ATOMIC DESIGN
Why the hell do we need another design system?
Rey Mayson

2. 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.

3. BRAD FROST - THE GUY TO BLAME

4. METAPHOR

5. THE FIVE STAGES OF ATOMIC DESIGN

12. Organisms examples

14. Template

15. Template example

17. Page example

20. COMMON STYLE GUIDE APPROACH

23. • Adding new components can be
complex
• “Light” customization may require
deep framework rework
• If you cant use it “as-it-is” in most
cases - it doesn’t work for you
• It’s hard for visual designer to use it
in mockups
OTTA BOX FRAMEWORK DRAWBACKS

24. • Lacks usage description
• Hard to follow components
nesting
• Doesn’t prevent unnecessary
duplicates at development level
COMMON STYLE GUIDE DRAWBACKS

25. IT’S MISSING THE MOST IMPORTANT

26. ATOMIC DESIGN APPROACH

27. ATOMIC DESIGN OUTCOME

28. ANOTHER GUY WITH A “SMART THEORY.”
HOW ABOUT THE PRACTICE?

29. NAMING CONVENTION

30. LIBRARY STRUCTURE

31. ATOM

32. MOLECULE

33. ORGANISM

34. TEMPLATE

35. TEMPLATE COMPONENTS

36. PAGE

37. LAYERS NAMING

38. INVISION INSPECT MODE

39. FRONTEND CODE STRUCTURE

40. WHAT DID WE GAIN
• Max components re-use by designers and developers
• Complete & unified mockups structure
• Designers and devs use the same “language”
• Quick design prototypes
• Extreme productivity increase in creating new templates from existing elements
• Ease of modifying system components
• Less routine, less QA work, more concentration on new features

41. THANK YOU FOR YOUR PATIENCE
ReyMayson.com
ReyMayson
Read the book