Saltar al contenido
AKOS
Todos los packs
StableUXrefactoring-ui

Refactoring UI — Visual Craft for Non-Designers

Operationalizes the Refactoring UI school of practical visual design: hierarchy through weight and color rather than size alone, systematic spacing scales, restrained palettes, and improving interfaces by *removing* visual noise. This is the "make it look designed" pack — it composes with steve-krug (obviousness) and wcag (floors, which win conflicts).

visual-designhierarchyspacingtypographycolorshadows

Principios

  • · RP2 — De-emphasize to emphasize. To make something stand out, quiet its neighbors instead of amplifying it. One accent per surface (LX14).
  • · RP6 — Start with too much whitespace, then remove. Dense-by-default reads cramped; generous-by-default reads designed. Density is then a deliberate choice for data-heavy surfaces.
  • · RP7 — Use a spacing/sizing scale. Geometric-ish progression (e.g. 4, 8, 12, 16, 24, 32, 48, 64…): adjacent steps differ ≥ ~25% so choices are visibly distinct. No arbitrary pixel values.
  • · RP8 — Space groups louder than items. Within-group spacing < between-group spacing, always — spacing *is* the grouping signal (proximity, Krug ER13).
  • · RP9 — You don't have to fill the screen. Constrain content to the width it needs (forms ~ 640px, prose ~ 75ch); columns and centering beat stretching. Shrink the canvas when designing small components.

Patrones

  • · Squint: if nothing dominates → hierarchy failure; if borders dominate → over-separation; if it vibrates → too many saturated colors.
  • · Count font sizes on screen: >4 → collapse to the scale.
  • · Count borders: replace each with whitespace or background shift; keep only survivors that still earn their place.
  • · Grayscale the screen: hierarchy should survive without color; if not, weight/size work is missing.
  • · One accent audit: more than one accent-colored element competing → demote all but one.

Riesgos

  • · Ver anti-patrones específicos del dominio en el pack.

Checklist

  • [ ] Squint test: one dominant element per screen; hierarchy survives grayscale. (RP1, RP2)
  • [ ] Spacing from the scale; within-group < between-group everywhere. (RU1, RU10)
  • [ ] Text colors collapsed to 3 tokens; labels subordinate to data. (RU3, RU12)
  • [ ] One primary action style per screen; button hierarchy tokens only. (RU7)
  • [ ] All token text/bg pairs pass contrast floors. (RU6)
  • [ ] Hover/focus/active/disabled designed for all interactives. (RU14)

Fuentes

En la bibliografía AKOS

Este pack cita las siguientes fuentes registradas en el índice bibliográfico:

Explorar todas las fuentes →