UI DESIGN
PRINCIPLES:
GESTALT
COMP 126: Practical Web Design & Development for Everyone
THE LAW OF PRÄGNANZ, OR SIMPLICITY
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9108226/Screen_Shot_2021-11-14_at_1.03.10_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9111167/Screen_Shot_2021-11-15_at_12.40.12_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9111168/Screen_Shot_2021-11-15_at_12.40.20_PM.png)
we perceive simpler forms before complex ones
CLOSURE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9108402/Screen_Shot_2021-11-14_at_2.49.39_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9108403/Screen_Shot_2021-11-14_at_2.20.12_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9108261/Screen_Shot_2021-11-14_at_1.07.36_PM.png)
we fill in the blanks
SYMMETRY
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9108269/Screen_Shot_2021-11-14_at_1.21.39_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9111210/Screen_Shot_2021-11-15_at_12.49.25_PM.png)
we enjoy order and are intrigued by disorder (if it's orderly)
FIGURE/GROUND
we instinctively separate a figure from its background
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9108286/Screen_Shot_2021-11-14_at_1.24.37_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9111774/Screen_Shot_2021-11-15_at_3.56.50_PM.png)
UNIFORM CONNECTEDNESS
we respond strongly to overt visual connections
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9113724/Screen_Shot_2021-11-16_at_8.29.14_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9113785/Screen_Shot_2021-11-16_at_8.48.29_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9113787/Screen_Shot_2021-11-16_at_8.48.39_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9113795/Screen_Shot_2021-11-16_at_8.51.25_AM.png)
COMMON REGION
we perceive things in containers as related
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9113817/Screen_Shot_2021-11-16_at_8.57.55_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9114067/Screen_Shot_2021-11-16_at_10.23.30_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9114079/Screen_Shot_2021-11-16_at_10.25.29_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9114080/Screen_Shot_2021-11-16_at_10.25.57_AM.png)
PROXIMITY
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9114083/Screen_Shot_2021-11-16_at_10.19.23_AM.png)
we perceive things that are close together as related
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9114318/Screen_Shot_2021-11-16_at_10.19.47_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9108308/Screen_Shot_2021-11-14_at_1.41.48_PM.png)
CONTINUATION
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9111715/Screen_Shot_2021-11-15_at_3.17.49_PM.png)
we find, follow, and extend paths
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9108302/Screen_Shot_2021-11-14_at_1.36.56_PM.png)
COMMON FATE
we perceive items moving in the same direction as related
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9114355/Screen_Shot_2021-11-16_at_11.56.14_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9114405/Screen_Shot_2021-11-16_at_12.00.56_PM.png)
PARALLELISM
we experience parallel lines as related
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9114408/Screen_Shot_2021-11-16_at_12.14.58_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9114413/Screen_Shot_2021-11-16_at_12.16.11_PM.png)
SIMILARITY
we pick up on and associate similar elements
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9114422/Screen_Shot_2021-11-16_at_12.17.46_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9114426/Screen_Shot_2021-11-16_at_12.19.29_PM.png)
FOCUS
POINTS
we're drawn to contrast
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9114432/Screen_Shot_2021-11-16_at_12.23.14_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9114438/Screen_Shot_2021-11-16_at_12.25.17_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/581429/images/9094031/Design-principles.png)
126-UI-Gestalt
By tkjn
126-UI-Gestalt
- 521