Design Systems is to provide products with a consistent look, streamline the design and development process, and boost team’s productivity. And more than that, for an organization it gives a developer mobility between teams and products when all the Products in a company runs based on one single design system. A design system is a combination of
- A set of high-level design principles that clearly coalesce the design thinking and provide guidance for the proper use of those assets
- A collection of reusable digital assets (such as components, patterns, templates, icons, typographical hierarchies) that are generically defined enough so they can transcend their specificity within use for a specific application or project
Given that, there are lot of open-sourced Design Systems available to build your application on top of it and one such famous open source system from Shopify is Shopify Polaris (link). They even provide a React Component library to start with. Like the same in VMware, they built and spread the open source Clarity Design System (link) throughout the organization, starting from a grassroots movement that expanded into a fundamental piece of nearly all applications and products. “It has changed the way we build and design products, increased the focus on design through the product development process, and even been adopted by other companies” - says Jeremy Wilken is a software engineer at VMware. Google’s Material Design is also one of the popularly used Design system on mobile space.
The design system to be a documented catalog of components and styles used within a product, including how and why each should be implemented. An enterprise software UX design system is not simply a style guide, as it includes layouts, interactions, and development; however, a product’s style guide would be included as part of the design system. Creating a UX design system can be a lot of work, but it pays off throughout the lifespan of your product. With that emphasize on design system for an organization, I listed few key consideration on building the same.
Essentials in effective enterprise Design System
Understand your broad organization Before even thinking about how an individual component could work within your design system, you need to understand the entire scope of the application. Look at every page, every state, every component — how are things implemented today? What’s consistent today, and what’s not? Your enterprise software UX design system should cover your application in its entirety, even those terrifyingly outdated legacy pages nobody’s touched in years. Understanding how components currently work across the system will allow you to define patterns, where components are considerably similar, and outliers, those components that are necessarily unique from everything else. We typically create a pattern inventory from every component we find throughout the system, including currently inconsistent patterns, from which we start analyzing which should be merged and which should be unique in the new system Build for the system’s users (end user) While the designs within the system should all be focused on your application’s end users, the enterprise software design system itself should be built for the system’s users. Typically this means developers and designers, as well as potentially product and marketing. A beautiful, well-defined system is useless if not properly implemented — and implementation relies on more than just the creators of the design system Design for longevity A good enterprise software design system should provide an effective framework for both current and future needs. As good view on the road map of the company and a foreseen technology changes, and end user advancement should be considered to ensure certain level of longevity of your system
Understanding the terms
STYLE GUIDE
- Purpose: Designing Visual Style of Components
- Mainly documents Colors, Typography, Icons, Logos and Branding Guidelines
- Owned by UX team (in collaboration with business)
PATTERN LIBRARY
- Purpose: Designing Visual and interactive aspects of Components. Enables standardization and minimize code discrepancies
- Along with Style guide, it provides templates, layouts and working components with code snippets
- Owned by UX team along with Dev
DESIGN SYSTEM
- Purpose: Builds a foundation for new Products and targets to provide consistent User experience across the organization
- Along with the capabilities of Pattern library delivers working component library
- Owned by entire organization
Applications Vs Components
A Design System consists of UI components and a clearly defined visual style, released as both code implementations and design artifacts. In the last few years, a consensus has emerged in the world of web development. Indeed, most JavaScript frameworks are largely based on components. Components offer many advantages such as logic re-usability, centralized style and easy testing. As we talk about components in large scale it is also important to understand the Application scope better. The modern design system …
Component Library as Web Components
TODO
Enterprise Success Stories
TODO
Why Stencil
Stencil is a tool chain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser
Conclusion
TODO
- Creating a design system with stencil and react https://dev.to/fvaldes33/creating-a-design-system-with-stencil-and-react-2nmj
- Building design systems for organizations - How to structure individuals and manage https://uxdesign.cc/building-design-systems-and-design-culture-3a7d07ae6b52