Design system | Enterprise Software House

Design System

knowledgle in the nutshell

Somehow some products (apps or programs) are easier for us to use than others. Maybe you have noticed that when you are using products of the same line, you feel better with them than using similar ones made by the other publisher/company. Obviously, a lot depends on well-designed UX, but apps made by the same company have a lot in common, so you are able to get them known faster. If you like the layout of one it is highly possible for you to like another one. How is it possible? 

Somehow some products (apps or programs) are easier for us to use than others. Maybe you have noticed that when you are using products of the same line, you feel better with them than using similar ones made by the other publisher/company. Obviously, a lot depends on well-designed UX, but apps made by the same company have a lot in common, so you are able to get them known faster. If you like the layout of one it is highly possible for you to like another one. How is it possible? 

Article Content

  • Introduction – first contact with design system in existing applications
  • What Design System should contain to be efficient?
  • Is Design System necessary for you? A brief description of Ui Kit.
  • How the creation of Design System goes in All For One Poland organization.

Design Systems used in apps are present in your life and have a big impact on you. Have you noticed?

Let’s have a look at the interfaces of Microsoft Word and Outlook.  

The purposes of these programs are different, but you are able to quickly figure them out because of the common layouts, navigation placement, and the bars with bunch of functions unique to each application that use fairly understandable pictograms. You are able to perform basic and most important actions on the first entry and discover the more complex capabilities of these tools over time.  

Microsoft programs have been with us for more than 3 decades, so they have become essential work tools for many people, as probably everyone with access to computer on windows system has been familiar with them. You will find similar ones, such as: Google Documents or Sheets, which look and work in comparable way, yet use their own schemes and solutions. 

In other words, this is how Design System-based applications work: 

  • Their appearance is consistent 
  • They are based on the same basic components. You will learn them by using at least one product 
  • Navigation and basic (common) functionality are in the same places 
  • Distances to individual components are the same 

Key functions, if specified will allow you to perform similar actions We can multiply the examples of such applications, but now you should see the scheme – design system is the key to consistency in your products, so your clients and users of multiple apps from the same line won’t feel confused when using them. That is why this solution has many benefits for the companies. 

What Design System should contain to be efficient?

We can define a Design System as a set of rules, guidelines, styles, good practices and ready-made libraries of components that will not only determine how the user should interact with them, but also on what principles they should be implemented. 

Among the most basic elements of design system are:  

  • colors (tones, shades or gradients),  
  • logos and trustmarks,  
  • graphic elements (icons, illustrations),  
  • typography (font families and how they are used),  
  • determining the size of elements and their relationships (proportions, distances)  
  • navigation, 
  • rules for creating menus, interfaces or forms,  
  • page and screen templates,  
  • grid systems, 

as the only source of truth and basic documentation for products. Their non-negotiable advantages also is setting a clear path of its element’s usage; the ability to provide a ready-made library of components which allows developers to optimally create interfaces and reduce implementation time; making projects immune to unexpected changes due to new employees joining teams.

Design System may change over time, but making changes will not be breakneck. If we accumulate a repository of ready-made components, it will make products or services callable from the library, instead of coding them anew each time. As a result, all the changes that occur in a Design System happen on a larger scale if we have several products coordinated in it. That’s why in Design Systems we pursue solutions and guidance in conflicting or incomprehensible situations.

Design System may change over time, but making changes will not be risky because of its structure.

It focuses on driving the interface in three key elements:

Atoms – basic elements like colors, typography, shapes, etc. These are the smallest, and one of the first and most important guidelines to specify.

Molekules – groups of elements such as inputs, headers, selectors, forms, toasts, datepickers, etc. That is, components that are part of the interfaces with which users will interact.

Organisms – templates built from molecules, e.g.: application views or web pages, etc.

If we make changes to the Design System, they will occur in a “hierarchical" way, so atoms will affect molecules, and molecules will affect organisms.

Do you need a Design System?

In general, it sounds like a great solution, but it is not always necessary to implement it. If you need to work on a larger scale, on a long-term basis, want to standardize multiple products, build in different technological environments, or reconcile the work of designers and developers – design system may be necessary. Investing in it will pay you back in the long run.

However, if your goal is to do internal projects – prototypes, based mainly on design, on a small scale, in short-term projects – it is possible that using Ui Kit will be optimal and less expensive for you.

You’ve probably heard the term a few times before, but what basically is a Ui Kit? In short, a Ui kit focuses exclusively on developed interfaces in part or in whole. It should include templates for pages, views or individual variants of components, e.g.: buttons, inputs, tiles.

With it, designers can quickly create different window designs, since they are based on a fixed set of solutions, but the development of new options will require additional creative activities. Also, implementation will require more work from developers, as all elements must be hand-coded by them. In other words, Ui Kit is condensed relative to the size of Design System. You can develop it exclusively to meet the needs of your niche.

How to create a consistent Design System?

How do we do it at All For One Poland?

Creating a design system is quite a labor-intensive process, which we break down into several stages.

We want to create a library of styles consistent with the brand, but also with current trends, from the very beginning. We use our experience to develop universal solutions. We also validate our assumptions to see if they will pass the test in different fields. We combine the work of Designers and Developers, who work together to create a library that makes it possible, to some extent, to automate the work and exclude the constant implementation of the same components in separate places.

Stage 1: Designing and creating specifications

First, we focus on defining the Atoms. For this we use the brand book or other materials provided to us in the requirements.

We make decisions that will include color scheme, typography and iconography, as well as shapes and character. What does it look like? Using the client’s color scheme, we create a broader color palette enriched with gradations of the main colors. We can determine which ways of building the color scheme in the interface we will use, for example: the 60-30-10 method using neutral colors and one accent color (the company’s color), or tonal building using a range we create. We also remember the necessary colors related to the messages. When it comes to typography, we need to establish licensing terms, as often a license purchased for so-called Desktop will be insufficient in the context of applications and websites. If the cost is high, we can use alternatives, or free libraries of typefaces of good quality. The downside may be their widespread use of other products, making them “dated" and lacking originality. Once we have selected fonts, we proceed to create a hierarchy of titles and texts. We take care of proper naming for programming purposes and order. The same will happen with other atoms that will be used in our interfaces.

The next step in stage one will be the creation of Molecules, which will consist of the various components and elements used in the interfaces sorted by their purpose. We will design all the elements that users will interact with and are necessary for performing actions, collecting and organizing information, adding new elements, validating them and receiving messages.

Elements that will be designed also may have different sizes or should look a little different on different types of screens (responsiveness), which we take into account.

In addition, for the enrichment of the Design System we determine the possible variants of the components, acceptable for use – due to the fact that there are many situations, and we are not able to predict all of them at the start, work on the Design System is a continuous process. We do not forget, if necessary, to document the use of given variants in specific situations.

Stage 2: Implementing the solutions

Once the components and all the documentation are completed, the development team implements the designed solutions into a common resource library – the Storybook. This way, during product development, other developers will be able to use already prepared interface elements, which they can import into their product and build views faster from there.

Designers and Developers stay in touch with each other for following consultation, so we have control over everything and verify how the interaction is going. In such a library, we can also specify what technologies the components will be compatible with and determine how they can be modified or verify how they will look with different scenarios. This is a very convenient solution, and everyone can verify the capabilities of the components themselves in advance, and new employees can learn them.

Stage 3: Validation

When all the elements are implemented into the products, we can see if everything is playing as it should, if some elements are not fulfilling their role in a given context and new circumstances need to be included in the Design System, and if everything is implemented according to the guidelines.

If something does not work as it should or is not consistent then we go back and look at the issue and apply corrections.

Thanks to such solutions, we are able to respond in an efficient way to many business requirements and make our products immune to sudden changes that might occur, so in our case the Design System plays its role very well.

 

Author: Joanna Krzysiek UI/UX Designer

Write us Call us Send email






    1. Personal data is processed pursuant to Article 6 (1) (a) of the Regulation of the European Parliament and of the Council (EU) 2016/679 of April 27, 2016 – the General Data Protection Regulation
    2. The data controller is All for One Poland sp. z o.o. with its registered office in Złotniki, ul. Krzemowa 1 62-002 Suchy Las. Contact data of the Data Protection Supervisor: iod@all-for-one.com.
    3. Consent to data processing is voluntary, but necessary for contact. Consent may be withdrawn at any time without prejudice to the lawfulness of the processing carried out on the basis of consent prior to its withdrawal.
    4. The data will be processed for the purposes stated above and until this consent is withdrawn, and access to the data will be granted only to selected persons who are duly authorised to process it.
    5. Any person providing personal data shall have the right of access to and rectification, erasure, restriction of processing, the right to object to the processing and to the transfer of data, the right to restriction of processing and the right to object to the processing, the right to data transfer.
    6. Every person whose data is processed has the right to lodge a complaint with the supervisory authority, which is the President of the Personal Data Protection Office (ul. Stawki 2, 00-193 Warsaw).
    7. Personal data may be made available to other entities from the group that All for One Poland sp. z o.o. is part of – also located outside the European Economic Area, for marketing purposes. All for One Poland ensures that the data provided to these entities is properly secured, and the person whose data is processed has the right to obtain a copy of the data provided and information on the location of the data provision.

    +48 61 827 70 00

    The office is open
    Monday to Friday
    from 8am to 4pm (CET)

    Question about products and services
    esh@all-for-one.com

    This site is registered on wpml.org as a development site. Switch to a production site key to remove this banner.