# Design Principles Cheatsheet

## Proximity

1. Vertical Spacing
small(8), middle(16), large(24)

2. Horizontal spacing
Grid

## Alignment

1. Text: left

a
abc
acsdsds

2. Form: Colon alignment

`name :Pooja`
`name :red`

3. Number Alignment

Labels is left aligned
Numbers are right aligned with decimal

### Contrast

1. emphasize on frequency
2. remain neutral, in case of equal weightage tasks
3. Static vs dynamic contrast

### Make it Direct

1. If 『readability』 is more important than 『editability』, 『click to edit』 can be used.
2. If the priority is given to 『readability』 and the 『editability』 of operation lines need to be highlighted at the same time, 『text link/icon edit』can be used.
3. Always explain what happened, use visual effects
4. Drag and Drop can only limited in one dimension（upper/down or left/right)

### Change Blindness

Solve most of problems on the same page and avoid a new one, because the page refresh and forwarding can lead to change blindness, in addition to disrupting the user's mental flow.

1. Overlays
Double-confirm overlay: Using the Modal to double confirm should be avoided, while affording an opportunity to undo is preferred.

2. Inlays
eg, table expand row