What Is a Design System and How Can I Use One in My Digital Projects?
Find out how you can use design systems to develop online products
If you work in web development or the creation of digital products–such as apps, websites, portals, or digital services–design systems are a set of principles that will help you develop your project in a comprehensive and efficient way.
Find out what a design system is and how you can start using one right away.
What is a design system?
A design system refers to the processes used to decide which elements will be included in a system during the planning and construction stages of a digital project. These elements include the structure, modules, components, interface type, design, and usability of the website or app you are building.
A design system looks at a digital product as a whole and understands how all of the different elements interact. You can think of it as architecture for a digital product.
For example, if we’re going to develop an instant messaging app, we need to think about connecting all the different elements that make it work, such as its design, interface (front end), and site data (back end). We also need to work out how to connect it to servers, hardware, and software, which it will need to function.
In the simplest of terms, a design system defines the rules of the product, its constraints, and how both the code and interface will be created.
While design systems became a trend just a couple of years ago, they have always existed in some form or another, even before the birth of the digital era. For UX designer Javier "Simon" Cuello (@javiercuello), airport signage systems are a good example: they are coherent and easy to comprehend, can be easily adapted, and are scalable. Javier sees a design system as a way of thinking. Imagine Lego pieces that you can put together to achieve different results, yet the pieces are always connected to each other.
How do you create a design system?
The first step is to understand the objectives of your project in depth. Secondly, what it specifically needs to work, both from a product and user point of view.
The team should create a system that details how all the different components of the product interact. Then, they should define how they will ensure that the whole system works efficiently.
Let's go back to our previous example, the instant messaging app, and see what we would need to consider to create our system:
Functional needs
–Users can add contacts.
–Include icon and sticker functions.
–Users can send files, photos, and videos.
Non-functional needs
–Messages instantly shared between users.
–Messages can’t be deleted and are backed up.
–Servers operate faultlessly.
–The system can be scaled when the product grows (more users, more servers needed, etc.).
When developing your design system, you must specify how to meet all of these needs.
Methods for creating design systems
Experts in creating and developing digital products will use one of the following methods to create their systems:
–Architectural design. All the different parts of the system and how they interact is presented graphically. It focuses on the structure of the whole system.
–Physical design. A flow diagram depicts how each part of the system is connected to another, from the server to the user. It also explains how to solve problems. It tends to look at three stages: interface design, data design, and process design.
–Logical design. This depicts the flow of the entire system, usually using diagrams known as Entity-Relationship models (ER Model). Some of the terms used in this model are:
* Entity: items from the app that exist in the real world. For example, course, teacher, student.
* Relationship: The interdependency of the different entities. For example, the teacher publishes the course, and then the student can take the course.
* Attributes: the details about the different entities within the relationships. For example, student names, course codes.
What sort of professionals use design systems?
Anyone working on the development of a digital service or product will use design systems. For example:
– Systems engineers
– UX experts
– UI experts
– UX researchers
– Web designers
– Information architects
– Information analysts
Some useful examples
Some companies have given us a peek at the architecture of their own design systems to create interfaces and graphic design elements.
These examples will help you build your own system. Visit their websites to get a clearer vision and get inspiration for your own projects.
Polaris, Shopify’s design system.
If you’re interested in learning more about design systems, check out Javier “Simón” Cuello’s course, Introduction to Design Systems with Figma.
English version by @eloise_edgington.
You may also like:
–Design Better Websites Using These Wireframes
–5 Free Classes to Learn UX Design for Beginners
–5 Fantastic Books for Those Starting Out in UX
0 comments