NNGroup Visual Design Principles: Gestalt Grouping, Visual Hierarchy, Typography, Color, Imagery (19 articles · Five core visual principles / Gestalt proximity-similarity-closure-common region / Visual hierarchy-grid-golden ratio / Typography terminology-pairing-readable typefaces / 60-30-10 color rule / Picture superiority effect-photography-imagery / Aesthetic-usability effect / Glossary)
19 curated core articles from the Nielsen Norman Group visual design principles subset. One core thread breaks "looking good" down into "working well": ① The five overarching visual principles (Scale, with a maximum of 3 size levels; Visual Hierarchy; Balance, covering symmetrical, asymmetrical and radial types; Contrast; Gestalt) form the master framework. ② The four Gestalt grouping principles: Proximity (the strongest grouping cue; split a 12-field form into 3 groups of 4), Similarity (color > shape > size for conveying grouping, with counterexamples of misleading similarity), Closure (the brain fills in missing parts; crop carousels by 40% to imply more content, the illusion of completeness), Common Region (containers/borders/background color > proximity + similarity, the false bottom trap). ③ Implementing visual hierarchy: color contrast (2 primary, 2 secondary, no more than 3 contrast variations), scale (3 levels, no more than 2 large elements), grouping (proximity + common region), the Squint Test; grids (Columns: 12 on desktop, 4 on mobile; Gutters; Margins; 8px grid; column grid/modular grid/hierarchical grid; 1128px 12-column layout with 72px column width and 24px gutter); golden ratio φ≈1.618 (applied to font size/line height/image cropping/two-column layouts). ④ Typography: 30+ entry glossary (baseline/x-height/kerning/leading/ligatures/widows), 6 typeface categories for pairing (serif/sans-serif/slab serif/script/decorative/monospace) plus pairing decorative typefaces with neutral ones, using multiple weights of a single typeface, optimal reading typefaces (352 participants tested 16 typefaces; the fastest was 35% faster than the slowest; reading speed drops 1.5 WPM per year, a 11% decline over 20 years; Garamond was suitable for only 48% of readers; there is no universal best typeface). ⑤ Color (primary/secondary/tertiary colors on the color wheel, 5 harmony schemes, 60-30-10 rule, limit to 3 colors, color meanings are not globally universal). ⑥ Imagery (Picture-Superiority Effect; photos should carry information rather than serve as decoration; 4 types of imagery; lists using color + icons are 37% faster to process than plain text; visual signifiers). ⑦ Aesthetic-usability effect (attractive designs are perceived as easier to use; 1995 Kurosu study of 26 ATMs; it masks minor issues but cannot rescue major flaws, and interferes with usability testing). Intended audience: product managers; terms are explained in industry language, content is decision-oriented (when to use/how to choose/counterexamples), all numeric values are retained.