1---
2title: Simplify Complex Visuals into Clear Forms
3impact: MEDIUM
4tags: ux, pragnanz, simplicity, clarity
5---
6 
7## Simplify Complex Visuals into Clear Forms
8 
9People interpret complex visuals as the simplest form possible. Reduce visual noise to aid comprehension.
10 
11**Incorrect (visually noisy layout):**
12 
13```css
14.card {
15  border: 2px dashed red;
16  background: linear-gradient(45deg, #f0f, #0ff);
17  box-shadow: 5px 5px 0 black, 10px 10px 0 gray;
18  outline: 3px dotted blue;
19}
20```
21 
22**Correct (clear, simple form):**
23 
24```css
25.card {
26  background: var(--gray-2);
27  border: 1px solid var(--gray-a4);
28  border-radius: 12px;
29  box-shadow: var(--shadow-1);
30}
31```
32 
33Reference: [Law of Prägnanz](https://lawsofux.com/law-of-pragnanz/)
34