gestalt-ui-organisation

Name: gestalt-ui-organisation
Author: dembrandt

273installs5forks

How to install gestalt-ui-organisation?

dembrandt/dembrandt-skills/gestalt-ui-organisation

$npx -y skills add dembrandt/dembrandt-skills --skill gestalt-ui-organisation

Installs into the current project.

Summary

UI layout and grouping should follow Gestalt principles so users immediately understand which controls, commands, and elements belong together. Use when designing or reviewing component layout, navigation, toolbars, forms, dashboards, or any UI where visual grouping communicates

Files · 1

View on GitHub

SKILL.md

1	# Gestalt UI Organisation
2
3	UI should be organised so that the visual structure communicates relationships — which commands, controls, and elements belong together — without requiring users to read labels or documentation.
4
5	## Core Gestalt Principles for UI Layout
6
7	### 1. Proximity
8	Elements that are close together are perceived as a group.
9
10	- Place related controls (e.g. Bold / Italic / Underline) close together with minimal gap between them
11	- Separate unrelated groups with larger whitespace
12	- Do not use lines or borders as the primary grouping mechanism — proximity alone should convey the relationship
13
14	Example: A toolbar with `[Cut] [Copy] [Paste]` grouped tightly, then a wider gap before `[Undo] [Redo]`, communicates two distinct command groups without any visual divider.
15
16	#### Prefer whitespace over separator lines
17	Default to whitespace, not divider lines, for grouping. Most separators do work that spacing does better — they add noise and a "boxed-in" feel without adding information. Remove the majority and let proximity carry the grouping.
18
19	Caveat: a line takes almost no space, so removing it leaves groups too close. Removing separators usually means adding spacing — budget the whitespace (occasionally a subtle background or heading) rather than just deleting the line and leaving the layout cramped.
20
21	### 2. Similarity
22	Elements that look alike are perceived as related.
23
24	- Use consistent colour, shape, size, and iconography within a functional group
25	- Differentiate groups through visual contrast (shape, fill, size) — not just position
26	- Primary actions and secondary actions should look visually distinct from each other
27
28	Example: Destructive actions (Delete, Remove) use a different colour than constructive actions (Save, Add), signalling different intent groups.
29
30	### 3. Common Region
31	Elements enclosed in a shared region are perceived as a group.
32
33	- Use cards, panels, or background fills to enclose logically related content
34	- Avoid wrapping unrelated elements in the same container
35	- Nested regions should reflect nested logical hierarchy
36
37	A region needs no border — but a borderless one needs air. Enclosure can come from a border/fill or from whitespace alone. When a card has no border or background, generous internal padding and a clear gap to its neighbours are what make it read as one region; without a border doing that job, cut the air and separate cards collapse into one blur. Borderless is fine — cramped-and-borderless is not.
38
39	Example: Form sections grouped in bordered cards signal that fields inside each card form a logical unit.
40
41	### 4. Connectedness
42	Elements connected by lines or visual links are perceived as related.
43
44	- Use connectors, lines, or flow arrows only when a genuine relationship exists
45	- In navigation trees or node-based editors, visible connections should match data relationships exactly
46
47	### 5. Figure / Ground
48	Users distinguish foreground interactive elements from background context.
49
50	- Interactive controls should have sufficient contrast against their background
51	- Disabled or contextual information should visually recede (lower contrast, smaller weight)
52	- Modals and overlays must clearly separate from the underlying content layer
53
54	### 6. Continuity
55	The eye follows smooth paths and lines.
56
57	- Align related controls along a consistent axis (left edge, baseline, or centre line)
58	- Avoid breaking alignment within a logical group
59	- Grid-aligned layouts reinforce groupings through shared axis continuity
60
61	## Review Checklist
62
63	When reviewing a UI layout for Gestalt compliance:
64
65	- [ ] Can a new user identify which controls belong together without reading labels?
66	- [ ] Is proximity used as the primary grouping s

People who liked this also viewed

6 picks

Type

gestalt-ui-organisation

273installs5forks

View on GitHub

How to install gestalt-ui-organisation?

dembrandt/dembrandt-skills/gestalt-ui-organisation

$npx -y skills add dembrandt/dembrandt-skills --skill gestalt-ui-organisation

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Gestalt UI Organisation
2
3	UI should be organised so that the visual structure communicates relationships — which commands, controls, and elements belong together — without requiring users to read labels or documentation.
4
5	## Core Gestalt Principles for UI Layout
6
7	### 1. Proximity
8	Elements that are close together are perceived as a group.
9
10	- Place related controls (e.g. Bold / Italic / Underline) close together with minimal gap between them
11	- Separate unrelated groups with larger whitespace
12	- Do not use lines or borders as the primary grouping mechanism — proximity alone should convey the relationship
13
14	Example: A toolbar with `[Cut] [Copy] [Paste]` grouped tightly, then a wider gap before `[Undo] [Redo]`, communicates two distinct command groups without any visual divider.
15
16	#### Prefer whitespace over separator lines
17	Default to whitespace, not divider lines, for grouping. Most separators do work that spacing does better — they add noise and a "boxed-in" feel without adding information. Remove the majority and let proximity carry the grouping.
18
19	Caveat: a line takes almost no space, so removing it leaves groups too close. Removing separators usually means adding spacing — budget the whitespace (occasionally a subtle background or heading) rather than just deleting the line and leaving the layout cramped.
20
21	### 2. Similarity
22	Elements that look alike are perceived as related.
23
24	- Use consistent colour, shape, size, and iconography within a functional group
25	- Differentiate groups through visual contrast (shape, fill, size) — not just position
26	- Primary actions and secondary actions should look visually distinct from each other
27
28	Example: Destructive actions (Delete, Remove) use a different colour than constructive actions (Save, Add), signalling different intent groups.
29
30	### 3. Common Region
31	Elements enclosed in a shared region are perceived as a group.
32
33	- Use cards, panels, or background fills to enclose logically related content
34	- Avoid wrapping unrelated elements in the same container
35	- Nested regions should reflect nested logical hierarchy
36
37	A region needs no border — but a borderless one needs air. Enclosure can come from a border/fill or from whitespace alone. When a card has no border or background, generous internal padding and a clear gap to its neighbours are what make it read as one region; without a border doing that job, cut the air and separate cards collapse into one blur. Borderless is fine — cramped-and-borderless is not.
38
39	Example: Form sections grouped in bordered cards signal that fields inside each card form a logical unit.
40
41	### 4. Connectedness
42	Elements connected by lines or visual links are perceived as related.
43
44	- Use connectors, lines, or flow arrows only when a genuine relationship exists
45	- In navigation trees or node-based editors, visible connections should match data relationships exactly
46
47	### 5. Figure / Ground
48	Users distinguish foreground interactive elements from background context.
49
50	- Interactive controls should have sufficient contrast against their background
51	- Disabled or contextual information should visually recede (lower contrast, smaller weight)
52	- Modals and overlays must clearly separate from the underlying content layer
53
54	### 6. Continuity
55	The eye follows smooth paths and lines.
56
57	- Align related controls along a consistent axis (left edge, baseline, or centre line)
58	- Avoid breaking alignment within a logical group
59	- Grid-aligned layouts reinforce groupings through shared axis continuity
60
61	## Review Checklist
62
63	When reviewing a UI layout for Gestalt compliance:
64
65	- [ ] Can a new user identify which controls belong together without reading labels?
66	- [ ] Is proximity used as the primary grouping s

People who liked this also viewed

6 picks

Type