8 Product Design Visual Craft Interview Questions and Answers

Short answer: Visual hierarchy is the deliberate ordering of elements that guides the eye — what to see first, second, third. It maps the user's attention to the importance of the information.

In depth:

I build it with a set of compounding tools, not one big lever:

1. Size and weight — larger, bolder reads as more important; a 32px semibold headline dominates 14px body.
2. Color and contrast — a saturated primary button against muted neutrals pulls focus; low-contrast text recedes.
3. Space and proximity — generous whitespace isolates and elevates an element; tight grouping signals relatedness.
4. Position — top-left (in LTR) and the optical center carry weight; F- and Z-patterns describe natural scan paths.
5. Type scale — a single ramp (12/14/16/20/24/32) keeps the levels distinct.

The test: squint or blur the screen — if the main action is still the most prominent thing, the hierarchy works.

Squint / blur the screen:

█████████████   ← headline (large, bold)   1
░░░░░░░░░░░░░    ← subhead                   2
body-body-body   ← body text                3
            [ BUY ]  ← bright CTA (focus)

⚠️ Common mistake: making everything bold and branded — when everything shouts, nothing is heard.

Short answer: Gestalt principles describe how the brain assembles separate objects into a whole. They let you imply structure without drawing extra borders and dividers.

In depth:

The practical payoff:

1. Less visual noise — leaning on proximity and common region lets me drop borders and dividers.
2. Grouping without lines — placement and alignment themselves say what belongs to what.
3. Most "cluttered" interfaces — are Gestalt failures: uniform spacing everywhere, so the brain can't tell what goes where.

⚠️ Common mistake: uniform spacing everywhere — without a difference between "within a group" and "between groups", Gestalt can't work.

Short answer: I start from function, not taste. For product UI I default to a highly legible neutral sans (Inter, SF Pro, Roboto) — it has to survive small sizes, dense data and many weights.

In depth:

1. Pairing — either one versatile superfamily across the whole product (simplest, most consistent), or a distinctive display face for headings plus a workhorse sans for body, with enough contrast that the pairing looks intentional.
2. What I check — x-height, the weight set (at least regular/medium/semibold), figure style (tabular figures for tables).
3. Scale — a modular ratio of 1.2–1.25 (major third) anchored on a 16px body → 12/14/16/20/24/30/36; no more than 5–7 sizes.
4. Line-height — inversely proportional to size: ~1.5 for body, ~1.2 for large headings; measure 45–75 characters.
5. Semantic roles — body, caption, label, h1–h3 instead of raw px; this later becomes tokens.

/* Type scale: 1.25 step from a 16px base */
--font-caption: 12px;  --line-caption: 1.4;
--font-body:    16px;  --line-body:    1.5;
--font-h3:      20px;  --line-h3:      1.3;
--font-h2:      24px;  --line-h2:      1.25;
--font-h1:      36px;  --line-h1:      1.15;

⚠️ Common mistake: more than 7 sizes and arbitrary px — the system collapses into inconsistency.

Short answer: I split color into roles, not just hues, and build each hue as a tonal ramp (50–900) so there's always an accessible pairing. Accessibility is a hard constraint, not a final polish step.

In depth:

1. Brand/primary — one or two colors carrying identity and the main CTA.
2. Neutrals — a gray ramp (9–12 steps) does the heavy lifting: text, borders, surfaces; neutrals matter more than the brand color.
3. Semantic — success/warning/error/info, each with a background, border and text.
4. State and surface tokens — hover, pressed, disabled, selected.
5. Accessibility — text ≥ WCAG AA 4.5:1, large text and UI components 3:1; never convey meaning by color alone (error = icon + text).
6. Themes — I check light and dark and define semantic tokens (color.text.primary) so the component themes itself.

{
  "color": {
    "brand": { "primary": "#4F46E5" },
    "neutral": { "50": "#F9FAFB", "500": "#6B7280", "900": "#111827" },
    "semantic": {
      "error":   { "bg": "#FEF2F2", "border": "#FCA5A5", "text": "#B91C1C" },
      "success": { "bg": "#F0FDF4", "border": "#86EFAC", "text": "#15803D" }
    },
    "text": { "primary": "{neutral.900}", "muted": "{neutral.500}" }
  }
}

⚠️ Common mistake: six competing brand colors — a restrained neutral ramp plus one confident accent reads as more premium.

Short answer: A grid and a spacing system replace arbitrary pixel decisions with a shared rhythm — that's what makes an interface feel calm and "designed" rather than improvised. An 8-point grid is when all spacing and sizing are multiples of 8 (8, 16, 24, 32…), with a 4px sub-step for fine tuning.

In depth:

1. Why 8 — divides cleanly across common screen densities (1x/2x/3x), limits choices and scales predictably.
2. Layout grid — usually 12 columns on web: 12 splits into halves, thirds, quarters and sixths; rational breakpoints.
3. The value is constraint — when the only choices are 4/8/16/24/32, components align themselves and whitespace becomes intentional.
4. Tokens — I expose the scale as tokens (space-1 = 4, space-2 = 8…) so design and engineering share one language.
5. Hierarchy via proximity — more space between groups than within them (Gestalt's law of proximity).

/* 8-point spacing scale as tokens */
--space-1: 4px;   /* sub-step: icons, fine tuning */
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;  /* between major sections */

⚠️ Common mistake: inconsistent spacing is the single most common tell of an amateur interface; a system fixes it by default.

Short answer: Usability is the floor, aesthetics the ceiling: beauty can't cost a user a failed task. But the "conflict" framing is often false.

In depth:

1. The aesthetic-usability effect (Kurosu & Kashimura) — attractive interfaces are perceived as easier to use and users forgive minor friction; polish has real usability value.
2. Order — function first (legibility, contrast, target size, affordances, a clear flow), then beauty within those constraints.
3. On a real conflict — e.g. an "elegant" light-gray label that fails WCAG — usability wins; I find the solution inside the constraint (change the hue or weight, not the contrast).
4. Data breaks ties — if a "clean" minimal design hides a key action and an A/B test shows conversion drops, the prettier version is simply worse.

Aesthetics vs usability?
        │
        ▼
 Task still solvable? ──no──► USABILITY (floor: contrast, targets, flow)
        │ yes
        ▼
 Make it beautiful WITHIN the constraints (ceiling)
        │
        ▼
 Still disputed? ──► A/B test: numbers beat taste

⚠️ Common mistake: trend-driven aesthetics for the portfolio (mystery-meat icons, ultra-thin type) — great in a screenshot, a failure in real use.

Short answer: Contrast is the perceptible difference between elements — the primary tool for directing attention and ensuring legibility. Color comes to mind first, but several kinds of contrast work together.

In depth:

• Principle — contrast creates focal points: I apply it deliberately to one or two important elements per screen and suppress it elsewhere.
• Balance — too little → everything blends into mush; too much → the screen feels chaotic and tiring.
• Accessibility — I verify it for low vision and varied lighting (bright sun on mobile); I never ship text below the threshold even if "softer" looks better.

⚠️ Common mistake: decorative contrast — high-contrast elements that aren't actually important — fights the real hierarchy.

Short answer: Whitespace (negative space) is the emptiness between and around elements. It isn't "wasted" space but an active design material; using it well is one of the clearest markers of maturity.

In depth:

1. Macro whitespace — large gaps between sections and around the layout: breathing room, a premium feel (Apple's generous margins), lower cognitive load by chunking into regions.
2. Micro whitespace — line-height, tracking, spacing between items and padding inside components: legibility and the feeling of polish; cramped reads as cheap.
3. Functions — sets hierarchy (more space = higher importance), groups and separates via proximity (fewer borders), speeds reading, focuses on the key CTA.
4. Management — through a single spacing scale (8-point) so space is rhythmic, not random.

// Padding and gaps come only from the scale, never "by eye"
type Space = 4 | 8 | 16 | 24 | 32;

interface StackProps {
  gap: Space;        // micro: between items inside a block
  padding: Space;    // a component's inner padding
  sectionGap: Space; // macro: between major sections
}

⚠️ Common mistake: fear of emptiness — wanting to fill every pixel — produces a cluttered, exhausting interface.