Open Design System – Adding Semantics to Design System (Part-2): Roles of Pattern Library in Design Automation

In search of a tool that can minimize the translations of values, in context to UI design space, I was toying with an idea of Dittoa simplified version of the tool that can look familiar to the different roles involved in the process and at the same time it will align with a process that is about having the same source files at any of the stages of the process and can align with any design system with easy configuration mechanism.

This approach of Ditto was mostly about the conversion to application code via using a controlled configurable UI pattern library serving as the base element for a dynamic IDE that would help to reduce the gaps between the roles.

The idea involved a ‘single source’ based process that can work with standard pattern-libraries/design-systems.

Earlier to this, back around 2013-14, I had experimented with conversion of design files (PSD/AI/PDF etc.) to style guide through prototypes like Specstra as an early attempt to bring automation into design process to reduce the manual intervention around drafting style guides.

This was another different kind of approach, similar to which there are many solutions are available including Adobe Extract and Avocado etc.

Sometime back, while conceptualising the BetaStudio that focused on envisioning the automation aspects to include the usability dimensions of application testing as a part of an automated eco-system more aligned to DesOps mindset, I was playing around OpenCV and its ports in JS that can have a different perspective than my earlier approach to define a set of design benchmarks (the 1st circle in the stages defined in below image) to compare against the models/metrics towards the later part of the stages.

But this time I wanted to explore apart from the two above said approaches, there can be any other practical approaches, which can help building a UI design-automation solution component for the flow. For this I came up with a conceptual workflow “Pattern-AI” that involved some image recognition through a live camera and matching that for potential UI patterns by processing the camera input using computer-vision technologies, as shown in the flow below:

Based on this my set up was very simple, good enough for a hello world type validation of the concept, having a webcam output, being processes through a Kinetic based web application running in Chrome, which tried to identify the matching pattern (a simple image, icon and button ) drawn on the paper to that with a predefined pattern array with those object names. Though I never went beyond just matching the name, it was obvious that as I was able to match a pattern, generating a predefined HTML-CSS code was a piece of cake post that.

This experimentation helped me to later see that possible variation on this line can also be a part of the high level vision of bringing design automation especially in UI design space, like a missing puzzle piece.

However, this also made it clear that whatever, the potential approach might be, finally what we need is a “consistent and scalable design system model” that is essential to ensure whatever is getting translated from the different types of source through any of these various approaches, as that is the point where all these information is getting mapped and the meaning of each pattern is formed.

The basic questions that arise from these were…

When the system gets a clue from the input/source design (or hand-drawn wireframe) as a dropdown, can it consistently map it to a target design system or a pattern-library or even a brand-system based widget-library consistently?

Also even assuming that it does able to identify the pattern, for example as a button , how it can select or define the target implementation code a in a consistent manner? In this example case, a button can be defined as a <input type=’button’ /> or <div id=”button”></div>or even <button></button> etc. ?

This was an eye-opener, as it was clear from this that, irrespective of the technology used, and irrespective of the methodology is used to generate the required information for design benchmark, without the essential “common language” among the design-systems in use, the translation of those information/artefacts might not make sense to the systems running the automation. And this is where the whole purpose of DesOps mindset will fail.

This actually hints on a problem statement about the gap that currently our design systems have — i.e. a consistent way to define the patterns (and note this is not just limited to UI focused design-system) that can be scalable, and coming up with some approach to bring “semantics” to the design-systems in focus.

We will dive more into it in next posts. Meanwhile you can explore these links:

Previous post of this series: https://www.linkedin.com/pulse/open-design-system-adding-semantics-part-1-background-samir-dash/

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

#nucleardesign #design #desops #designops #designsystem #opendesignsystem #odso

Open Design System – Adding Semantics to Design System (Part-1): Background

“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).

Take an example of a representation of information in a tabular form. In HTML, the desired table element does the basic thing work. But most of the real-life sites, utilize the responsive frameworks like Bootstrap, and on the course, they mostly use the framework versioned table component. For advance controlled display, some may use extended components based on the framework, e.g. Bootstrap Datagrid. In some cases due to the need for the two-way data binding and similar needs application might be running Angular JS driven grids. Some other might prefer using some niche components like Data Tables. In many cases, there are hybrid of niche components married to specific frameworks, for example, the Data Tables with Bootstrap 4.

This actually shows how diversified is the form and the usage of components or the UI patterns. When such things happen, the amalgamation of associated design systems takes place. The target design system attributes, directions are used to customize and in the process the guidelines based on which the external components, interactions, patterns and style are changed.

The power of design systems should lie in the fact that they can establish a common, publisher neutral platform integrating distributed computing as well as design eco-systems.

One of the barrier to wider adoption of SWS technology is the lack of tools for creating specifications that can help consumption as well as comprehension of the design systems at large by the systems without much direct human intervention.

The one of the major way out for such a future is using RDF or micro-data formats to define the ontologies through formats like OWL, RDFa etc.

The success of the Design Systems lies in their abilities, in becoming a part of the distributed brand as well as design system, where any of the components or aspects can be extensible. Also the sustainability of the designSystems lies in the fact that they need to be migrated to and converge with any other design system. In the future of design operations, its highly possible in the world of CI&CD, the design systems should be able to be translated from one brand system to another effortlessly without the single human-intervention.

So what’s the way to achieve it?

The solution lies in Semantic Design System. Semantic Design System, is the future. Like the Semantic web, the goal of the Design Systems is to translate from one form to the other and ensure the machine readability and comprehensibility drives the structure and how the design system is fleshed out.

This is also, critical for open design systems, as the typical effort behind such systems is to make them available as more common set of patterns that can be adopted, used and extended by any other brand system. But as we diving towards the world of hybrid design systems, where the aesthetic as well as interaction enablement through CSS, JS frameworks are founding pillars, it is essential to provide a commonly used language that can define the basic relationships among different entities of a design system. The way forward is a design system defined in terms of a shared language or an ontology.

An “Open Design System”, as I envision, is the one that addresses this issue, and focuses on building a design system, that is equally human-readable for collaboration and at the same time understood by the machine by being a “Semantic Design System” for the next generation of design operation with automation, machine learning and artificial intelligence. The talk also introduces, what I believe as “Nuclear Design”, a modelling approach (I will expand on this one in coming part of this series ) that helps to lay out a framework that is the foundation for building design systems with semantics.

The semantics of the ontology can be used by the machine learning or AI systems in a similar manner how it currently uses the data modelling using the graph databases. This opens up a door to the future for the design that can support DesOps (aka. DesignOps) in organisations.

The Graph Data Model

The semantic web uses the graph data model to store data, RDF is the format in which it is written.

(Fig. Source: http://www.linkeddatatools.com/introducing-rdf )

In traditional data bases there are some kind of important elements against which the relationship is defined. In traditional data bases there are some kind of important elements against which the relationship is defined. uses graph structures for semantic queries with nodes, edges and properties to represent and store data.

Welcome to Open Design System Ontology (ODSO)!

(Continued to next post. )

Meanwhile, you can explore the following links:

Nuclear Designhttps://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

#nucleardesign #design #desops #designops #designsystem #opendesignsystem #odso

Semantic Design System (Part -3): The Open Design System Ontology

[NOTE: Check the part 1 at : https://www.linkedin.com/pulse/photo-essay-semantic-design-system-part-1-gaps-todays-samir-dash/ and part 2 at https://www.linkedin.com/pulse/photo-essay-semantic-design-system-part-2-nuclear-model-samir-dash/]

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.

(Continued to next post. )

#nucleardesign #design #desops #designops #designsystem #opendesignsystem #odso

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

Semantic Design System (Part -2) : The Nuclear Design Model

[NOTE: Check the part 1 at : https://www.linkedin.com/pulse/photo-essay-semantic-design-system-part-1-gaps-todays-samir-dash/]

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.

(Continued to next post. )

#nucleardesign #design #desops #designops #designsystem

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

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

Talk at UX India Pre-Conference Meetup 2018 : Semantic Design System: Re-defining Design System for DesOps

Topic:  Semantic Design System: Re-defining Design System for DesOps

Summary
The talk will explore the existing implementation of design-systems and will be making an attempt to provide high-level approach to define design systems for the next-gen enterprises.
 
 

Date & Time: 1:15 PM – 6:30 PM on 1 September 2018
Venue:  Symbiosis College, Electronic city, – Bengaluru, India

Event: UX India Pre-Conference Meetup, 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/

Get your free pass  at:  https://www.meraevents.com/event/ux-india-2018-pre-conference-meetup 

UPDATES:

View the Slides: 
https://www.slideshare.net/MobileWish/semantic-design-system-redefining-design-systems-for-desops-v10-1sep-2018


 

 

Read it online as a 3 parts series: 

[Photo Essay] Semantic Design System (Part -1) : The Gaps in Today’s Design Systems
https://www.linkedin.com/pulse/photo-essay-semantic-design-system-part-1-gaps-todays-samir-dash/
[Photo Essay] Semantic Design System (Part -2) : The Nuclear Design Model
https://www.linkedin.com/pulse/photo-essay-semantic-design-system-part-2-nuclear-model-samir-dash/
[Photo Essay] Semantic Design System (Part -3) : The Open Design System
https://www.linkedin.com/pulse/photo-essay-semantic-design-system-part-3-open-ontology-samir-dash/

[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