Source from repo

User Interface Wiki

Living wiki of UI design patterns and best practices built with Fumadocs, Next.js, and Base UI components.

raphaelsalajaGitHub raphaelsalajaSource repo Original GitHub link Publisher page

Files

157

Skill

n/a

Size

184.3 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

rules/ux-aesthetic-usability.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown33 linesFree

rules/ux-aesthetic-usability.md

1---
2title: Visual Polish Increases Perceived Usability
3impact: MEDIUM
4tags: ux, aesthetic, usability, polish
5---
6 
7## Visual Polish Increases Perceived Usability
8 
9Users perceive aesthetically pleasing design as more usable. Small visual details compound into trust.
10 
11**Incorrect (unstyled, raw elements):**
12 
13```css
14.card {
15  border: 1px solid black;
16  padding: 10px;
17}
18```
19 
20**Correct (considered visual treatment):**
21 
22```css
23.card {
24  padding: 16px;
25  background: var(--gray-2);
26  border: 1px solid var(--gray-a4);
27  border-radius: 12px;
28  box-shadow: var(--shadow-1);
29}
30```
31 
32Reference: [Aesthetic-Usability Effect](https://lawsofux.com/aesthetic-usability-effect/)
33

Preparing the source view

User Interface Wiki

rules/ux-aesthetic-usability.md