Design Systems
Design Systems make creating products easier by providing guidelines and frameworks for designers and developers to reference.
Design Systems make creating products easier by providing guidelines and frameworks for designers and developers to reference.
NDA - Finance - Client
NDA - Transportation - Client
UI Design
Development
Testing & UX
Working efficiently in a team throughout design files and working effectively with developers, all starts with design systems. Design systems make realizing a product easier. Today's design software makes using a design system easy by enabling one to create components and define color & typography styles. These can be deployed through the file. Master components and styles allow one to make mass changes. If a header changes or a color needs to be different, these changes can ripple through one's file.
A "Design System" is a robust guide and inventory of components, styles, colors, grids, navigation schemes, accessibility standards, and when to use them.
Design systems become really handy when they match the developers framework. Using a design system that matches a dev framework make it easier for everyone to know where and when to use a component. For example, if a developer was building with Kendo UI for JQuery, they might use this date picker. To make developing the software easier for the developers, a designer should create similar components within their design library. These components may be styled differently than the framework (The roundness of the border or the border color,) but the two components should function the same.
The below image is a page within a design system which outlines the use of typography.
A "Pattern Library" is an inventory of the components of a Design System built within a design software.
The below pattern library is of a design system created in Adobe XD. This pattern library contains common colors, styles, and components.
The below image is a pattern library of a design system created in Axure.
