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://medium.freecodecamp.org/design-language-system-why-your-team-needs-one-and-how-to-built-it-d996ba8c3889">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*JDmC3BMYakA9mGohUoR-dA@2x.png" alt="1*JDmC3BMYakA9mGohUoR-dA@2x.png"></div>
</div>
<div>
<h3>Design Language System</h3>
<p>While in development, <strong>product, design, and engineering</strong> teams use a variety of project management methods. As projects and teams grow, management becomes increasingly difficult. Let’s examine how design language systems make life easier in such situations.</p>
<p>Presently, many companies with significant market shares are exclusively growing by producing software. For others, software is an essential part of their revenue. Moreover, big firms (Atlassian, Dropbox, Linkedin, etc.) increased their design teams by an average of 65% in last 12 months. (<a href="https://www.slideshare.net/johnmaeda/design-in-tech-report-2017">design in tech 2017</a>)</p>
</div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*HHq5pgAlXYVpb9t88B_9jw.png" alt="1*HHq5pgAlXYVpb9t88B_9jw.png"></div>
<p>Six major tech companies have doubled their design hiring goals in the last half-decade. (<a href="https://techcrunch.com/2017/05/31/here-are-some-reasons-behind-techs-design-shortage/">TechCrunch</a>)</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<blockquote><p>Consistency is one of the essential topics of user experience. Maintaining consistency in the big project is often a problem in itself.</p></blockquote>
<p>While the scope of a project begins to grow, productivity and speed might encounter some problems that adversely affect it. Some of those include:</p>
<ul>
<li>Poor communication between product, design and engineering teams.</li>
<li>Differences between design outputs.</li>
<li>Lack of cohesion and structure in code leading to product performance issues.</li>
</ul>
<p>Generally, engineering teams have specific methods for measuring productivity and standards. For example, Agile, code review, code coverage, unit/integration test, etc.</p>
<p>Design works differently. The management methods are more abstract, and there’s not much control or restriction on the development process. <strong>Pattern library </strong>or <strong>style guide</strong> are used to define some standards.</p>
</div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*ymbsZSC6i9azGqlx_yCjVw@2x.png" alt="1*ymbsZSC6i9azGqlx_yCjVw@2x.png"></div>
</div>
<div>
<p>Thus, every new designer and every new part of the project increases chaos in the process and slows down velocity.</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*a3ByDUi175sw0RmLcN1fDw.png" alt="1*a3ByDUi175sw0RmLcN1fDw.png"></div>
<p>Yet, the engineering teams code in the direction of the design coming from the design team. This will repeat itself and will present to the user as animation, component, interaction with various features.</p>
<p>On the user side:</p>
<ul>
<li><strong>Bad user experience</strong><br />Inconsistency in the product will affect the sense of confidence and familiarity in the product.</li>
<li><strong>Performance</strong><br />As mentioned prior, repetitive pieces of code that cause structure and performance problems.</li>
</ul>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<h4>Design language system</h4>
<p>The design language is a collection of reusable functional elements (button, form, header, etc.). The more descriptive parts are icon, color, typography, animation, etc,. These elements of the interface are defined under certain standards. It can also be described as a form of expression of the product itself.</p>
<p>Design creates harmony on all platforms when a good design language system is used. Maintaining strict design standards can help to raise <strong>confidence</strong> and <strong>familiarity</strong> with users.</p>
<h3>Fundamentals</h3>
<p>We can assume that the design language is a real language. It can’t build suddenly; it develops step by step with the brand over time.</p>
<p>In the development process, it is necessary to see inconsistent parts. Then develop retrospective regulations or newly-applied elements. These must be consistent with the current structure. By following some basic principles and practical ways, teams can be confident that the system has evolved continuously.</p>
<h3>Terminology</h3>
<p>Various concepts are used by teams to create their preferred design standards.</p>
<ul>
<li><strong>Functional pattern, Component: </strong>Reusable tangible elements. Buttons, form fields, navigation, etc.</li>
<li><strong>Perceptual pattern, Styles:</strong> This is more abstract than the functional pattern. It will emotionally enhance message perception. Color, typography, animation, etc.</li>
<li><strong>Pattern library:</strong> Documentation of functional and perceptual patterns.</li>
<li><strong>Style guide: </strong>Documentation of standards for using pattern library. This includes logo usage and space adjustments. It also includes examples of best practices, and information about the development process.</li>
</ul>
<h3>Shared language</h3>
</div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*d__FYTJUcr0pKBLTyunM8w@2x.png" alt="1*d__FYTJUcr0pKBLTyunM8w@2x.png"></div>
</div>
<div>
<p>Design language needs to be understood by all teams involved so that the project can progress holistically in a consistent way. Another way to look at this is to think of those who speak the same language. It is much easier to communicate what is needed to a person that uses the same language, than one who doesn’t.</p>
<p>The design language will answer the following questions. These are frequently asked by the design and engineering teams during the project:</p>
<ul>
<li><em>What shade of blue are we using?</em></li>
<li><em>Can you redline this for me?</em></li>
<li><em>Where’s our logo?</em></li>
<li><em>Was this pattern used somewhere else?</em></li>
<li><em>Can you rebuild this, it doesn’t match the design?</em></li>
<li><em>What’s the latest documentation?</em></li>
<li><em>How do we build this pattern?</em></li>
<li><em>Where’re our components?</em></li>
</ul>
<p>For a great design language system to succeed, a holistic style guide must be used. This guide includes product, design and engineering components and guidelines must be used. The following criteria must be observed for this:</p>
<ul>
<li><strong>Efficiency</strong><br />Component, color, and, element definitions must be easy to understand. This can be done by naming with <a href="https://www.viget.com/articles/visual-loudness">visual loudness</a> or metaphors.</li>
<li><strong>Best practices</strong><br />The best practices for the use of tools should be determined by code samples.</li>
<li><strong>Brand feel<br /></strong> The feeling that the brand wants to reflect on the user side. This could be lively and energetic, playful and friendly, decisive and certain, balanced and stable, calm and soft, etc,. This should be done accordingly with animations and color uses that will make things a little easier.</li>
<li><strong>Color &amp; Iconography &amp; Typography<br /></strong>It is important to use color, typography, and icons to support the message to given visually. Designing icons suitable for brand sense will strengthen the meaning of the message.</li>
<li><strong>Pattern Library<br /></strong>A pattern library is a collection of <a href="https://boagworld.com/design/user-interface-design/">user interface design</a> elements.</li>
<li><strong>Animation<br /></strong>One of the fundamental topics of delivering the brand feel to the user.</li>
<li><strong>Accessibility for stakeholders<br /></strong>The style guide must be accessible to everyone. If possible, it can be displayed in an easily visible place for everyone in the office environment. This can help them to see the missing parts and reinforce the familiarity with team members.</li>
<li><strong>Accessibility for user</strong><br />Once the <a href="https://webaim.org/resources/contrastchecker/">color</a> and component definition are in place, creating them according to <a href="https://www.w3.org/WAI/"><strong>a11y</strong></a> standards, which allows you to reach a wider audience.</li>
<li><strong>Guide </strong><br />How the team will contribute the processes must be explicitly stated.</li>
</ul>
<h3>How to start?</h3>
<p>Everything sounds good until now, but if you do not plan your processes, in a short while you may have to deal with solving a complicated task.</p>
<p>While creating your design language system, it is beneficial to act according to <strong>your team culture</strong>. You must set criteria that everyone is ready and willing to follow.</p>
<h4>Rules (Strict — Loose)</h4>
</div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*VDe_jl6aRDBG7k7hdnUMHw@2x.png" alt="1*VDe_jl6aRDBG7k7hdnUMHw@2x.png"></div>
</div>
<div>
<p><strong>Strict rules:</strong> There are precise rules and processes in place that are rigorously followed.</p>
<p><strong>Loose rules:</strong> Brand feel and the utility of the page take priority over perfect visual consistency.</p>
<p>For instance from Airbnb;</p>
<ul>
<li>Standardized specifications.</li>
<li>The design is fully synchronized with the engineering team.</li>
<li>Strict process for introducing new patterns.</li>
<li>Comprehensive, detailed documentation.</li>
</ul>
<p>From TED;</p>
<ul>
<li>Simple sketch over detailed specs.</li>
<li>Simple documentation.</li>
<li>Managing downsides and choosing a direction.</li>
</ul>
<h4>Organization (Centralized — Distributed)</h4>
</div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*HayEXR4LQPEWdMEZedj7iw@2x.png" alt="1*HayEXR4LQPEWdMEZedj7iw@2x.png"></div>
</div>
<div>
<p><strong>Centralized model: </strong>Rules and patterns are managed primarily by one group of people.</p>
<p><strong>Distributed model:</strong> Where everyone who uses the system is also responsible for maintaining and evolving it.</p>
<h4>Parts (Modular — Integrated)</h4>
</div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*FICdJStKUhtFf_ALE4-yQw@2x.png" alt="1*FICdJStKUhtFf_ALE4-yQw@2x.png"></div>
</div>
<div>
<p>A modular structure offers the possibility to work with entire engineering teams. Thus it could quickly produce products suitable for all platforms. If you are creating conceptual designs from a message sense, the integration method will be more useful.</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<blockquote><p>Styles come and go good design is a language, not a style — Massimo Vignelli</p></blockquote>
<h3>Conclusion</h3>
<p>The design language system provides a standard for brand communication between teams. It also allows you to specify and make available the feelings or messages you want to give to the user.</p>
<p><em>Thanks to </em><a href="https://medium.com/@turgaymutlay"><em>Turgay Mutlay</em></a><em> for illustrations 😉</em></p>
<h4>Resources</h4>
<p><a href="https://en.wikipedia.org/wiki/Design_language">Design Language</a> — Wikipedia<br /><a href="https://hbswk.hbs.edu/item/how-to-monetize-happiness">How to Monetize Happiness</a> — Harvard Business School<br /><a href="https://www.viget.com/articles/visual-loudness/">Using Visual Loudness for Better Wayfinding</a> — Tom Osborne<br /><a href="https://24ways.org/2016/animation-in-design-systems/">Animation in Design Systems</a> — Sarah Drasner<a href="https://alistapart.com/article/integrating-animation-into-a-design-system"><br />Integrating Animation into a Design System</a> — Alla Kholmatova<br /><a href="https://airbnb.design/building-a-visual-language/">Building a Visual Language</a> — Airbnb<br /><a href="https://webaim.org/resources/contrastchecker/">Contrast Checker</a> — Webaim.org<br /><a href="https://www.w3.org/WAI/">w3.org</a> — Web accessibility initiative<br /><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Accessibility Developer Tools</a> — Chrome extension by Google</p>
</div>
</div>
</div>
<div><a href="https://medium.freecodecamp.org/design-language-system-why-your-team-needs-one-and-how-to-built-it-d996ba8c3889">https://medium.freecodecamp.org/design-language-system-why-your-team-needs-one-and-how-to-built-it-d996ba8c3889</a></div>


Design Language System: Why your team needs one and how to build it

Design Language System: Why your team needs one and how to build it

Design Language System

Top Stories