--- type: Concept title: Design Craft — the UI/UX practice a design agent applies description: The product-agnostic design knowledge PMOS's design agents reason with when turning a quick brief into a prototype, a design reference, or a design system — perception and cognition evidence plus the craft moves it implies. Principles to reason with, never a style lock. tags: [design, craft, perception, cognition, prototype, accessibility] timestamp: 2026-07-21 --- # Design Craft — the practice a design agent applies **Situating context:** [D60](/okf/products/pmos/adr/d60-prototype-loop.md) makes the design agent, not the PM, the author of prototypes and design systems — from a **quick brief**. That is hollow unless the agent has real practice to apply: an agent told to "apply UI/UX practice" with nothing to apply produces exactly the generic rectangle-grid the PM rejected in the console-redesign series ("obviously AI generated", run 003). This concept promotes the durable, replicated core of [attention-research](/planning/design/attention-research.md) — authored for one initiative, valuable for all — into the bundle, per the rule that timeless craft lives in OKF while operational notes stay in /planning/. **These are principles to reason with, never a style lock**: a checklist that forces one look would reproduce the very monotony this exists to prevent. ## How to use this (design agent) Retrieve this concept before any prototype, design reference, or design-system authoring. Reason from the principles to the *specific* product and brief — never apply them as a template. The test of good use is that two different briefs produce two visibly different designs, each defensible from these principles under [grilling](/okf/products/pmos/adr/d60-prototype-loop.md). ## The evidence core (perception & cognition) Replicated classics; citations in [attention-research](/planning/design/attention-research.md). 1. **Working memory holds ~4 chunks** (Miller 1956; Cowan 2001). Six-plus co-equal clusters on one screen force re-scanning instead of absorption. 2. **Cognitive load is a budget** (Sweller 1988). Layout noise, redundant chrome, and undifferentiated density steal capacity from the judgment the user came to make. 3. **Progressive disclosure outperforms everything-at-once** (Nielsen 2006) on speed *and* error rate. Detail should be *available*, not *ambient*. 4. **Attention is serial after the first glance** (eyetracking F/Z patterns; serial-position, Murdock 1962). A screen needs ONE focal entry point and a deliberate last word — not a uniform grid where every cell competes. 5. **Pre-attentive vision is fast and specific** (Treisman & Gelade 1980; Cleveland & McGill 1984). Hue, size, curvature, position and motion are read in <200 ms; position along a common scale beats box-vs-box comparison. Encode status in hue/size/position, not in N identical bordered boxes. 6. **Grouping does not need boxes** (Gestalt; Palmer 1992; Tufte's data-ink). Whitespace, alignment and type contrast carry structure at near-zero ink; enclosure is the *heaviest* grouping device, so spend it only where load-bearing. 7. **Humans prefer curves** (Bar & Neta 2006). Sharp-cornered uniformity reads mechanical — "template output" — regardless of palette. 8. **Dual coding** (Paivio 1971). A number paired with a spatial encoding (position, sparkline) is absorbed and recalled better than the number alone. 9. **Aesthetic-usability effect** (Kurosu & Kashimura 1995). Polish is not decoration; it changes tolerance, trust, and measured usability. ## The craft moves (what the evidence implies) - **Visual hierarchy & focal structure.** One focal opening per surface; secondary material subordinated by size, weight, and position — not just placed elsewhere. End deliberately (the last thing shown is remembered). - **Chunking & density.** ≤4 co-equal chunks above the fold. Density is fine — *undifferentiated* density is not; differentiate by hierarchy, not by removal. - **Progressive disclosure.** Secondary sections collapse to honest one-line summaries; things that need attention may open themselves. Disclosure must never hide alarms. - **Typographic & spatial rhythm.** A deliberate type scale and a consistent spacing unit; vary rhythm to mark importance, keep it steady to mark sameness. - **Contour & geometry variation.** De-rectangle: boxes only where enclosure is load-bearing; group by whitespace and alignment; mix radii/organic forms deliberately. A wall of same-radius rectangles is the recorded failure. - **Motion with restraint.** Motion is pre-attentive — spend it only on what is genuinely live or needs attention; ambient motion is load. - **Task-fit — organise around the user's job, not the data model.** The layout mirrors the domain workflow and leads with "what needs me." Perception science applied generically *loses* task-fit — that was the run-004 rejection: a beautiful surface that hid the work the user actually manages. - **Real words are part of the design** ([D60](/okf/products/pmos/adr/d60-prototype-loop.md): copy rides the prototype). Draft real headlines and microcopy; lorem defers the judgment the prototype exists to enable. ## Accessibility floors (non-negotiable, in every fidelity) Floors, not aspirations — they bind prototypes too, because a direction validated below the floor is a direction that will fail later: **WCAG contrast (4.5:1 body, 3:1 large text)** · **touch/click targets ≥ 44px** · **`prefers-reduced-motion` respected wherever motion is used** · **never encode meaning in hue alone** (pair with position, shape, or label — also how RAG status stays legible to color-blind users) · **keyboard reachability for anything interactive** in leg-B references. ## Anti-patterns (each one recorded, not hypothetical) From the [console-redesign series](/planning/evals/eval-calibration.md): **the rectangle wall** (same box, same radius, everywhere — run 003) · **cosmetics over unchanged structure** (a new skin on the same IA does not clear "surprise me" — run 002) · **generic perception-science minimalism that loses the job** (run 004) · **safe, scoreable sameness** (optimising for a rubric instead of for the user — the reason leg A is grilled, never scored). ## Related - [design-loop](/okf/core/concepts/design-loop.md) — the workflow this craft is applied inside. - [d60-prototype-loop](/okf/products/pmos/adr/d60-prototype-loop.md) — why the agent designs and the PM briefs. - [attention-research](/planning/design/attention-research.md) — the evidence base with full citations (operational note, stays in /planning/).