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/

Infographic: The 3 Dimensions & 3 Characteristics (3Cs) of DesOps

©2018,”The 3 Dimensions & 3 Characteristics (3Cs) of DesOps” by Samir Dash.
Creative Commons Attribution-Share Alike 4.0 International License
Read about 3 Dimensions

[Slides] Ditto – Design Life Cycle Management Concept for DesOps (2016-17)

You can read a related article Translating Value at Different Stages of Design with Minimal Waste here:
http://desops.io/2018/05/12/translating-value-at-different-stages-of-design-with-minimal-waste/Also associated video here :
http://desops.io/2018/05/12/video-ditto-design-life-cycle-management-concept-for-desops-2016-17/

[Video] Ditto – Design Life Cycle Management Concept for DesOps (2016-17)

You can read a related article Translating Value at Different Stages of Design with Minimal Waste  here: http://desops.io/2018/05/12/translating-value-at-different-stages-of-design-with-minimal-waste/

Translating Value at Different Stages of Design with Minimal Waste

In 1967 Ronald Barthe published Elements of Semiology, which stands as a temporal marker of post-structuralism, where he gave rise to the idea of “Meta Language”, which in fact “beyond language” or “Second-order language” which is used to describe, explain or interpret a “First order language”. Each order of language implicitly relies on a metalanguage by which it is explained. And it is obvious that the translations between the first order and the second order never loss-less and the true meaning of the first order language is lost or deteriorates when it is represented in “Second-order language”. Design process involving multiple intersections of information communication and sharing through translation of the value (e.g. vision, idea), loses its original meaning while being translated through different tools into various forms of expressions. Also, the different roles (e.g. Product stakeholder or product manager, information architect, interaction designer, visual designer, prototyper and developer etc. ) contribute to the infinite regression of “meaning” of the value.

That’s why one of the key factors that working with developers in terms of the realization of the design has always been a big pain and non-stop iterations, and this turning in favour of the term Full-stack Designer that shares the same spirits as that of the term Full-stack Developer.

(Download PDF from http://desops.io/2018/05/10/infographic-the-full-stack-roles-in-desops/ )

Typically the phrase “full-stack” (or full-stack developer) refers to someone who is someone comfortable and could single-handedly tackle every layer of software development. Typically DevOps engineers and full-stack developers share the same philosophical traits — they strive for greater agility and flexibility and hint at a trend towards greater generalization in the skillset of technical professionals. In case of the full-stack designer, he grows into a cross-disciplinary professional who can handle across Interaction Design, Visual Design as well as UI Development or prototyping. This helps to reduce the gaps between the outputs from these different and the effort that goes into the translation of concept flowing from one stage to another, where there are many roles assigned to more than one persons are involved (And remember that one of the key principles of DesOps is to remove waste by applying practices like Lean models).

So if we see that one of the major focus of DesOps in this aspect involving the work-culture is to reduce the gaps between the roles and wastage thereby. The translation from one role and discipline to another makes the meaning second-hand interpretation and such process is never loss-less. Something or the other gets lost in translation, as we progress towards the realization of the value or the product.

So by implementing Lean methodologies and by striving towards having minimally sized team members with as diversified expertized to help to minimize the intersections or touch points among disciplines and roles where the translation happens. In short less need to translate the value, the less information gets lost and less is the waste in terms of value, effort, cost and time.

Going “full-stack” is one approach to avoid the waste that happens in the process that Barthe has termed as indefinite regression or Aporia . This is mostly from the roles perspective. The other approach is through process or work practices redesign to reduce the number of intersections where the translation happens. In the context of DesOps, this is significant, as it involves the interactions at various levels between the primary two entities i.e. human (i.e.people or user ) and machine, namely — from human-to-human, human-to-machine, machine-to-human and machine-to-machine.

So one of the key factors involved while implementing the DesOps in the organization is to look for process re-design to “minimize the touch points of interaction” through the principle that advocates to minimize the gaps between the roles.

Sometime back, I was evaluating some of the design systems and tools available to study the pain-points while transitioning the design concept from one tool to another and moving from one role to the other. I got in touch with many of my friends who were designers by profession in different enterprises and were at different levels of comforts with existing design and wireframing toolsets, starting from Adobe Suite to the Sketch based eco-systems. Based on the discussions, the interesting thing that I found was many of the tools being used at different organizations, are selected based on the pricing and what the team is comfortable working with, rather than with a focus to have a seamless workflow. In many cases, the cost played a bigger role and due to licence cost, some had switched from most popular design tools to the cheaper replacements. However, the biggest struggle that was there was never solved i.e. the iterations in the design process remained challenging despite the change in tools. Every change in design aspect that was iterated was facing the overshoot of the effort, time and cost. The transitions of value from one set of tool to the other e.g. the quick wireframe created in Powerpoint during the stakeholder workshops were being translated into Photoshop was actually about relooking at the layout due to the constraint that popped up while working with the specific widgets in a specific resolution that never went well the wireframe concept. In one organization, the team replaced the Powerpoint with Sketch and tried to use that to complete the process, which turned into a nightmare as the sessions ended with the people struggling with the tool.

In search of a tool that can minimize the translations of values, I was toying with an idea of Ditto, a 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.

(Figure : The common pain-points in typical Design-process  )

 

(Figure : Typical Design process based on various touch-points where translation happens )

Ditto is a conceptual vision of a design tool that uses UI pattern Library (which is configurable ) and understands the relationships among the components of the design system configured to create and maintain its own objects that can be rendered on a super simple easy-to-follow and familiar looking interface with drag and drop kind interactions enabling the users of different role to focus on their goal rather than figuring out how to use the tool. Conceptually Ditto was capable of taking any type of inputs and exporting different types of outputs on demand e.g. the wireframes, visual comps and ready to deploy UI coded with HTML/ CSS/JS.

(Figure : The conceptual solution, Ditto is based on a “Single-Source” based process )

(Figure : The conceptual solution, Ditto  is based on a “Seamless Workflow” based process )

 

Watch a video demo that elaborates the concept in context to these use-cases —

The benefit of such a tool would be to reduce the critical – dependency on any particular role in the team in order to carry out with the project. For example, assuming a startup is only having a visionary guy with a developer, he can go into the tool to drag-drop few shapes and objects in a traditional Powerpoint / Keynote kind of interface which he is familiar with and export that as a barebone interactive code/prototype that can be tested. He can continuously test and get feedback, based on which he can tweak the same source and iterate. His developer friend can use the same source to export the code in a click to use in the production. And interestingly if he makes any change, that would be updated back to the same source. Later if a visual designer’s help is taken to customize the look and feel, it would allow updating the same source that’s running in the production where the necessary changes to the code will be managed by Ditto in the background. And despite the fact that the visual designer modified the source, (which affects the internal code) he is doing that in a Photoshop kind of environment familiar to him.

If we look at this “Single Source Based Design Eco-System“, any role can enter and come out with a production-ready code, be it a product owner or CEO of the startup, or an interaction designer, visual designer or a UI developer.

The benefits of such a tool are many:

  • Seamless work-flow for Design – Developer collaboration
  • Saving on license cost as no longer it is required to use multiple design tools
  • Single source makes it maintainable.
  • The omini-change process ensures that any changes happening at any stage of design stage will automatically take effect on other stage deliverables. (i.e. assuming at if UI html code is tweaked, it will also reflect in wireframe and visual design stages without any extra manual work!)
  • Zero learning-curve
  • Single user – Single Tool: makes it easy for any of the roles can login and generate implementation ready UI output.
  • Significantly reduces Cosmetic / UI compliance issues
  • Significantly reduces the time to implementation of the design concepts
  • Boon for Agile projects where the changes are common.

Some of the components of the conceptual design tool Ditto, you might have noticed are already available in some of the design tools. For example, similar in Sketch, you can create a custom pattern library theme and use drag and drop to add them while you are designing. But, its more about customizing themes based on existing ones and exporting shapes specific CSS at the end, which is at a very lower level of maturity from a design system standpoint. Similarly, exporting existing design to HTML feature from Adobe’s Creative Cloud Extract in some sense does not take account into how certain design systems of high maturity can be fit into it so that the output can have functional interactions as a part of business flow for the UI.

But certainly, Bootstrap Studio is much closer to the concept of Ditto. It can be improved around the areas configurations and there is a need to move away from the traditional Application type UI and interaction layer so that it can align to one of the core attributes i.e. to make each user role feel familiar with the interface or rather making it easy to follow. The UI widget based WordPress-page builder tools like Elementor are closer in this regard. While talking about Eco-Systems the tools and technologies, I will write about what are the tool-chains that we can combine for different levels of DesOps implementation looking at the maturity levels of Design Systems in play in the organizations.

Well, the thoughts presented above is a practical example of conceptualizing a value communication using improvements in processes and using technology to applying regression to the touch points where the translation happens, and thereby reducing waste and avoiding loss of meaning of value throughout the design process. We will explore the aspect of communication aspect of human-to-human, that is an important part of DesOps culture. Stay tuned.

(c)2018 , Samir Dash. All rights reserved.

(This article is originally published at on May 12, 2018 at  https://www.linkedin.com/pulse/desops-next-wave-design-part-11-translating-value-different-dash/ )

Infographic: The Ten Practices of DesOps (aka. DesignOps)

 

Download the PDF version here: https://www.slideshare.net/MobileWish/the-ten-practices-of-desops-aka-designops

©2018,”The Ten Commandments of DesOps” by Samir Dash.
Creative Commons Attribution-Share Alike 4.0 International License