The competition for customer attention on the internet is fierce.

BLOG | Design Systems 101: Designer's Guide to Frictionless UI

Design Systems 101: Designer's Guide to Frictionless UI | Speck

<p>Companies like Uber, Airbnb and IBM have changed the ways they design and build their digital product thanks to their unique design system. Using a collection of repeatable components these companies have been able to change the pace of the design process and innovate the user experience.</p>
<p>Let’s dig into the fundamentals of design systems, plan how you can build and implement one in your organization, and explore several examples of organizations that are using design systems to drive success.</p>
<h2>What are Design Systems?</h2>
<p>Design systems are a collection of guidelines and reusable components that provide a single source of reference to designers and developers for building digital products.<br />
They are guided by clear standards and they include more than just UI elements and pattern libraries.</p>
<p>Design system library and documentation provide the system with the main UX and UI elements such as visual assets, typography, grid layout and more. They can also include non-visual elements such as vocabulary.</p>
<p>A big misconception is that design systems equal style guides, which isn’t completely true. Style guide is a static-documentation, while a design system is a pattern library that comprises more than just how elements look.</p>
<p>Style guide-based products have a timespan area where the style guide is valid, but since the style guides are built at a certain point in the project, it becomes outdated as the product itself gets bigger and more complex.</p>
<p>On the other hand, design system-based products are updated as the product grows, meaning that it is continuously expanded to match that product’s means. This approach saves time and money in the long run.</p>


<h2>Design Systems Overview</h2>
<p>The idea of design systems started about 10 years ago with a book <a href="https://bradfrost.com/blog/post/atomic-web-design/">Atomic Design</a> by Brad Frost. Atomic Design is a methodology for providing a direction on building design systems with more intention and definition.<br />
This approach can allow anyone to build a design system that promotes consistency and scalable elements.</p>
<p>In his book, Frost described the system having 5 stages which are: Atoms, Molecules, Organisms and the last step is Pages.The idea with these stages and how he organized and named them was to think of Atomic Design as a mental model that allows the creation of final user interfaces and design systems.<br />
The book covers the idea of establishing a framework that can help UX designers work with repeatable elements and it discusses the qualities of pattern libraries that can help the development workflow.</p>


<p>Next big step in the design systems field was made by Google with their Material Design which was introduced in 2014, making a huge impact on the market at the time.<br />
Along with using early pattern libraries, Atomic Design helped Google create Material Design System.</p>
<h2>Design system benefits</h2>
<p>Building a library of design patterns, rules and UX guidelines prevents and eliminates inconsistencies. This can be particularly helpful because of the large number of devices and browsers that currently exist, and that number is increasing even today.</p>
<p>The team saves time by using already designed components that can be reused, i.e. color schemes, input fields, forms and other visual elements, which makes building products much faster and easier.</p>
<p>Design language speeds up the workflow for developers by keeping the code in sync. It improves the user experience and customer satisfaction because of the standardization. Design systems also increase brand awareness in general through visuals and can do so even with a single visual style for all projects.</p>
<h2>Building a design system</h2>
<p>Before starting work on a design system, you can start by revising your current design or a digital product by going through it or getting the feedback about what is good and what can be changed.</p>
<p>Start by asking the questions like:</p>
<ul>
<li>What are the goals?</li>
<li>What can be done better and why?</li>
<li>How can it be more unified and more functional?</li>
<li>How could the updated or newly created design system help a digital product, a company, the users, a designer or a developer?</li>
</ul>
<p>These are just some of the questions that can give relevant answers and help guide in the right direction.</p>
<p>Building a design system can be divided into 3 main categories:</p>
<ul>
<li>Building blocks</li>
<li>UI design patterns</li>
<li>Rules</li>
</ul>
<h2>Building blocks</h2>
<p>Main building blocks of every design system are colors, typography and typography scale, and grid system.</p>
<h3>Colors</h3>
<p>Colors are one of, if not the main fundamental building block in the design system. They are everywhere and they are included in everything that is being designed. Colors should match with the brand language and identity, and they should represent the brand in a unique and recognizable way.</p>
<p>Something that should also be included into creating a color scheme within the design system is checking the contrast and seeing if it’s compatible and passes the accessibility standards.</p>


<p>AA or AAA accessibility standards are a part of the three levels categorization by WCAG 2.0 (Web Content Accessibility Guidelines). AA is for the middle range and AAA for the highest range of groups and situations.</p>
<p>There a couple of way colors can be categorized:</p>
<p><strong>UI colors</strong> are the core of the interface, for example the color of buttons, inputs, the color of text and so on. It also covers cases like active, hover and similar states.</p>
<p><strong>Semantic colors</strong> are used for states such as success for successful action by the user, error or warning states and other instances that use specific colors that aren’t necessarily part of the brand. Examples are red for error states and danger, green for success, yellow is used for alerts and warnings, and blue indicates information.</p>
<p><strong>Layout colors</strong> are colors used for borders, sidebars, cards and other page layouts.</p>
<h3>Typography</h3>
<p>Typography scales work with one another in a way that provides consistency, hierarchy and contrast because they are predictable.</p>
<p>Scales can be made for:</p>
<ul>
<li><strong>Marketing</strong><br />
These scales are built in a way that they tell a story and invite users to spend more time on the site. They have larger differences in font sizes throughout the scale</li>
<li><strong>Editorial</strong><br />
Editorial scales focus on large amounts of information, meaning that the difference between the font sizes are smaller compared to the Marketing scale</li>
<li><strong>Data</strong><br />
This scale is used for cases like visualising metrics and font sizes where they are much closer to each other because of the large amount of data</li>
</ul>
<p>Because of the different dimensions for different types of devices that exist, designers should consider creating type scales that support desktop, tablet and mobile devices. For example, Heading 1 that is defined for desktop isn’t necessarily appropriate to use on smaller devices like a mobile phone since it wouldn’t match the device – font ratio.</p>


<h3>Grid system</h3>
<p>Grid system is a structure that serves as a framework for designers to organize elements.</p>
<p>There are a number of types of grid systems using column, modular and baseline grid, and each of these grid systems serve a purpose depending on where they are used.</p>
<p>Column grids are used for organizing content in evenly spaced vertical columns. Modular grids take both columns and rows into consideration and are used for strict layouts like books, while the baseline grid system is used to set the leading from one line of text to another – this is mostly used for typography and lettering.</p>
<p>Layouts organize content into single composition and therefore create a structure with clear hierarchy. They can be adaptive, responsive and strict.</p>
<p>8 pt grid system is one of the ways you can define a measurement unit. One of the reasons why going with an 8 pt grid system is good is that it can be divided by 2 and 4. This can be particularly helpful with displays that multiply pixel sizes and half pixels don’t exist on an 8 pt grid.<br />
8 pt grid system also matches with the default browser font size which is 16px. It also helps with the development since 1rem equals 16px.</p>
<p>Correct and thorough sizing and spacing can help avoid page inconsistencies – something that can happen when two or more designers work on the same project.</p>


<h2>UI design patterns</h2>
<p>UI design patterns are reusable solutions to a common design problem within the design system. This pattern can define the color, shape, style of the buttons etc.</p>
<h3>Components</h3>
<p>Components are reusable UI elements designed to be used across many projects with every component meeting a specific interaction need. Designers and developers can use them as building blocks for creating new user experiences, and some examples of components include buttons, input fields, forms, modals etc.</p>
<p>How do you use those components and in what cases; alerts keep users informed of important changes, cards contain content and actions about a single subject, icons help communicate the meaning, status or a feedback.</p>
<h3>Imagery</h3>
<p>Imagery is the visual language within the UI design that can help users relate to the brand and the product, which can be achieved by selecting the images that are informative and share the right message.</p>
<p>When possible, we should respect the aspect ratio of an image for all screen sizes, which means that the image should be scalable to keep it’s relevant content within the visible area. This isn’t always possible because some images are taken in such a way that scaling them would crop or hide the relevant information that the image is trying to communicate.</p>
<h2>Rules</h2>
<p>Rules can be divided into design principles and guidelines.</p>
<h3>Design principles</h3>
<p>First step is defining what are the design principles within the design system based on what the intention is. For creating a good user experience, it’s necessary to understand how they reach the intended user.</p>
<p>Some examples of design principles are being essential, inclusive, consistent, humanistic. It can also include making products that are quick, adaptable, approachable and supportive.</p>
<h2>Guidelines</h2>
<p>Guidelines in general are a set of recommendations on how to apply design principles with the aim of providing a better user experience. Those guidelines are then used to better efficiency and consistency of the product and user need.</p>
<p>The last step in creating a design system is to document their correct usage for both designers and developers.</p>
<h3>Companies</h3>
<p>Companies from different industries use design systems for their products. Some examples include mostly IT, but even the automotive industry like Audi, or the government of a country like the United Kingdom.</p>
<h2>Photon Design System by Firefox</h2>
<p>Photon Design system is a Firefox design language used for building digital products with the idea of ensuring great Firefox experiences across all platforms. The Photon Design website includes all relevant information on how to use the design system from visuals, motion, copywriting and more.</p>


<p>The design system was first introduced in 2017 with Firefox’s Quantum update, and before that designers and developers used a previous version of a style guide called Australis UI. The main goal of the newly created design system was to provide better usability and create a single source of truth for all Firefox users.</p>
<p>Since Firefox provides their products on all platforms (Windows, MacOS, iOS, Android), it was challenging to create a native look &amp; feel across all platforms. Other challenges were that the current style guide was designed only for desktop products and there weren’t many guidelines that focus on accessibility.</p>
<p>Solving these problems included defining a new standard of guidelines, focusing on color contrast ratio to match WCAG 2.0 and creating guidelines that support readability.</p>
<h2>Conclusion</h2>
<p>Modern business landscape has convinced even the most skeptical minded company leaders that design across their brand is critical for winning customers’ attention and loyalty through digital products and services. But even with organizations rushing to scale their design teams, there remains fundamental misunderstandings about Design Systems. Design Systems help to translate design’s unique capabilities across the vast and complex digital landscape, functioning as the practical embodiment of an organization’s design philosophy and creating the foundation for any successful DesignOps practice.</p>


<h3>FURTHER READING</h3>
<ol>
<li><a href="https://www.toptal.com/designers/ui/the-art-of-stealing-how-to-become-a-master-designer" target="_blank" rel="noopener">The Art of Stealing: How to Become a Master Designer</a></li>
<li><a href="https://www.netguru.com/glossary/digital-product-design" target="_blank" rel="noopener">What is Product Design? Complex Guide for 2022</a></li>
</ol>
