Logo

dev-resources.site

for different kinds of informations.

All about design systems

Published at
10/23/2024
Categories
webdev
design
designsystem
ui
Author
shreyazz
Categories
4 categories in total
webdev
open
design
open
designsystem
open
ui
open
Author
8 person written this
shreyazz
open
All about design systems

What is a good design

Good design makes complex product / technology accessible and usable for a huge set of users. It helps to reduce the cognitive load of finding new features or using existing features in a product, hence making the user more productive.

An essential KPI for a product has to be it’s retention and the ability of it to streamline the tasks for the user and make the user feel more organized, which essentially is a objective of a good design.

Design is all about problem solving. Identification of the pain point of the user, researching, and iterative testing is what makes a product highly usable.

Why design systems exists

So as the name suggests design system is a comprehensive set of principles, guidelines and framework , to create a consistent and cohesive design.

A design system standardizes the UI components and visual style across teams to eliminate the inconsistency between the design, and eventually the final product.

Design system aids collaboration across various teams, such as design, development, marketing and product by creating a unified framework which is understandable to everyone.

It fosters the alignment between the design and development team, by offering a well documented framework and structure ensuring that what gets built is matching with the designer’s idea.

Establishing core design principles

Though sounds very superficial, but establishing the core design principles in the design system is utmost necessary, eventually the core will give you the ‘why’ behind the design. It clarifies the brand identity and the product’s vision.

Whether creating new components or adding functionality to the existing ones, teams can fall back upon the core to make sure that the product remains on the right track and adheres to the correct vision.

Image description

Creating a unified visual language

After laying down the core principles, designers have a deliberate choice to make, which is going to shape how a new user experiences and interprets the brand.

Choosing typography, colors and other important design elements is the essence of the product. Some of the key design elements are

  • Typography
    • Fonts are chosen based on how easy and appealing are they going to look on almost all sizes of screen.
    • From a development point of view, web friendly fonts are chosen to ensure the performance and the load times are minimal.
  • Colors
    • Aesthetics and identity of the brand are the factors of colors decisions.
    • The primary, secondary and neutral colors are chosen and then used in elements like buttons, toggles, headers etc..
  • Spacing
    • Another aspect which is overlooked is spacing as it plays the crucial role of defining the gap between components hence maintinng a cohesive structure.

Image description

Conclusion

The design system has to be organized and accessible. It should include the basics from ‘why’ which is the core principle to the very detailed component design which is the unified visual language. It should also be scalable and collaborative in nature.

Though the design is usually prepared on Figma or other tools like it, products like storybook and GitBook provide an amazing arsenal of tools to document the whole structure.


designsystem Article's
30 articles in total
Favicon
Building Flo Design System automation with Figma as a source
Favicon
Color Theory in UI Design
Favicon
How to start with micro services ?
Favicon
Observer Design Pattern O'zbek tilida
Favicon
The Power of Design Systems: How to Create and Maintain a Consistent Design Language
Favicon
Database Performance Strategies
Favicon
Structuring Your React Applications with "Layout Primitives": Today, let's focus on the unbeatable <Stack /> 🚀
Favicon
Figma Components: Supercharge Your Design System
Favicon
What’s a API REST?
Favicon
Top 10 Books on Design System that i Read last year
Favicon
Top 5 Design Patterns Every Software Engineer Should Know
Favicon
Monday joke
Favicon
Repositories Explained: A Simple Analogy
Favicon
Mixins in typescript
Favicon
Designing a better user interface system
Favicon
Design Systems, Design Tokens and the eternal battle between efficiency and flexibility
Favicon
Using mental models to think about software
Favicon
Top 50 System Design Terminologies You Must Know
Favicon
Your Design System is Not a Solution
Favicon
All about design systems
Favicon
O que ninguém te conta sobre Design Systems
Favicon
Configuring Tailwind as a Design System
Favicon
10 sec for UX Design Principles.
Favicon
What are Design Sytems? Definition and Types
Favicon
Design Systems Explained
Favicon
Building a Robust Design System: Solving the Challenge of Consistent UI Development
Favicon
Tailwindcss is not Bootstrap nor Materialize
Favicon
Why design systems fail
Favicon
Como Implementar um Design System em Projetos Vue.js: Boas Práticas e Benefícios
Favicon
Getting Started with Mitosis: Creating a Cross-Framework Design System

Featured ones: