top of page
Screen Shot 2023-12-12 at 5.10.36 PM.png

SUXD Design

is a design system and assets library. In this project, I built and wrote documents for 14 interactive UI components in light and dark modes.

Objectives

This Design System was built for a fast growing SaaS product at Sensetime.

Why did we need to create a design system?

User-side

Consistency

A cohesive and recognizable design across various interfaces gives users a seamless experience.

Tech-side

Efficiency

Reusable components can streamline the design and development process, saving time and resources.

Business-side

Scalability

A design system provides guidelines to expand teams without sacrificing a unified user experience. 

My Approach

Using "Input" as an example, I am going to walk through how I created design guidelines for a component.

Variants

Input has four variants: general input, version input, number input, and password input. The general input is suitable for entering all text content, while the other Input fields are applicable to special scenarios where the input content needs to adhere to specific formatting restrictions.

Group 14715.png

States

Input has three basic states: default, activate, and inputed. Each basic state undergoes style changes based on cursor hover, input presence, and content validation. General Input and Input-number also encompass two special states: disabled and read-only.

Group 14716.png

Anatomy

An Input is composed of a placeholder, cursor, input content, and a container. Depending on different scenarios, there may also be additional elements such as character count and separator.

Group 11532.png

Sizes

For general forms, use the standard size for regular Input. In non-full-page scenarios such as pop-ups, utilize smaller-sized Input. The width and height of the Input are determined by the parent container and the expected input character count. For single-line Input, a default height is applied.

Group 14717.png

Style

The style of Input includes rounded corners and focus when activated.

Group 14718.png

Variants, States, Anatomy, Sizes and Style are five universal specifications for all components. 

Some components have their particular specs. For example, Input has Overflow, Validation and Alignment.

Overflow

Based on different scenarios and layouts, there are two ways to handle Input when content overflows.

Group 14719.png

Validation

Based on the validated content, there are two verification methods for input fields, with different triggers and errors.

Group 14720.png

Alignment

Generally, Input is accompanied by labels and help text, and alignment can vary based on the layout.

Group 14721.png

This approach was applied to building and writing guidelines for other 13 components, in both light and dark modes. 

Hero.jpg
Screen Shot 2023-12-15 at 5.17.25 PM.png
Screen Shot 2023-12-15 at 5.15.17 PM.png

Ensure Consistency, Boost Efficiency & Scale

bottom of page