large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://uxplanet.org/design-language-system-d438f4aa30e0?source=rss----819cc2aaeee0---4">UX Planet &mdash; Medium</a> | Swetha Suresh <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VaWC3x_8oGhmGNUVpptzOQ.png"></p>
<p>Working in the design industry for the past few years, I have learnt to work with different departments towards the same goal. A complete fully functional product that is easy on the eye and provides a pleasant, if not out of the world, experience. Key to this is following a design language. Read along to find out about Design Language Systems and how you can begin to curate one.</p>
<h3><strong>Building a Design Language System</strong></h3>
<p>When you read ‘Design Language systems’ you might brush it off as something the design team should be thinking about, but that’s not the case and I’ll tell you why. First let’s define it.</p>
<blockquote><p><strong>Design Language System</strong></p></blockquote>
<blockquote><p>It is a set of rules or guidelines that heightens the level of harmony in a digital ecosystem.</p></blockquote>
<p>Now what is a digital ecosystem? It is nothing but interdependent group of enterprises, people or things that share a standardized digital platform for mutually beneficial purposes. To keep this ecosystem in harmony we need to understand the different groups involved, their requirements and expectations to build a wholesome design system that is scalable and efficient at the same time. This interdependent group of enterprises/people/things is where all of you (designers, developers) come in. All you should be doing is:</p>
<ul>
<li>Get everyone ready and on the same page.</li>
<li>Collaborate at healthy intervals to curate a wholesome design language system.</li>
<li>Keep in mind the collective desire to provide good user experience while adding to internal efficiency.</li>
</ul>
<p>The Design Language System is like setting a foundation for you to build on. It’ll make the build time shorter and much more efficient. Let’s start laying the foundation.</p>
<h4>Tools</h4>
<p>Standardize the tools different teams use in different phases of the project. Right from the discovery of the project through the design, development and validation phases. Make sure everyone is aware of the tools other teams use. Tools used for collaboration should be easily accessible and agreed upon by everyone in every team.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/486/0*3Nd5maT4ikP46rBY."></p>
<h4>Folder System</h4>
<p>Create a folder system to organize work. Standardize the naming convention. This will make it easier to find a particular file. Find a formula that works best for all the teams, perfect a naming convention and STICK TO IT.</p>
<h4>Documentation</h4>
<p>Document all these standardizations. Create a one stop shop for every information related to the system followed.</p>
<h4><strong>Style Guide</strong></h4>
<p>Conduct a UI Audit (If working on an already existing platform). This is essentially making an inventory of all the components that make up the digital product. All you have to do is take screenshots of all the elements and components that make up your product and categorize them. The components range from right, from the text to buttons and accordion to tabs.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/867/0*25fIOFvLKO4BY6bE."></p>
<h4><strong>Benefits of an UI Audit are</strong></h4>
<p>Consistency: To provide a consistent and cohesive experience</p>
<p>Documentation: So that there are no surprises while scaling/redesign/rebrand etc.</p>
<p>Retrofitting: To analyze the feasibility of responsive retrofitting.</p>
<p>Convinces your boss about a common interface language: This is important in larger organizations where multiple people work on the same project.</p>
<p>Groundwork for a Design Language System: It breaks down the product to its atomic level thereby helping to set up a style guide or a pattern library.</p>
<h4><strong>Other steps to make the style guide more useful :</strong></h4>
<h4><strong>Tool Box</strong></h4>
<p>Create a tool box of all the tools that are used to design along with plugins used. So, when there is a new member to your team all they need is the toolbox and they are set to maintain consistency.</p>
<h4><strong>Naming Conventions</strong></h4>
<p>Similar to naming folders, find a naming convention that works well for the team. Follow the convention to name layers, component and symbols.</p>
<h4><strong>Grid System</strong></h4>
<p>Set the grid system that works best for the product. It’ll help reduce the design decision time. Have one generic grid system and give yourself the liberty to modify based on requirement of every new product.</p>
<h4><strong>Typography &amp; Text Style</strong></h4>
<p>Fix on the typography and text style for faster visual design.</p>
<h4><strong>Pattern Library</strong></h4>
<p>This is essentially like breaking down a product into re-useable building blocks which can be categorized and grouped. This library will have details of every building block’s interdependencies and the set of rules which will a affect the way each block looks. The patterns will include everything from the text to buttons and accordion to tabs. For all the developers out there, your contribution to the pattern library is highly recommended as it has a monumental effect on the code base.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*hUmv3oTtvtILY-xI."></p>
<p>And like everything else in design, perfecting the design language system will and should be an iterative process. From this understanding its given that a design language system benefits more than just the design team. It greatly benefits the brand, the business and the end users.</p>
<h3>Benefits of a Design Language System</h3>
<p>In the previous part of this post we saw how we can build a Design Language System. Now lets see what benefits it brings along.</p>
<p>We established that Design Language System is a set of rules or guidelines that heightens the level of harmony in a digital ecosystem. Digital ecosystem consists of every interdependent group of enterprises, people or things that share a standardized digital platform for mutually beneficial purposes. Grouping these interdependent groups into three broad categories as Brand, Users and Business, lets see all the benefits that DLS brings to the table.</p>
<h3><strong>Brand</strong></h3>
<h4>Recognizability</h4>
<p>A DLS creates a personality for a digital product. A personality that has its own character and other quirks which gives it its own identity and allows it to be recognized in this over populated world of digital products.</p>
<p>Example: Facebook’s like button is it’s signature interaction. From its launch on Feb 9, 2009 to now, it has become imperative to the brand. Users recognize the ‘like’ button even when used out of context, in a third party site as a web beacon.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/480/0*gZbu_evG1106MzqW."></p>
<h4>Consistency</h4>
<p>Allowing the user to interact with consistent set of interact-able elements helps in defining the perception of the brand. This is always good as compared to a fragmented experience which a non-consistent product would provide. A good design language system understand the nuances of consistency and modifies elements and interactions based on context and does not over do consistency.</p>
<h4>Authenticity</h4>
<p>The claps on Medium to show appreciation for the article. Its unique and has not been done before, as opposed to likes and upvotes in other applications. This makes it authentic to Medium. When such authentic design language is followed consistently throughout a platform it creates recognizability for the brand.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/170/0*V63B8YLIpJAcWOGT."></p>
<h3>Users</h3>
<h4>Ease of Use &amp; Enjoyment</h4>
<p>This is a no brainer. The user’s experience is heightened when he interacts with consistent, easy flowing applications that he is able to recognize and carry out his functions with ease. His experience become pleasurable and enjoyable.</p>
<h3>Business</h3>
<h4>Efficiency and Cost</h4>
<p>Having a design language in place enables a team of designers, developers and every other interdependent group in the digital ecosystem to create, recreate, modify or iterate on a product in a quick and cost efficient manner. The end product will then align holistically with the product ecosystem. This level of efficiency can be credited to DLS.</p>
<p>Example : Karri Saarinen, Design Lead at Airbnb built and maintains Airbnb’s design language system. The goal his team set for the DLS was</p>
<blockquote><p><em>“ to create a more beautiful and accessible design language. We wanted our designs be unified to drive greater efficiency through well-defined, reusable and cross-platform components.”</em></p></blockquote>
<p>Since the DLS was now built, the developers could concentrate on building feature logic than spending their time on view code. This method worked out to be very efficient to the teams in Airbnb.</p>
<h4>Stability and Flexibility</h4>
<p>The DLS acts as a guiding light to every one in the ecosystem. It becomes a conscious effort by everyone in the ecosystem to align future builds with the DLS. This brings in stability. The design language system should be an iterative process, this ensures continued stability. The flexibility that DLS provides proves that it is here to stay as it evolves with time and context.</p>
<blockquote><p><em>A unified design language shouldn’t be just a set of static rules and individual atoms; it should be an evolving ecosystem.</em></p></blockquote>
<blockquote><p><em>&#8211; Karri Saarinen, Head of Design — Airbnb.</em></p></blockquote>
<h4><strong>Innovation</strong></h4>
<p>Once the DLS is implemented in the product or application it brings to light opportunities to make the product’s user experience better which will benefit the business. These opportunities create more ground for innovations.</p>
<p>The benefits of a Design Language Systems are endless and can be used not just in the digital ecosystems. Read the next part to read about an example of the Design Language System.</p>
<h3><strong>A Design Language System Example</strong></h3>
<p>In the first two parts of the #DLS series, we saw how to build a design language system and the benefits it brings along to the brand, users, and the business. In this part let’s see an example of a Design Language System, but before we jump into that, below is a comprehensive DLS checklist:</p>
<ul>
<li>Addressed to the entire digital ecosystem</li>
<li>Tools for everyone in the digital ecosystem</li>
<li>Naming Conventions</li>
<li>Folder System</li>
<li>Documentation</li>
<li>Style Guide with a UI Audit</li>
<li>Pattern Library</li>
<li>Tool Box</li>
<li>Grid System</li>
<li>Typography &amp; Text styles</li>
</ul>
<p>Benefits of a Design Language System as discussed before:</p>
<ul>
<li>Recognizability</li>
<li>Consistency</li>
<li>Authenticity</li>
<li>Ease of use</li>
<li>Cost effective</li>
<li>Improves efficiency</li>
<li>Stability and Flexibility</li>
<li>Innovation</li>
</ul>
<p>Let us now review the Atlassian’s Design System.</p>
<h4>Atlassian’s Design System</h4>
<p>From its very<a href="https://atlassian.design/"> landing page</a>, the system is addressed to every interdependent group in the digital ecosystem. A section for the<a href="https://atlassian.design/guidelines/brand/personality"> brand</a>, for<a href="https://atlassian.design/guidelines/marketing/overview"> marketing</a> and the<a href="https://atlassian.design/guidelines/product/patterns/comments"> products</a> itself, apart from guidelines for other aspects like the logos, colours, illustrations etc.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*xxZ_WQyhs3OZgb8n."></p>
<ul>
<li>The level of documentation that Atlassian’s design system provides with a very efficient holistic thinking covering all the interdependent groups shows inclusivity and throws light on their own culture.</li>
<li>They provide a<a href="https://atlassian.design/guidelines/product/resources/web-product-gui-pack"> web UI kit</a> that is available for download. Attention to detail is commendable.</li>
<li>They have a set of patterns documented and frequently keep updating this list. They make sure this is communicated to the users in a section called<a href="https://atlassian.design/guidelines/product/whats-new"> What’s new?</a> Staying pro-active in iterating the system adds value by staying relevant.</li>
<li>At Atlassian, they follow a<a href="https://atlassian.design/guidelines/product/foundations/grid"> grid system</a> to produce visually harmonious and coherent screens. The grid system is thoroughly documented and available for the public to see.</li>
<li>The<a href="https://atlassian.design/guidelines/product/foundations/typography"> typography</a> for different OS with the font stacks and its usage is documented and also available for download as a Web UI Kit.</li>
<li>The section about brand highlights the benefits that the system brings to its products.</li>
<li>The section for the<a href="https://atlassian.design/guidelines/brand/personality"> brand</a> addresses the personality that Atlassian’s products should reflect and the writing style the texts should follow. This personality gives its products recognizability and authenticity.</li>
</ul>
<p>Other examples of design language systems are :</p>
<ul>
<li><a href="https://polaris.shopify.com/">Polaris — Shopify’s Design System</a></li>
<li><a href="https://www.ibm.com/design/language/">IBM’s Design System</a></li>
<li><a href="https://airbnb.design/building-a-visual-language/">Airbnb’s Design Language System</a></li>
<li><a href="https://fluent.microsoft.com/">Fluent — Microsoft’s Design Language System</a></li>
<li><a href="https://design.trello.com/">Nachos — Trello’s Design Language System</a></li>
<li><a href="https://www.lightningdesignsystem.com/">Lightning Design System — Salesforce</a></li>
<li><a href="https://developer.apple.com/design/">Apple’s Design Language System</a></li>
</ul>
<p><em>Every day, a new Design Language System is built to make brands and businesses better and more efficient. Watch </em><a href="https://www.skcript.com/svr/"><em>this space</em></a><em> to learn about how </em><a href="https://www.skcript.com/"><em>Skcript</em></a><em>’s design team built its very own Design Language System.</em></p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Fb3e808%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Fb3e808%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Fb3e808%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/96d08ab34921bdd17986cb5c0396842f/href">https://medium.com/media/96d08ab34921bdd17986cb5c0396842f/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d438f4aa30e0" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://uxplanet.org/design-language-system-d438f4aa30e0">Design Language System</a> was originally published in <a href="https://uxplanet.org">UX Planet</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Design Language System

Design Language System

Top Stories