Introduction To Design Systems

Hey Everyone, Hope You Are Doing Well!

I was learning about UI/UX for a Web App, then on my way, I got through a wonderful course on Design Systems With Story Book On Frontend Masters By Emma Bostian. I just wanna thank Emma Bostian for sharing her knowledge On Design Systems. So, Let’s get started and learn about Design Systems.

First, I just wanna start with a high-level overview of what the design system is all about…

Design Systems gives user’s an immersive experience throughout the user’s journey on our products.

• For a Designer, the design system is the design language and UI Kit.
• For a Developer, the design system is the component library or style guide.

Overall, the Design System comprises the design language, UI Kit, Component Library, and Style Guide.

Why Design Systems?

The design system allows companies to define their own brand identity with their own design for the product that gives the different feeling to the user while using the product.

The product can be any Web or Mobile Application company is building.

Like, Material Design it’s Google’s Design Theme. Google’s all products are built on it and you can identify that it’s a Google Product or Material Design Theme.

Design Systems make your product look different and gives an engaging experience to the users of your product.

Accessibility

Your product should be accessible to everyone to achieve the same end result from your product. Your product should even be used by keyboard and important alerts are read by screen readers. It should give relevant information to even visually challenged people who are accessing your product.

Consistency

The same design systems should be applied in all your sub-products or suites of products with similar brand identities.

See Google, it has Material Design in all its products which gives users the same feeling for all their products.

So consistency is a key while using the Desing System in all your products.

Trickle-Down Updates

Trickle-down style updates is another huge benefit of design systems. When a design pattern is updated, developers no longer have to sync cross-squads to implement this change.

So whenever an update pushes to our design system it should automatically reflect all the entire products which are using the same design system with an update to a library.

Responsiveness

Your Design System should be built with responsiveness. Products using the design system are with different screen resolutions and devices.

Mobile devices account for about half of all web traffic, worldwide. Design systems ensure that they are built with responsiveness.

Onboarding

When, upgrading your team or hiring new ones there should be well-documented design systems where newbies can be onboarded quickly and efficiently and it will be a good place for them to get all the information.

The design system should facilitate better cross-team collaboration.

Flexibility

Our design system should be flexible enough to serve different teams and different use cases to establish boundaries within which teams can customize.

Because there can be different components that have different use cases like small, medium, and large-sized buttons or even buttons with icons.

Speed

Once the system has stable release, the designer can use the designs to rapidly prototype designs and the developers can use the component library to rapidly develop those new designs.

When implementing our design system in code, it should be fast enough to propagate to give the immersive experience to the users.

Drawbacks Of Design Systems

Everything has a good and a bad, so our design system also has drawbacks.

Time

Design systems take time to build. It can take even months or years for a robust design system for the stable release and also depends on the productivity of your design team.

Evolution

Nothing is constant and not even the design systems it evolves with the time. It’s not a product that has a deadline for completion. It continuously upgrades with new designs and evolves over time.

Maintenance

We need to maintain our design system and need a proper team structure to maintain our design system because there are different lifecycles of the design systems.

Investment

We need investment and support from the leadership in the organization.

Stakeholders don’t like hearing that a design system requires a large, up-front commitment, but that’s the reality.

We need a dedicated team of designers, engineers, and product managers to ensure the success of the design system.

The number one reason design systems fail is a lack of adoption.

Thanks, Emma Bostian and Frontend Masters for the wonderful course on Design System. Some of the vocabulary and words used from Emma Bostian Slides, thanks to her.

Stay Connected & Stay Tuned, To know more on Web, Cloud, and Machine Learning.

Please check my new blog to stay updated: https://blog.patidarparas13.com/introduction-to-design-systems-in-ui-ux/