A decision handbook for the visual "atomic layer" of Apple design. Covers color (system semantic colors · wide color gamut · Liquid Glass palettes) / typography (SF · NY · Dynamic Type · minimum font sizes per platform) / layout (grouping · hierarchy · safe areas · progressive disclosure) / spatial layout (visionOS field of view · depth · scale) / materials (Liquid Glass vs standard materials · thin/thick selection) / motion (purposefulness · optionality · visionOS motion sickness prevention) / dark mode (not a simple inversion · 4.5:1/7:1 contrast ratios) / images (@1x/2x/3x · format selection) / app icons (layering · cross-platform shape · Icon Composer) / interface icons (optical centering · vector) / SF Symbols (4 rendering modes · 9 weights · variants · animation · customization) / branding (yielding to content). Each entry includes best practices, counterexamples, and platform differences.
A distillation of the core principles and foundational dimensions of Google Material 3 (M3), synthesized from Will’s Notion design notes (123 .md files across 12 categories). It covers: ① The soul of M3 — Dynamic Color (extract source color from wallpaper/content → algorithmically generate 5 key colors → tonal palette 0–100 → 26 semantic Color Roles, achieving four goals: personalization, automatic dark mode, user-controllable contrast) and the underlying HCT color model (Hue/Chroma/Tone, closer to human vision than HSL); ② Color role system (Primary/Secondary/Tertiary/Error/Surface + Container + On + Variant naming convention, 3 contrast levels Standard/Medium/High corresponding to 3:1 and 7:1); ③ Type Scale (15 styles across 5 major categories Display/Headline/Title/Body/Label, Major Second 1.125 ratio, variable fonts with 4 axes: weight, grade, width, optical size); ④ Shape (7 corner radius levels None→Full plus rounded/cut corner families); ⑤ Tonal Elevation (levels 0–5 dp; M3 uses tonal differences and overlays instead of shadows); ⑥ Layout (Window Size Classes Compact <600 / Medium 600–840 / Expanded 840–1200 / Large / XL, information density, 48dp touch targets); ⑦ Adaptive (3 strategies: hide/show, float, reflow); ⑧ Motion (easing emphasized/standard × duration 200–500ms); ⑨ Interaction state layers (hover +8% / focus +10% / press +10% / drag +16% opacity overlay); ⑩ Accessibility (WCAG contrast 3:1/4.5:1) and ⑪ Content design (20 English UI copy rules). Value for PMs: use it as a checklist when reviewing design drafts (is contrast sufficient, are touch targets large enough, are color roles used correctly, is copy sentence-case), understand why “design tokens” and “semantic colors” reduce collaboration costs, and which parts of M3 are hard constraints to copy directly (accessibility/touch target sizes) versus stylistic choices that can be deviated from (dynamic color/corner radius/font sizes). Division of labor with [[nngroup-visual-design-systems]]: that article is a general overview of “what a design system is” (Design System vs Style Guide, adopt/adapt/build your own), while this article explains the internal principles and numeric rules of the specific Material 3 design system. Audience = product managers; jargon is explained in industry terms, with a Why for each section.
Google UX Certificate Course 5 (Visual Design / Mockups / Design Systems) + Responsive Websites. 4 visual elements (typography/color/iconography/lines, size, shape, images) + color (60-30-10 rule + color psychology + WCAG contrast 4.5:1 + accessibility for color blindness/low contrast/photosensitivity) + typographic hierarchy/legibility + icons (action vs supplementary + text labels + branding) + layout (grids/containers/white space) + visual principles (emphasis/hierarchy/scale & proportion/unity & variety + Gestalt) + Mockups (static high-fidelity) + design systems (4 components + 4 levels of UI patterns + 5 benefits + Sticker Sheets + Figma components/instances + Material/Polaris/Apple HIG/Fluent/USWDS) + responsive design (pros and cons of native apps vs responsive web + hamburger menus/cards/carousels/CTAs) + design ethics (attention economy/dark patterns/marginalized groups). Targeted at PMs
Starting from reference images and user tasks, use AI to assist in generating UIs, extracting design rules, and filling in interactive states and microcopy; includes prompts and check paths, suitable for collaboration between product managers and designers.
19 curated articles from Nielsen Norman Group’s “Visual Design” topic, covering the design systems and icons subset. Six clusters: ① Design systems and style guides (Design System = parent, containing Component Library / Pattern Library / Style Guide; Style Guide = child, divided into content, brand, and frontend types; three implementation approaches with three-way tradeoffs among cost, customization, and brand consistency: adopt / adapt / create; examples include NASA 1976, Material, Carbon, USWDS). ② Icons and signifiers (Icon usability = Recognition, whether users recognize the shape, + Interpretation, whether users understand the meaning; 4 quality criteria: Findability / Recognition / Information Scent / Attractiveness; isolated vs. contextual testing matrix; Accordion signifier experiment with 11 prototypes and 5 variants → Caret dropdown indicator performs best, right arrow ≈ no icon; floppy disk = save 83%, circular arrow = sync/refresh 73%, down arrow + container = download 78%; Sparkles icon AI overuse · none of 107 people associated it with AI · 16.82% misread it as bookmark/favorites). ③ Visual style evolution (Skeuomorphism as learning aid vs. visual trend → Flat → Neumorphism low-contrast pain point; Glassmorphism since 2020 with transparency + background blur + outlined gradients · Apple SwiftUI / Microsoft Fluent Acrylic / Vision Pro · WCAG contrast risk). ④ Clickable element identification (Beyond Blue Links 5 types of cues · Interaction Cost) + Banner Blindness (selective attention · proximity poisoning · hot potato effect · pseudo-advertising · persistent since 1997). ⑤ Animation and motion (6 uses: feedback / state transitions / spatial metaphor navigation / signifiers / attracting attention / attention hijacking dark pattern; restraint principle). ⑥ Visual testing (Attitudinal vs. Behavioral; 5-second test / first click / preference test / open and closed word selection; Microsoft Desirability Toolkit 118 word cards 2002 controlled vocabulary · trimmed to under 25 words · Venn diagram grouping; Mood Board 4–5 keywords → visual collage). Also includes brief summaries and attribution for 3 research/team method misfit articles (affinity diagramming / UX mapping visuals / groupthink / NPS shortcomings). Audience = product managers; in-line terminology explanations, decision-oriented (when to use / how to choose / counterexamples), all numbers retained.
The complete curated notes for Adam Wathan & Steve Schoger's *Refactoring UI* (50+ actionable, copy-ready tips). Core stance: Good-looking UI does not rely on artistic talent, but on a set of concrete rules you can memorize — replace "going by feel" with "checking a checklist". Eight main chapters: ① Starting mindset (start from function not layout · lead with black, white and gray · limit options · define systems in advance, turn every detail you agonize over repeatedly into a rule). ② Visual Hierarchy (make important elements pop: rely not just on font size, but on 3 tiers of font weight + color; de-emphasize secondary content instead of emphasizing it; avoid labels whenever possible; classify buttons into 3 levels: primary/secondary/tertiary, dangerous actions do not need to be big and red; visual hierarchy ≠ HTML document hierarchy). ③ Whitespace and spacing (start with too much whitespace then trim back · spacing/size scales need at least a 25% difference · inter-group spacing > intra-group spacing to prevent ambiguity · grids are overrated, fixed widths are often better · do not scale proportionally · you do not need to fill the screen). ④ Color (use HSL not hex · a complete palette needs 8–10 shades of gray + 1–2 primary colors each with 9 steps + semantic auxiliary colors · predefine color steps 100–900 · grays can carry warm or cool undertones · increase saturation when lightening or darkening · shift hue when lightening to avoid washed-out gray · meet WCAG 4.5:1/3:1 contrast ratios and reverse light/dark direction to avoid oversaturation · do not rely on color alone, pair with icons/arrows). ⑤ Typography (hand-pick a type scale instead of using a formula · line length 45–75 characters · line height moves inversely with width and font size · align to baselines, do not center · left-align long text · links do not all need color · add letter spacing for all caps · use px/rem not em). ⑥ Depth (light comes from above → raised elements are bright on top with shadow below / recessed elements have shadow on top · use two layers of shadows: large soft + small sharp · 5 shadow tiers represent elevation · even flat design can create depth with light/dark contrast, solid-color shadows, and overlapping elements). ⑦ Images (use good photos, do not settle · add overlays/glows to background images to guarantee text contrast · do not enlarge small icons, do not shrink screenshots · use fixed display frames + cover for user-uploaded images). ⑧ Finishing touches (use borders sparingly, replace them with shadows/background colors/spacing · a colored top border instantly elevates polish · refine backgrounds · pay attention to empty states · break out of component conventions). Plus 3 before/after practical teardowns (content page / complex form / data dashboard). Audience: PMs building prototypes; jargon is explained inline, every tip includes Why + do/don't, all numeric values are preserved.
