Forem

Cover image for All about design systems
Shreyas Pahune
Shreyas Pahune

Posted on

1

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.


Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay