đŸ„Š

Systems that create systems

An intro to Design Systems at LTK

Fractals

But first...

Fractals

A fractal is a never-ending pattern. Fractals are infinitely complex patterns that are self-similar across different scales. They are created by repeating a simple process over and over in an ongoing feedback loop.

https://fractalfoundation.org/resources/what-are-fractals

"Romanesco broccoli"

Regular broccoli

How would you design this?

Proposal:

 

 

 

 

(Start with the little pieces)

Divide and conquer

patterns

Reusable patterns

analyzING existing patterns

Same parts, materials, colours...

 

Different sizes, etc.

Same parts, materials, colours...

 

Different sizes, etc.

 

And different functionalities. 

reusability

 “Good artists copy, great artists steal”.

“The first person you should copy is
you.”

SYMBOLS

to really master reusability, you have to move to adapting and reusing entire interface patterns.

 

Only then will you design even faster and more consistently.

https://www.uxpin.com/studio/blog/great-artists-reuse-reusable-patterns-product-design/

But...

:(

Really?  ;)

Example: Photoshop Brushes

Atomic design

https://medium.com/nextuxdesign/building-design-system-with-atomic-methodology-22c31f3c02f3

Our fundamental parts are the design tokens

Example:

Salesforce's Lightning Design System

https://www.lightningdesignsystem.com/design-tokens/

Do you want to see the code?

<div class="bg-blue-100"></div>

HTML

(this is just an example)

Configuration

export const ltkColors = {
  
  transparent: 'transparent',
  
  blue: {
    100: '#001639',
    200: '...'
    ...
  },
  
}

Central Library

import { ltkColors } from '@lovetoknow/design-tokens'

export const ydrColors = {
  
  // ...
  
  blue: {
    100: ltkColors.blue['100'],
    200: '...' // another different color
    // ...
  },
  
}

Example Project (shared lib)

YDR articles

YDR sentences

YDR dictionary

import { ydrColors } from '@lovetoknow/ydr-commons'

// ...

JavaScript

Subprojects

Central library

YDR

WF

GL

LTK

Customization

layer 💅

YDR articles

YDR sentences

YDR dictionary

YDR thesaurus

...

...

YDR-commons

WF web

WF wordscapes

New GL

New LTK

-

.

.

Subprojects

Projects

Molecules

Symbols -> Other Symbols or Styles

  • Icons
  • Colours
  • Spacing
  • Font attributes
  • Border radius
  • Different states
  • ...

Delete

Delete

{

{

{

  • Some parts can be overridable: text, states (colours, icons)...
  • Some parts can be extended ("slots"). So they need to be nestable when needed. (Containers... Window Frame and Door Frame example)
  • They need to play nice with each other (one component shouldn't affect others).
  • Accessible by default.
  • Shareable, searchable. (docs)
  • We need to have some control over versions. (DSM)
  • It helps to use the same "names" for the different parts (see next slide).

Reusability

ubiquitous language

More than just the obvious...

Starting with

the little parts to create
"bigger wholes".

It is an investment
we need to make!

THANK YOU!! ❀

🐩 @paul_melero

Systems that Create Systems

By Paul Melero

Made with Slides.com

Systems that Create Systems

An intro to Design Systems at LoveToKnow

  • 1,035

More from Paul Melero