The Future of Design Systems: CDN Based Open Design Eco-System

 

When we talk about an open world, we inherently refer to an attempt towards making it possible so that all the entities in that eco-system can talk to each other. It would involve peopleprops and processes – the typical 3 components we use in a service design model (https://www.nngroup.com/articles/service-design-101/)

Any service design tool helps to find out the touch-points and what is happening around that with the user at the center through tools like Empathy Maps, User Journeys, Service Design Blueprints and so on.

However for a future world of automation and machine learning, it becomes critical to ensure that these touch points are also considered the other two i.e. props and processes at the center. The DesOps is practically all about finding out this and enabling those touch points through the act of optimzing, reducing or removing them, to improve the operation.

In the same context we look at the design systems in use, (e.g. in a visual design and UI design and development scenario – a branding guideline, widget library, collection sample code organized in someway) also are part of bigger eco-system, where the future automation of design with machine learning they need to talk to each other. Being a set of “prop” they need also to interact with “people” and “processes”. This means, a design eco-system of future should be open, where collaboration from “people” or the “designers” is made possible where design systems follow a common model to become part of the common language.

At the same time the design systems should semantic so that the machines can infer them and take logical decisions (read: https://www.linkedin.com/pulse/open-design-system-adding-semantics-part-3-heredity-samir-dash/)

Then how to achieve this?

One of the possible way, as I see is to build the open design “eco-system” with the two components in them.

The first one is a Content Delivery Network (CDN) that would allow different design systems to share their content for reusability and collaboration against some namespaces (or an identifier path )

Secondly, it should follow a model that is scalable, extensible and can align to semantic model. One such model as I was writing about earlier is the Nuclear Design Model. (read https://www.linkedin.com/pulse/photo-essay-semantic-design-system-part-2-nuclear-model-samir-dash/ )

So the Open Design (Eco)System would be combination of a CDN with a Nuclear Design Model.

To achieve this in design dimensions of different domains e.g. UI design, Visual Design, Branding, Voice based System Design, Business Process Design, Service design, Content Design, Learning or Instructional Design, System Design etc. etc. we need to use different technologies, framework and methodologies depending on the area it touches upon, and I think this would is a great opportunity for all service designer in today’s world to explore these and define.

In the UX India workshop I took an example case of UI design and development scenario targeting web technology, and attempted on a Proof -of – concept (POC) using HTML, CSS and JS.

I created a basic css representations of the Nuclear Model using CSS3 Variables, that allowed modification of properties which was an essential part of building an inheritance model of properties.

So I started with a basic bucketing of the entities at a conceptual level, with a namespace model and folder structure.

ODS-Global was the global namespace tagged to a folder that contained two set of entities i.e. Tokens and Primitives.

In Tokens (representing properties and attributes) I kept all the list of tokens without assigning them to any particular entities. Then under Primitives, 3 main primitives were defined (namely Shape, Image and Text), where each one defined which tokens belong to them.

Then each design system created by anyone would have a separate namespace folder under which there are buckets/folders for each entity type, namely :

Tokens – set of properties or attributes defined with default values

Primitives – applied a set of selective tokens

Derivatives – these are derivations from any primitive with modified values to the tokens they are associated with)

Patterns – combination of derivatives in an integrated way

Template – combination of patterns.

Views – combination of templates.

The above diagram shows the conceptual structure and how inheritance is happening based on the approach mentioned above. This conceptual structure now can be represented in CSS , HTML and JS as following

And the following image shows how the entities get their default properties and if needed over-ride them while maintaining the scope of their entities.

See how in a design system DS1 the properties change, keeping the same list of tokens intact, to provide one-to-one mapping among the design systems.

When I translated this into CSS and HTML and JS structure, I got the following structure of folders and files for the POC.

In the actual application, only referring to the namespace and type of entity is good enough to load the right pattern from any design-system part of the open design eco-system.

You can download and play around the code of the sample above from github:

https://github.com/OpenDesignSystem/ODS-CDN

Note: this is a prototype of the concept and is not optimal for any production usage. Ther are a lot scope to improve the implementation. For example usage of @import in CSS in real time may not be practical, but it might be good idea to write a preprocessor that would build the final CSS and JS from the namespace, like NPM.

Here are some screenshots from actual POC we ran in the workshop:

The following a example of pattern called “label” from a designsystem namespace “com-company1-ds1” . This is made with derivatives from 2 basic primitives i.e. “Shape” and “Text”.

The following a example of pattern called “button” from a designsystem namespace “com-company1-ds1” . This is made with derivatives from same 2 basic primitives i.e. “Shape” and “Text”.

The following a example of pattern called “editable-textbox” from a design-system namespace “com-company1-ds1” . This is made with derivatives from same 2 basic primitives i.e. “Shape” and “Text”.

The following a example of a template (not created a formal template class though ) of a login form from a design-system namespace “com-company1-ds1” . This is made with patterns from same namespace.

Hope you enjoyed this quick and dirty article written in 30 mins. If you get the concept from the article, my goals are met 🙂

Download the sample code to play around from here: https://github.com/OpenDesignSystem/ODS-CDN

View the part 2 of the workshop slides here that is related to this activity:

https://www.linkedin.com/pulse/workshop-deck-part-2-applying-desops-your-enterprise-samir-dash/

You can view the first part of the slides of this work shop here:

https://www.linkedin.com/pulse/workshop-deckapplying-desops-your-enterprise-samir-dash/

You can explore more here:

https://www.linkedin.com/pulse/open-design-system-adding-semantics-part-3-heredity-samir-dash/

‘Semantic Design System : Redefining Design Systems for DesOps’ https://www.slideshare.net/MobileWish/semantic-design-system-redefining-design-systems-for-desops-v10-1sep-2018

Nuclear Design: https://www.linkedin.com/pulse/photo-essay-semantic-design-system-part-2-nuclear-model-samir-dash/

Open Design System Ontology: https://www.linkedin.com/pulse/photo-essay-semantic-design-system-part-3-open-ontology-samir-dash/?

(c) Samir Dash, 2018. All rights reserved. This content including the images are licensed under a Creative Commons Attribution 4.0 International license

 

 

 

 

 

 

[Workshop Deck] PART-2: Applying DesOps in Your Enterprise

[This is the SECOND part of the half-day workshop titled “Applying DesOps in Your Enterprise” I conducted at the “UX India Conference 2018” on 4th October, 2018, Bengaluru. This part focused on ‘Design System’ aspect of DesOps, and tried to address the challenges that designer face when they collaborate using around either two or more design systems. Neither of the design system as of today talk to each other in the same way, nor is the fact that that none of the design systems organize and define their patterns in the same structure.

This part of the work shop attempts to solve that issue through introducing the concept of “CDN based Open Design Eco-System” (* CDN – Content Delivery Network) that is modelled on a Nuclear Design Model which can be scaled up and be made semantic, so that the automation of design process can be made possible. In the workshop we also see an implementation or a proof of the concept for the web-design and development domain using HTML, CSS and Javascript. This uses CSS3 variables to implement an extensible framework based on the Nuclear Design Model.

The code can be downloaded from https://github.com/OpenDesignSystem/ODS-CDN .

You can explore more at

http://desops.io and http://opendesignsystem.org/portal/nuclear-design/

Workshop at UX India International Conference 2018 : Applying DesOps in Your Enterprise

]

 

 

You can explore more here:

https://www.linkedin.com/pulse/open-design-system-adding-semantics-part-3-heredity-samir-dash/

‘Semantic Design System : Redefining Design Systems for DesOps’ https://www.slideshare.net/MobileWish/semantic-design-system-redefining-design-systems-for-desops-v10-1sep-2018

Nuclear Design: https://www.linkedin.com/pulse/photo-essay-semantic-design-system-part-2-nuclear-model-samir-dash/

Open Design System Ontology: https://www.linkedin.com/pulse/photo-essay-semantic-design-system-part-3-open-ontology-samir-dash/?

 

 

(c) Samir Dash, 2018. All rights reserved. This content including the images are licensed under a Creative Commons Attribution 4.0 International license

 

 

[Workshop Deck] PART-1: Applying DesOps in Your Enterprise

[This is the first part of the half-day workshop titled “Applying DesOps in Your Enterprise” I conducted at the “UX India Conference 2018” on 4th October, 2018, Bengaluru. This part focused on ‘Process’ aspect of DesOps, and tried to address the challenges of bringing the designers to the same page to that of diversified subject-matter experts (SMEs) during the ideation phase of an Design Thinking workshop, by collaborating on “Petal Process Diagram”(PPD) . PPD is a mind-mapping kind of activity with the focus to involve all the entities involved in and around a touch-point in a feedback-loop, and helps everyone in the room to be on the same page on the potential possibilities, feasibilities involving “props” and “process” components.

You can explore more at http://desops.io/2018/10/03/workshop-at-ux-india-international-conference-2018-applying-desops-in-your-enterprise/ ]

Continue to the next part of the workshop, in the next post.

Meanwhile, you can explore more here:

https://youtu.be/J5Igx25pj5A

(c) Samir Dash, 2018. All rights reserved. This content including the images are licensed under a Creative Commons Attribution 4.0 International license

 

 

Workshop at UX India International Conference 2018 : Applying DesOps in Your Enterprise

 

Applying DesOps in Your Enterprise

3 hrs Workshop | Category: Design Practice & Process | Target Audience: Anyone who is interested in optimizing the processes used in the enterprise or building solutions that focuses on process re-engineering is the most suitable audience for the first part of the workshop.   Any User-Experience pro,  Design Thinker, Service designer, and product-management professional can be benefitted. The second part of the workshop is helpful for the designers and UI developers who use the design system or would like to build a scalable design system for their organization or team. Basic understanding of HTML and CSS is good enough for the 2nd part of the workshop.

 

The workshop will focus on two aspects of DesOps, namely the process and eco-system. The process aspect will be identifying touch points in the enterprise, and try to optimize that with some solution using technology. The ‘eco-system’ part of the workshop will focus on building a sample design system using Nuclear Design Model to make it scalable and extensible.

Three key takeaways:

  1. Basics of DesOps from process and eco-System Angle.
  2. Learn about how to identify touch-points in the process /workflow that can be optimized to bring automation or technological solutions.
  3. Learn about the basics of Nuclear Design Model and applying to build open, scalable and extensible design systems.

Date & Time: 10:AM – 1 PM  on 4 October 2018
Venue:  4, 5 & 6 October 2018, ITC Gardenia, Bangalore

 

Event: UX India International Conference, 2018, A day full of inspiration and learning for user experience designers, UX leaders, visual designers, user researchers, front-end developers, program managers, startup founders and design students. Grab an opportunity to grow and network with UX Design industry experts. It brings engaging industry leaders to present a combination of inspirational talks and personal experiences.

More: https://www.facebook.com/UXindiaBangalore/

UPDATE

Slides :

https://www.slideshare.net/MobileWish/applying-des-ops-in-your-enterprise-04-oct-2018-v10-slides

Sample code of the CDN based Design Eco-System POC using CSS Variables:

https://github.com/OpenDesignSystem/ODS-CDN 

 

Two Parts Articles:

[Workshop Deck] PART-1: Applying DesOps in Your Enterprise
https://www.linkedin.com/pulse/workshop-deckapplying-desops-your-enterprise-samir-dash/?published=t
[Workshop Deck] PART-1: Applying DesOps in Your Enterprise
https://www.linkedin.com/pulse/workshop-deck-part-2-applying-desops-your-enterprise-samir-dash/

 

PHOTOS:

 

 

Semantic Design System (Part -1) : The Gaps in Today’s Design Systems

This originally part of a talk I gave at UX-India Pre-Conference Meetup at Symbiosis College, Bengaluru on 1st September 2018, titled: Semantic Design System — Redefining Design Systems for DesOps . The talk explored the existing implementations of design-systems and will be making an attempt to provide high-level approach to define design systems for the next-gen enterprises.

“Design System” plays a critical role in bringing a common language and consistency in experience across different products and brands of the organisation, along with fuelling a collaborative approach towards design, making it easier for different team members to contribute.

With observation of design systems, we can notice, almost all of them are having different structure and approach to define these, and almost none of them can be directly used in automation of design as they are not semantic in nature. Therefore most of these current approaches to design systems are not future-proof for tomorrow’s design operations (DesOps). Here I coin the “Semantic Design System”, that address this issue, and focuses building a design system, that is equally human-readable and at the same time understood by the machine for the next generation of design operation with automation, machine learning and artificial intelligence. The talk also introduces, what Samir believes as “Nuclear Design”, an modelling approach that helps to lay out a framework that is the foundation for building design systems with semantics.

(Continued to next post. )

(c) Samir Dash, 2018. All rights reserved. This content including the images are licensed under a Creative Commons Attribution 4.0 International license

[Slides] DevConf 2018, Bengaluru : DesOps – Prepare Today for Future of Design (2018)

DesignOps is an approach to design inspired by the culture of DevOps. In this session, we will be touching upon the practical approaches on how to prepare for the next wave in design that compliments DevOps in the concepts of the cultural shift, collaboration, and automation. We will also see how to bringing the full circle of design in the context of software development lifecycle.

Topic: DesignOps – the Prepare Today for Future of Design!
Date & Time: 2:15PM – 2:45PM on 5 August 2018
Venue: Christ University – Bengaluru, India

Event: DevConf.in 2018 is the second free annual community conference sponsored by Red Hat for Developers, System admins, DevOps engineers, Testers, Documentation writers and other contributors to open source technologies. It is a platform for the local FOSS community participants to come together and engage in the knowledge sharing through technical talks, workshops, panel discussions, hackathons and such activities.

More info at: http://desops.io/2018/07/04/talk-at-devconf18-designops-prepare-today-for-future-of-design/

[Slides] In Search of Truth: At the Crossroad of Critical Theory and Technology in DesOps World B.B.Autonomus College, Chandikhol (2018)

 

This is a paper presented by Samir Dash at Department of English, Baba Bhairabananda Autonomous Mahavidyalaya, Jajpur, Odisha (http://bbmchandikhole.org/) on 16 July 2018

This UGC seminar session was an attempt to understand, from a non-traditional lens, the relevance of critical theory in context to today’s ever-changing technology space that is moving towards the Automation, Artificial Intelligence, Machine Learning and Distributed Computing, become much more important in history than ever, as it deals with softer aspects of human identity and socio-cultural dimension through communication or human expression.

This interactive session will have two major focus:

1. A brief overview of the critical theories from a diachronic lens that will be helping the students in grasping the fundamentals in a socio-cultural context.

2. A cross-discipline comparison with the modern design-driven practices in the software industry that would help the students understand the potential and opportunities in the real world scenario where these theories would help.

#DesOps #DevOps #design #designthinking #communication #criticaltheory #literature #englishliterature #englishlanguage

Title: In Search of Truth: At the Crossroad of Critical Theory and Technology in DesOps world
Date: 16 July 2018
Venue: Department of English, Baba Bhairabananda Autonomous Mahavidyalaya, Jajpur, Odisha

More details can be found here:

Download the Paper – “In Search of Truth: At the Crossroad of Critical Theory and Technology in DesOps World”

Introduction to DesOps: Design thinking as a way of life [Source: Open-Org]

A successor to DevOps would place design at the center of value creation. Call it “DesOps.”

In general, though, the tighter integration of design principles into all phases of development processes is becoming more common—something we might call “DesOps.” This mode of thinking, “Design Operations,” is a mindset that some believe might be the successor of the DevOps movement. In this article, I want to explain how open principles intersect with the DesOps movement…

 

Read the complete post here: 

https://opensource.com/open-organization/18/8/introduction-to-desops

Download the Paper – “In Search of Truth: At the Crossroad of Critical Theory and Technology in DesOps World”

It was a great pleasure to be at UGC seminar in Department of English B.B.Autonomous Mahavidyalaya, Chandikhole on the topic ” In search of truth: At the crossroad of critical theory and technology in DesOps world” It was a very engaging session presided by principal Dr. Kedarnath Das, HOD English, Prof. Rajendra Padhi, Senior lecturers Jachindra Rout, Bimal Ch. Mallick, Dilagovinda Pratap, Nabajyoti Biswal. Dr. B.K.Nayak and the students from the department of English, Maths and Science.

Resource person Prof. Samir Dash, Bangalore. Sanjeev Behera, Psychologist, Presided by principal Dr. Kedarnath Das, HOD English, Prof. Rajendra Padhi, Senior lecturers Jachindra Rout, Bimal Ch. Mallick, Dilagovinda Pratap, Nabajyoti Biswal. Dr. B.K.Nayak.Image may contain: one or more people and text

 

Topic: In Search of Truth: At the Crossroad of Critical Theory and Technology in DesOps world
Date: 16 July 2018
Venue: Department of English, Baba Bhairabananda Autonomous Mahavidyalaya, Jajpur, Odisha (http://bbmchandikhole.org/)

 

Read it here: 
https://www.linkedin.com/pulse/search-truth-crossroad-critical-theory-technology-desops-samir-dash/

Downloadable Paper/Slide: 

https://www.slideshare.net/MobileWish/in-search-of-truth-at-the-crossroad-of-critical-theory-and-technology-in-desops-world-16-july-2018-bbautonomus-college-chandikhol

 

Abstract:
This UGC seminar session was an attempt to understand, from a non-traditional lens, the relevance of critical theory in context to today’s ever-changing technology space that is moving towards the Automation, Artificial Intelligence, Machine Learning and Distributed Computing, become much more important in history than ever, as it deals with softer aspects of human identity and socio-cultural dimension through communication or human expression.

This interactive session will have two major focus:

1. A brief overview of the critical theories from a diachronic lens that will be helping the students in grasping the fundamentals in a socio-cultural context.

2. A cross-discipline comparison with the modern design-driven practices in the software industry that would help the students understand the potential and opportunities in the real world scenario where these theories would help.

#DesOps #DevOps #design #designthinking #communication #criticaltheory #literature #englishliterature #englishlanguage

     

 

 

[Paperback ]: The DesOps Enterprise -Re-invent Your Organization  : (Volume 1) The Overview & Culture

Paperback on DesOps 
The DesOps Enterprise -Re-invent Your Organization  : (Volume 1) The Overview & Culture
By Samir Dash
Published on : 5 June 2018
Get the paperback from:  http://a.co/cdPAwPU

In this three-part book series, we will be touching upon the practical approaches on how to prepare for this next-wave in service-design of that compliments DevOps in the concepts of a cultural shift, collaboration and automation. We will also see what are the available solutions today that contribute to bringing the full circle of design in the context of software development lifecycle.

This book series aims to deliver the explorations and insights into the modern approach to design, as a creative process, spanning across the whole gamut of

disciplines like Product Management, Marketing Management, Market & User Research, Interaction Designing, Information Architecture, Quality Assurance, Product/Service Strategy and Delivery etc.Current, the first volume of the series, deals with the fundamental principles and explores the cultural aspect of DesOps. To implement successful Design driven organization, it is important that every member of the enterprise must understand and believe in design (unlike the popular belief of it being a discipline of visual arts) as a creative approach to problem solving to capture delight and in this light be a part of the design operations which encompass from envisioning of the product till delivery of it as a delight to the end-users and customers.

 

5″ x 8″ (12.7 x 20.32 cm) 
Black & White on Cream paper.

Paperback and Kindle eBook version.

ISBN-13: 978-1720635062
ISBN-10: 1720635064