3 steps for building design eco-systems of future, today. - Samir Dash

2019
3-steps for building
design eco-systems
of future,
today.
SAMIR DASH
(Exploring a framework to build a scalable, portable design
system for collaboration and automation by machines)

do you believe that
in coming times
our livesare going to be impacted by
artificial intelligence,
machine learning
and related technologies?
?

?do you believe that
in coming times
how we designis going to be impacted by
artificial intelligence,
machine learning
and related technologies?

PROCESSCULTURE
ECO-SYSTEMS
DesOps / DesignOps

design
operations are
affected by how effective is
the underlying
design systemin eco-system.

why we need
design system?
• acts as a common language.
• helps in collaboration.
• supports reusability.
• saves from repetative works.
• help us not to ‘reinvent wheel’.
• brings consistency in design.
and the similar…

the use of
design systems
of years old
across civilizations.
is a few
thousands

https://www.youtube.com/watch?v=dIKQyVwqskI
ancient times, artisans
used
design systems
to ensure consistency.

grid.
use of

Image Source: https://www.turbosquid.com/3d-models/indian-temple-3d-model/1127080
grid.
use of

Image Source: https://www.turbosquid.com/3d-models/indian-temple-3d-model/1127080
Vastu Purushamandala
grid.
use of

structuraluse of
approach.

structuraluse of
approach.
• measurements
• documentations
• procedures
• practices

patterns.
use of

Design System as a pattern library used in Ancient India
patterns.
use of

modularapproach used
to build
composite
patterns.

road to future…
?
art, language,
sculpture,
architecture…
print
typography…
digital, web
mobile…
aligning to
digital
operations …

automatingdesign style guide
generation.
recent
past.

most of the focus
today are on
syncing
different design
systems.
today

todaydesign sytem
management tools.

future of
design with
automation.SOURCE: https://www.linkedin.com/feed/update/urn:li:activity:6526826357102608384 SOURCE OF VIDEO / CREDITS: Kepler Lab, Publicis.Sapient

human-to-human sharing of info & collaboration.
past.

human-to-machine sharing of info & collaboration.
present.

machine-to-machine sharing of info & collaboration.
future.

design
operationshas been influenced by the
cross-domain technologies
and
philosophical models …

…the automation,
machine learning
and cognitive
computingand mindsets modelled on
DevOps will shape design
operations of future.
DESIGN DEVELOPMENT DEPLOYMENT TESTINGVISION
DesOps
DevOps
© 2018 – Samir Dash , All rights reserved. Creative Commons Attribution-Share Alike 4.0 International License

So how to
prepare our
design systems for
coming evolutions?

STEP #1
towards preparing our design systems for future.
unlearn.

“a design system is not for
so called design discipline*
(as we call it today)”.
unlearn…
STEP #1
towards preparing our
design systems for future.
what immediately
comes to mind
when we talk
about design
systems.

design system is:
• discipline agnostic
• technology agnostic
• process agnostic
• methodologies agnostic
• systems agnostic
…and
learn.
STEP#1towardspreparingourdesign
systemsforfuture.
get the bigger
picture.

https://servicedesign.blog.essex.gov.uk/2019/05/08/sharing-and-prioritising-our-common-service-patterns/
design
system:
beyond
traditional
definitions.
systemsforfuture.

STEP #2
copy
nature.(*the greatest designer of all times!)
*

evolution.
systemsforfuture.
life.

organism.
:evolve
:inherit
:meta-morph
:connect & grow
behaviors
of an
systemsforfuture.

Organic business growth is related to
the growth of natural systems and
organisms, societies and economies, as
a dynamic organizational process
evolution
organic-growth.
is about
systemsforfuture.

are key attributes
of any system with
organic-growth.
variation
& heredity
systemsforfuture.

metamorphism
of patterns used
in vedic
temple design.

https://usefulcharts.com/products/writing-systems-of-the-world
Matt Baker ‘s Evolution of the Alphabet
https://www.thisiscolossal.com/2019/01/evolution-of-the-alphabet/
variation
& heredity
systemsforfuture.
in scripts/language
systems.

systemsforfuture.
variation
& heredity
in work practices
methodologies.

systemsforfuture.
variation
& heredity
in UI eco-system

…what is a
combo-box?
systemsforfuture.

is a stateful-button same
as toggle-button
same as a radio-button
same as ios-switch?
systemsforfuture.

is a button
created with
<BUTTON> same as
the one created with
<DIV>
or the one with
<INPUT TYPE=“BUTTON”>?
systemsforfuture.

In this example, the bigger challenge to solve is
“how the machine will decide
which button to use?”
systemsforfuture.

systemsforfuture.
Is there a good model
that can answer the
metamorphism of
something what we
believe is a button?

• helps in forming structure
• supports nomeneclature
• helps in building semantics
• scalable, extensible
Portable / Adaptable?
Design Model
So that a pattern can be extended to
form another and build a class
relationships to handle variations and
scale the design system to add new
verities of patterns.
Scalable / Extensible?
So one design system can be ported
or mapped to another design system
and it can be easily adapted to any
existing brand system or design-
system.

what are these
called?
• login form
• sign-in form

Shape
Background is white
Has a border of black
No rounded corner
Text
Can be edited
Black in color
Looks like Sans Serif font
Shape
Background is blue
No border
No rounded corner
On rollover changes background
Text
Non-editable
White in color
Shape
Background is green
No border
Has rounded corner
On rollover changes background
Text
Non-editable
white in color
LICENSE: Attribution 4.0 International (CC BY 4.0) Samir Dash @ UX India 2018 – (Workshop) - Applying DesOps in Your Enterprise 4 Oct 2018, Bengaluru

text
text
text
text
text
Shape
Text
=

• inspired by nuclear chemistry models
and atomic design principles
• handles metamorphism.
• technology and disciplines
agonistic model
Nuclear
Design.
PROTON
NUCLEUS
ATOM(abstractLayer)
ISOTOPE
ISOTOPE
MOLECULE COMPLEX MOLECULE
MATTER (macro level)
MOLECULE(abstract
Layer)
SUB-ATOMICPARTICLES(abstract
Layer)
NEUTRON
NUCLEUS(abstractLayer)
NUCLEUS
MIXTURE
tangible smallest unit that world
can directly interact with.
systemsforfuture.

TOKEN
SUB-ATOMIC
PRIMITIVE
ATOM
DERIVATIVES
ISOTOPES
PATTERN
MOLECULE
TEMPLATE
MIXTURE
VIEW/PAGE
MATTER
TEXT SEARCH
SEARCH
SEARCH
SEARCH
SEARCH
RESET
SEARCH
RESET
FIRST NAME
LAST NAME
SUBMIT
(PROPERTY)
ATTRIBUTES
NUCLEUS
(PROPERTIES)
Nuclear
Design.
systemsforfuture.

ATTRIBUTES
NUCLEUS
…is an
abstract
layer of
collection
of tokens
Nuclear
Design.
systemsforfuture.

TOKEN
SUB-ATOMIC PARTICLE
…is
smallest
unit of
attributes
collection.
Nuclear
Design.
systemsforfuture.

TOKEN
SUB-ATOMIC PARTICLE
…any
token falls into
any of these
types.
APPEARANCE
TYPE OF TOKEN
BEHAVIOUR
TYPE OF TOKEN
STATE
TYPE OF TOKEN
* the list is from a work in progress draft.
Nuclear
Design.
systemsforfuture.

APPEARANCE
SUB-ATOMIC PARTICLE
BEHAVIOUR
SUB-ATOMIC PARTICLE
STATE
SUB-ATOMIC PARTICLE
TOKEN
SUB-ATOMIC PARTICLE
VISUAL
ALIGNMENT
SIZE
LOCATION
COLOR
OPACITY
VISIBILITY
BORDER
BACKGROUND
MARGIN
PADDING
POSITION
TYPOGRAPHY
FONT FAMILY
FONT WEIGHT
TRUNCATION
MEDIA-FILTER
THEME
…
DICTION
LANGUAGE
TONE
VOICE
GRAMMAR
IMAGERY
…
DICTION/TONE
SUB-ATOMIC PARTICLE
EXAMPLE
Nuclear
Design.
systemsforfuture.

APPEARANCE
SUB-ATOMIC PARTICLE
BEHAVIOUR
SUB-ATOMIC PARTICLE
STATE
SUB-ATOMIC PARTICLE
TOKEN
SUB-ATOMIC PARTICLE
INTERACTION
ON CLICK
ON TAP
ON HOVER
ON DATA
ON LOAD
ON FOCUS
ON BLUR
ON RESIZE
…
ACCESSIBILITY
TAB INDEXING
WAI-ARIA
…
EXAMPLE
Nuclear
Design.
systemsforfuture.

APPEARANCE
SUB-ATOMIC PARTICLE
BEHAVIOUR
SUB-ATOMIC PARTICLE
STATE
SUB-ATOMIC PARTICLE
TOKEN
SUB-ATOMIC PARTICLE
INTERACTION
VISIBLE
HIDDEN
PRESSED
HIGHLIGHTED
TOGGLED ON
TOGGLED OFF
…
DOM ATTRIBUTE
DATA
ID
CLASS
…
EXAMPLE
DATA
DATA
Nuclear
Design.
systemsforfuture.

PRIMITIVE
ATOM
SHAPE BLOB
ATOM
IMAGE BLOB
ATOM
TEXT BLOB
ATOM
…abstract
layer that is
made up of
attributes
(thereby
tokens).
3 TYPES
LICENSE: Attribution 4.0 International (CC BY 4.0) Samir Dash @ UX India 2018 – (Workshop) - Applying DesOps in Your Enterprise 4 Oct 201
Nuclear
Design.
systemsforfuture.

DERIVATIVE
ISOTOPE
DERIVATIVE 1
ISOTOPE
DERIVATIVE 2
ISOTOPE
DERIVATIVE 3
ISOTOPE
PRIMITIVE
ATOM
…with
change in
attributes,
these are
variations
made out of
primitives.
Nuclear
Design.
systemsforfuture.

DERIVATIVE
ISOTOPE
DERIVATIVE 1
ISOTOPE
DERIVATIVE 2
ISOTOPE
DERIVATIVE 3
ISOTOPE
PRIMITIVE
ATOM
…these are
raw objects
with
non-tangible
presence in
design
system.
Nuclear
Design.
systemsforfuture.

PATTERN
MOLECULE
PATTERN (ELEMENT)
MOLECULE (ELEMENT)
…consists of
derivatives
and are the
smallest
tangible unit
in design
system
which user
can interact
with.
Nuclear
Design.
systemsforfuture.

PATTERN
MOLECULE
PATTERN (ELEMENT)
MOLECULE (ELEMENT)
PATTERN (COMPOUND)
MOLECULE (COMPOUND)
…same
or
different
derivatives
can
combine
together
as an
integrated
unit to
form
pattern.
Nuclear
Design.
systemsforfuture.

TEMPLATE
MIXTURE
…is
collection of
patterns.
Nuclear
Design.
systemsforfuture.

PAGE / VIEW
MATTER
…is
collection of
templates.
Nuclear
Design.
systemsforfuture.

Text Blob
id:txt_prim1
type: primitive
content: “Hello”
editable: False
font-family:: “Sans”
font-weight: bold
font-size: 14px
color: #000
line-height:14px
z-index:
x:10px;
y: 10px;
position: relative
Shape Blob
id:shp_prim1
type: primitive
content: txt_prim1
background-color:#e20000
background-repeat: no-repeat
width: 50px
height:50px;
padding:10px
margin:10px
border: none
border-radius:0
z-index:
x:10px;
y: 10px;
position: relative
+ =
Hello Hello
hit-area: 0,0,width,height
hit-action-click: null
CDQHU@SHUD CDQHU@SHUD
O@SSDQM
Text-Field
'Mnm,S` mf hakd( 'Mnm,S` mf hakd( 'S` mf hakd(
Label. Nuclear
Design.
systemsforfuture.

Text Blob
id:txt_prim1
type: primitive
content: “Hello”
editable: False
font-weight: bold
font-size: 14px
color: blue
line-height:14px
z-index:
x:10px;
y: 10px;
position: relative
url https://purl.org/odso
target: “_blank”
onhover_color:#e20000
Shape Blob
id:shp_prim1
type: primitive
content: txt_prim1
width: 50px
height:50px;
padding:10px
margin:10px
border: none
border-radius:0
z-index:
x:10px;
y: 10px;
position: relative
+ =
Hello Hello
hit-action-click: null
O@SSDQM
Text-Link
Text-Link. Nuclear
Design.
systemsforfuture.

Text Blob
id:txt_prim2
type: primitive
content: “Go”
editable: True
font-weight: bold
font-size: 14px
color: #666
line-height:14px
z-index:
x:10px;
y: 10px;
position: relative
Shape Blob
id:shp_prim2
type: primitive
content: txt_prim2
background-color:#fff
width: 200px
height:50px;
padding:10px
margin:10px
border: none
border-radius:3px
z-index:
x:10px;
y: 10px;
position: relative
+ =
Enter Text
hit-action-click: action()
O@SSDQM
Text Field
Enter Text
Text-Field. Nuclear
Design.
systemsforfuture.

Text Blob
id:txt_prim1
type: primitive
content: “Click Me”
editable: False
font-weight: bold
font-size: 14px
color: #000
line-height:14px
z-index:
x:10px;
y: 10px;
position: relative
Shape Blob
id:shp_prim1
type: primitive
content: txt_prim1
width: 200px
height:50px;
padding:10px
margin:10px
border: none
border-radius:0
z-index:
x:10px;
y: 10px;
position: relative
+ =
Click Me Click Me
O@SSDQM
Button
Button. Nuclear
Design.
systemsforfuture.

Image Blob
id:txt_prim1
type: primitive
content: “data:png;base64…”
editable: False
font-weight: bold
font-size: 14px
color: #000
line-height:14px
z-index:
x:10px;
y: 10px;
position: relative
Shape Blob
id:shp_prim1
type: primitive
content: txt_prim1
background-color: null
width: 50px
height:50px;
padding:10px
margin:10px
border: none
border-radius:0
z-index:
x:10px;
y: 10px;
position: relative
+ =
O@SSDQM
Button
image-icon. Nuclear
Design.
systemsforfuture.

this modeling approach is
more aligned to
extensibility
similar to
Object-Oriented
model.
entity/class/object ±attribute ±value
systemsforfuture.
Nuclear
Design.

STEP #3
make it
open.

design system:
a common-language.
systemsforfuture.

design systems
(common languages)
do not have acommon language
among themselves.
systemsforfuture.

So that any member can use
another member’s patterns
in a consistent manner
Semantic for machineCollboration made
possible for human Define ontology or vocabulary
on how each pattern, templates
etc. are related to one another,
so that it helps in automation
through machines.
open design system:
systemsforfuture.

collaboration
is
#1 focusas of today in
designOps/desOps.
systemsforfuture.
• Data sync across design systems
• Reusability across design systems
• multiple teams collaboration

making
design Systems
open
is about
stop building
design systems in
silos.
systemsforfuture.

CDN based
Design
EcoSystem
*CDN = Content Delivery Network
systemsforfuture.
Collaborative
Design
Eco-system =

CDN
User 1
contentA
+
dependancy1
contentB
+
dependancy1
+
dependancy 2
Global Repo
Global
Namespace
Namespace
User1
contentA
contentB
dependancy1
dependancy2
Namespace
User2
contentC
contentD
User 2
contentC
+
dependancy1
+
user1.contentA
contentD
+
dependancy1
+
dependancy 2
Common
dependancies are
available in global
repo, and each
member content
is arranged via
namespaces so
that they can be
tracked and
reused by same or
other members.
• helps in collaboration
• supports content reuse
systemsforfuture.

Content Delivery Network helps in
collaboration and identifying each
entity by some namespace to
maintain a relationship.
Design Model
CDN
Technologically antagostic
Scalable
Extensible
Portable,adaptable
Can be translated to Semantic models.
CDN based
Design EcoSystem
systemsforfuture.

Let’s put
Nuclear Design Model
in a
CDN architecture.

systemsforfuture.

:root{
--myVariable: red;
background: var(--myVariable);
}
.myClass{
--myVariable: green;
}
<body>
<div></div>
<div class=“myClass”></div>
</body>
Example of web eco-system
CSS Variables come to rescue!
systemsforfuture.

Example of
translating the
Open Design
System
into a specific
technology
driven domain
e.g. Web Design/
Development
HTML, CSS, JS
DOWNLOAD POC FROM:
https://github.com/OpenDesignSystem/ODS-CDN
STEP#3

Concptual Implementation
:root{
--ods-token-background: red;
--ods-token-border: 1px solid black;
--ods-token-color:black;
}
.ods-shape{
background: var(--ods-token-background-color)
border: var(--ods-token-border);
}
@import: ./global/global.css
.ds1 {
--ods-token-background:red;
--ods-token-border: 2px dashed red;
}
global/tokens/tokens.css
global/primitives/ods-shape.css
global/global.css
@import ./global/tokens/tokens.css
@import ./global/primitives/ods-shape.css
@import ./global/primitives/ods-text.css
ds1/ds1.css
@import: ./global/shape.css
.ds1 .dbox{
--ods-token-background: blue;
}
ds1/derivatives/dbox.css
ds1/derivatives/dtext.css
@import: ./global/primitives/ods-text.css
.ds1 .dtext{
--ods-token-color: orange;
}
ds1/patterns/textbox/textbox.css
@import: ./ds1/derivatives/box.css
@import: ./ds1/derivatives/text.css
ds1/patterns/textbox/textbox.html
<div class="ods-p ds1 textbox">
<div class="ods-d ods-shape dbox" >
<div class="ods-d ods-text dtext”
>__label</div>
</div>
</div>
.ods-text{
color:var(--ods-token-color);
}
global/primitives/ods-text.css
ds1/patterns/textbox
<div>
<div id="myTextBox1" class="ods-p ds1”
data-value='{"__label":”HELLO"}' >
</div>
</div>
application.html
application.css
@import: http://ods/ds1/ds1/ds1.css
ODS(CDN)
CDN.js
{Read markup, resolve namespace and
load dependent derivatives and
associated CSS and markups. }
<script src=“http://ODS/CDN.js”/>
systemsforfuture.
DOWNLOAD POC FROM:

:root{
}
.ods-shape{
}
.ds1 {
}
global/global.css
ds1/ds1.css
.ds1 .dbox{
}
.ds1 .dtext{
}
>__label</div>
</div>
</div>
.ods-text{
}
<div>
</div>
</div>
application.html
application.css
ODS(CDN)
CDN.js
text
systemsforfuture.
DOWNLOAD POC FROM:

:root{
}
.ods-shape{
}
.ds1 {
--ods-token-background:green;
}
global/global.css
ds1/ds1.css
.ds1 .dbox{
}
.ds1 .dtext{
}
>__label</div>
</div>
</div>
.ods-text{
}
<div>
</div>
</div>
application.html
application.css
ODS(CDN)
CDN.js
text
text
HELLO
text
systemsforfuture.
DOWNLOAD POC FROM:

STEP #3 towards preparing our design
systems for future.
label Download Code:

systems for future.
button Download Code:

systems for future.
textfieldDownload Code:

• Automation
• Cognitive Computing
• Artificial Intelligence
• Machine Learning
• Knowledge Management
semantic is to make it
machine-readable to open
the gate to the future of
design involving...
systemsforfuture.

future
design systems
will be developed as
ontologiesgraph data
with as a
open & semantical Model.
systemsforfuture.

and this
fits to the
existing
ontological
technologies and
the models
used for
semantic-web and
linked-data
or
graph-databases.
systemsforfuture.

at the core, the
semantic models
use the concept of
triple.
The rose has the color red.
subject predicate object
which is very similar to classical OO model:
entity/class/object – attribute – value
systemsforfuture.

Resource Description Framework
RDFS (RDF Schema) defines some classes
which represent the concept of subjects,
objects, predicates etc.
RDF defines is a predicate called "rdf:type"
the same triple
is the
atomic data entity
in
RDF.
systemsforfuture.

RDF uses URIs
to define
Subject & Object and even
relationship or Predicate.
The rose has the color red.
subject predicate object
URI1: http://mydomain/flower#rose URI2: http://mydomain/color#red
URI3: http://mydomain/flower#hasColor
Note: URI - Uniform Resource Identifier
systemsforfuture.

the OWL extends RDF
further with adding
more about classes
with object
& data properties and
uses triples
and
URIs.
OWL adds semantics to the schema. It
allows you to specify far more about the
properties and classes. Web Ontology Language
systemsforfuture.

the OWL can be
written in RDF/XML
format so that it can
be used by any
RDF applications and
can also be .
OWL adds semantics to the schema. It
allows you to specify far more about the
properties and classes. Ontology Web Language
systemsforfuture.

Explore some initial explorations at
Ontological schema for Design System:
systemsforfuture.

PURL namespace prefixes
@odso:
@odsf:
@odsf-g:
@odsf-gui:
@odsf-aui:
@odsf-gesui:
https://purl.org/odso/odso
https://purl.org/odso/odsf
https://purl.org/odso/odsf-g
https://purl.org/odso/odsf-gui
https://purl.org/odso/odsf-aui
https://purl.org/odso/odsf-gesui
Open Design System Ontology
Open Design System Framework
Open Design System Framework - Global
Open Design System Framework – Graphical User Interface
Open Design System Framework – Auditory User Interface
Open Design System Framework – Gesture User Interface

@odso:
Design System A
@odsf-gui:
@dsA:
dwsdmcr
@nuclear_
design:
dwsdmcr
@owl:
@rdf:
Design System B
@dsB:
RDF / OWL Applications
/ Tools/ Eco-Systems
dwsdmcr @dsAB:
Design System Mapped
with A & B
ODSO based Design Eco-System

@odsfg: https://purl.org/odso/odsf-g
http://opendesignsystem.org/documents/odsf-g/latest/odsf-g.latest.owl
Open Design System Framework - Global
This contains
the basic
framework
level global
vocabulary
and
definitions
that can work
across
domains.

Open
Design
System
Framework
@odsf:
https://purl.org/o
dso/odsf
My Design
System
@my_design_system:
is extended by
Building
Design
Systems
based on
ODS
Framework is
by extending
the @odsf:
class.
extend a class or
define a new
add new properties
add an individual
define values

http://opendesignsystem.org/documents/odsf/latest/odsf.latest.owl
importing existing brand and
design system rules can be
made by breaking them and
mapping them under attributes.

Let’s collaborate to
define and build the road to
Open Design System.

thankyou.
twitter: @mobilewish
let’s connect.
PAPERBACK ALSO AVAILABLE AT
https://www.amazon.co.uk/dp/1799171671/
DOWNLOAD A FREE PDF COPY OF MY BOOK
https://designops-conference.com/wp-content/uploads/2019/05/
THE_DESOPS_ENTERPRISE_2ED.pdf

Thank You
Samir Dash
@mobilewish
http://desops.io
@

Nuclear Design Model
+
CDN
+
in CSS/HTML for web UI
APPENDIX

IMAGE
SHAPE
TEXT
TOKENS
PRIMITIVES
TOKEN-A
TOKEN-B
DS1-PRIMITIVE1
TOKENS
PRIMITIVES
DS1-TOKEN-A
DS1-TOKEN-C
PATTERNS
DS1-PATTERN1
DS1-PATTERN2
TEMPLATES
DS1-PATTERN1
DS1-PATTERN2
DS1-VIEW1
DS1-VIEW2
DERIVATIVES
DS1-DERIVATIVE1
DS1-DERIVATIVE2
DS1-DERIVATIVE3
DS1-DERIVATIVE4
VIEWS
TOKENS
PRIMITIVES
DS2-TOKEN-B
PATTERNS
DS2-PATTERN1
TEMPLATES
DS2-PATTERN2
DS2-PATTERN3
DS2-VIEW1
DS2-VIEW2
DERIVATIVES
DS2-DERIVATIVE2
DS2-DERIVATIVE3
DS2-DERIVATIVE4
DS2-DERIVATIVE5
VIEWS
DS2-DERIVATIVE1
DS2-PATTERN1
TOKENS
PRIMITIVES
DS3-TOKEN-A
DS3-TOKENB
PATTERNS
DS3-PATTERN1
DS3-PATTERN2
TEMPLATES
DS3-PATTERN1
DS3-PATTERN2
DS3-VIEW1
DS3-VIEW2
DERIVATIVES
DS3-DERIVATIVE1
DS3-DERIVATIVE2
DS3-DERIVATIVE3
DS3-DERIVATIVE4
VIEWS
DS3-DERIVATIVE5
ODS-GLOBAL DESIGN SYSTEM 1 (DS1) DESIGN SYSTEM 2 (DS2) DESIGN SYSTEM 3 (DS3)
Open
Design
Systems
EXAMPLE OF
APPENDIX

IMAGE
SHAPE
TEXT
TOKENS
PRIMITIVES
TOKEN-A
TOKEN-B
DS1-PRIMITIVE1
TOKENS
PRIMITIVES
DS1-TOKEN-A
DS1-TOKEN-C
PATTERNS
DS1-PATTERN1
DS1-PATTERN2
TEMPLATES
DS1-PATTERN1
DS1-PATTERN2
DS1-VIEW1
DS1-VIEW2
DERIVATIVES
DS1-DERIVATIVE1
DS1-DERIVATIVE2
DS1-DERIVATIVE3
DS1-DERIVATIVE4
VIEWS
TOKENS
PRIMITIVES
DS2-TOKEN-B
PATTERNS
DS2-PATTERN1
TEMPLATES
DS2-PATTERN2
DS2-PATTERN3
DS2-VIEW1
DS2-VIEW2
DERIVATIVES
DS2-DERIVATIVE2
DS2-DERIVATIVE3
DS2-DERIVATIVE4
DS2-DERIVATIVE5
VIEWS
DS2-DERIVATIVE1
DS2-PATTERN1
TOKENS
PRIMITIVES
DS3-TOKEN-A
DS3-TOKENB
PATTERNS
DS3-PATTERN1
DS3-PATTERN2
TEMPLATES
DS3-PATTERN1
DS3-PATTERN2
DS3-VIEW1
DS3-VIEW2
DERIVATIVES
DS3-DERIVATIVE1
DS3-DERIVATIVE2
DS3-DERIVATIVE3
DS3-DERIVATIVE4
VIEWS
DS3-DERIVATIVE5
ODS-GLOBAL DESIGN SYSTEM 1 (DS1) DESIGN SYSTEM 2 (DS2) DESIGN SYSTEM 3 (DS3)
Open
Design
Systems
EXAMPLE OF
automatically inherited
modified
APPENDIX

Let’s Translate this for
web development/design
domain…
APPENDIX

:root{
--myVariable: red;
background: var(--myVariable);
}
.myClass{
--myVariable: green;
}
<body>
<div></div>
<div class=“myClass”></div>
</body>
CSS Variables come to rescue!
APPENDIX

:root{
}
.ods-shape{
}
.ds1 {
}
global/global.css
ds1/ds1.css
.ds1 .dbox{
}
.ds1 .dtext{
}
>__label</div>
</div>
</div>
.ods-text{
}
<div>
</div>
</div>
application.html
application.css
ODS(CDN)
CDN.js
APPENDIX

:root{
}
.ods-shape{
}
.ds1 {
}
global/global.css
ds1/ds1.css
.ds1 .dbox{
}
.ds1 .dtext{
}
>__label</div>
</div>
</div>
.ods-text{
}
<div>
</div>
</div>
application.html
application.css
ODS(CDN)
CDN.js
text
APPENDIX

:root{
}
.ods-shape{
}
.ds1 {
--ods-token-background:green;
}
global/global.css
ds1/ds1.css
.ds1 .dbox{
}
.ds1 .dtext{
}
>__label</div>
</div>
</div>
.ods-text{
}
<div>
</div>
</div>
application.html
application.css
ODS(CDN)
CDN.js
text
text
HELLO
text
APPENDIX

Sample POC.
Demo.
APPENDIX

Example of
translating the
Open Design
System
into a specific
technology
driven domain
e.g. Web Design/
Development
HTML, CSS, JS
DOWNLOAD POC FROM:
APPENDIX

APPENDIX

https://www.invisionapp.com/design-system-manager
https://cabanadesignsystem.com/
APPENDIX

let’s fast
forward
tofuture.
APPENDIX

PM AR
UX EUPM MR
AR QA
M PM
PM VDPM MR
IA EUPM EUUI
PM PM
PMPM MR
PM VDPM EUPM IX
QA PM
PM EUPR MR
IA UIAR EUAR
PM PM
PMPM MR
PMDV EUPM EU
PM AR
PM IXPM DV
PM EUPM EUUR
PM PM
PMPM IA
PM MRPM VDEU VD
PM PMPM IX
PMPR MR
EU
Organization
operations
are
a fabric of
feedback-loops.
DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru
APPENDIX

PEOPLE
SAYS THINKS
FEELSDOES
PEOPLE
THINKS SAYS
DOESFEELS Touch-point of
feedback loop
PEOPLE
THINKS SAYS
feedback loop
PROCESSES
PEOPLE
THINKS SAYS
feedback loop
PROPS
In DesOps the role of touch-points/ interactions among
all three becomes equally important.
PROCESSES
Touch-point of
feedback loop
PROPS
Touch-point of
feedback loop
PROPS
PROPS
PROCESSES
PROCESSES
APPENDIX

3 steps for building design eco-systems of future, today. - Samir Dash

3 steps for building design eco-systems of future, today. - Samir Dash

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a 3 steps for building design eco-systems of future, today. - Samir Dash

Semelhante a 3 steps for building design eco-systems of future, today. - Samir Dash (20)

Mais de DesignOps Global Conference

Mais de DesignOps Global Conference (8)

Último

Último (20)

3 steps for building design eco-systems of future, today. - Samir Dash