Our Process
A Design System, like a brand book, is a collection of guidelines and standard elements (components) for designing and developing a digital product.
It addresses questions and concerns of all those involved in a production of a digital product.
A Design System is used by UX Designers/UI Designers, graphic designers, product owners, product managers, business analysts, programmers, and content writers.
The importance of a Design System
The use of a Design System becomes advisable when two products are marked with the name of the same brand (e.g., a website and an app).
It is simply essential in the case of large organizations that own and develop a dozen or more digital products.
Its absence will severely influence the competitiveness of new products (the time and cost of their production may even be several times higher).
What is a Design System?
Regardless of the form of presentation, (e.g., on a dedicated website) Design System is a collection of:
- descriptions of good practices
- guidelines
- rules
- instructions
- definitions
- recommendations
- methods of implementation
- ready-made libraries.
Among the most elementary components of a Design System are rules regarding:
- color scheme (tones, shades, gradients)
- logotypes, trust marks
- graphic elements (e.g., icons)
- navigation
- rules for creating menus, interfaces, forms
- website templates, subpages, screens (also in the programming sense)
- grid systems
- typography (font families and how they are used in different types of text and in different contexts)
- size of elements and their relation (e.g., proportion, distance).
By organizing information, a Design System becomes a document that functions as a Single Source of Truth (SSOT).
This is of great importance because it excludes any arbitrariness or personal preferences.
It makes a project immune to changes resulting from introducing a new employee to the team, or mutual misunderstanding of goals and needs of specialists working on a project.
Application of Design System
Various components of a Design System can be used in different contexts and in different configurations.
Advanced, most detailed Design Systems, also take into account combinations of individual elements that are allowed, acceptable and unacceptable.
In this sense, a Design System is different from a simple Style Guide or Pattern Library.
A Design System is created for both internal company needs (e.g., development, optimization, or product integration) and external needs.
Customer benefits
It provides customers and users with the knowledge to quickly, without problems, recognize a brand.
It fits into their expectations and habits. Furthermore, it activates knowledge about ways of using acquired while consuming other brand products.
Visual (branding of a product and brand), functional (e.g., way of working) consistency of a product family also increases user satisfaction.
The well-known design principles applies here – we like best those things that we already know. It is no wonder.
Familiar products are predictable and perceived as safe. Moreover, the positive emotional reactions triggered in the past by another brand's product make the new product receive a lot of trust and sympathy from the start.
A Design System supports such attitudes and provides a clear suggestion for a brain. And our brains are very fond of pleasantly associated repetitions.
Internal benefits for an organization
For companies, it means major savings in time, work, and money. The clarity provided by an implemented Design System reduces uncertainty and the need to constantly inform about changes as well as confirm and consult them.
A team works within a common reference point, a common set of rules, applicable to all specialists.
In the case of product development by external organizations, a Design System also prevents unwanted changes.
The most important advantages of a Design System include:
- psychological effects – sense of order, control, predictability, meaning, and purpose
- ability to test and continuously optimize
- lower development costs
- reduction of optimization costs and implementation of new products
- chaos control – simpler, more effective project management
- visual and functional consistency
- savings of time and work
- increase in productivity
- improved communication by using the same definitions and patterns
- positive user experience
- development through optimization (iteration), instead of revolution (working from scratch on each element)
- scalability of elements
- faster implementation of new employees
- consistent, stable, recognizable brand identity (common style provided by a style guide), is what will distinguish it on the market
- repeated use of individual elements
- common perspective, shared knowledge resource among stakeholders.
A Design System is a tool that should be developed and optimized in parallel to changes occurring in products, user needs, and in a brand itself.
An iterative method of development is both less costly and much more flexible.
A Design System created by such a method can be adapted to changing market conditions and user needs much faster.
Creating Design Systems
The creation of a comprehensive Design System requires a great deal of meticulousness On the other hand, it is impossible to avoid systematic updating.
Work on a Design System should begin by preparing a list of all components that are the most common and the most frequently repeated.
At this stage, you should also review them, check consistency, describe the rules, and identify acceptable exceptions to them.
Pursuing comprehensiveness and continuously revising it is the primary method of working on a Design System.
Equally important are issues of nomenclature, clarity, and unambiguity of used terms. Therefore, it is very important to provide definitions in every questionable case.
It is also worth paying close attention to the relations that occur between the various elements (for example, between the typographic scale and the interface).
A Design System should operate on the logic of cause and effect. Advantages and disadvantages of given uses and connections. Any graphic elements that play an informational, instructional role (icons) should be tested before adding them to a library.
The legibility of their role and the information and instructions they convey should be the same regardless of the context of their use.
For example, the same icon used on a website and in a mobile app may have different legibility levels.
Remember, and don't forget!
The creation of a Design System is a typical “work in progress”. Hence, it is not possible to create its final version.
Within a certain period of time, a near-complete version may emerge, but still capable of modification. Therefore, each Design System must be regularly and cyclically updated.