Covers foundational visual design principles and the applied practices for creating consistent, accessible, and scalable visual interfaces and design systems. Core topics include visual hierarchy, balance, contrast, alignment, composition, spacing, grid systems, gestalt principles, and use of white space to guide attention and readability. Typography topics include type scale, font selection and pairing, line length, line height, and responsive typographic systems. Color topics include palette creation, semantic color usage, contrast considerations, and accessible color choices that support readability and state signaling. Cover iconography, imagery treatment, motion and microinteraction considerations, and how these elements support usability and affordances. Emphasize design system practices such as creating reusable components, design tokens, naming conventions, documentation, versioning, governance, and strategies for maintaining visual consistency across screens, states, and product variations. Include accessibility considerations such as color contrast guidelines, legible typography, focus states, and support for assistive technologies. Candidates should be able to explain rationales and trade offs between aesthetics and usability, how visual decisions scale across platforms and responsive breakpoints, how to collaborate with engineers and product teams for handoff, and methods for validating visual decisions through user testing and metrics.
MediumSystem Design
42 practiced
Propose a responsive grid system for a complex data dashboard that contains charts, cards, and tables. Include column counts, gutter rules, breakpoints, and how cards/tables should reflow. Explain strategies for preventing content overflow and maintaining readability.
Sample Answer
**Clarify constraints**Dashboard targets desktop/tablet/phone; typical content: charts (variable height), metric cards (fixed height), tables (horizontal scrollable). Prioritize readability, data density, and developer-friendly CSS grid.**Grid & breakpoints**- 12-column grid ≥ 1200px (desktop)- 8-column grid 900–1199px (tablet landscape)- 4-column grid 600–899px (tablet/phone landscape)- 1-column < 600px (phone)Gutters: 24px desktop, 16px tablet, 12px mobile. Outer padding = gutter.**Layout rules / reflow**- Use CSS Grid with named areas for major sections. Cards span 2–4 cols; charts span 4–8 cols depending on importance.- Desktop: multi-column dashboards (e.g., left nav 2 cols, main canvas 10 cols).- Tablet: collapse secondary sidebars into top toggles; charts stack from 2-column to full-width if span > available cols.- Mobile: all components full-width in logical order (KPIs → charts → tables).**Tables & charts**- Tables: enable horizontal scroll inside a fixed-height container with sticky header; collapse less-important columns into a details row or responsive column priority.- Charts: maintain aspect ratio (use viewBox) and allow height adjustments; make small multiples wrap into rows.**Prevent overflow & keep readability**- Min-width per column (e.g., 160px); use clamp() for font sizes and spacing.- Truncate long strings with tooltip/detail on hover; wrap labels intelligently.- Use max-height with overflow-y: auto for panels; progressive disclosure (expand/collapse) for dense widgets.- Accessibility: 16px base font, sufficient contrast, touch targets ≥44px.**Trade-offs**Higher column counts increase layout flexibility but complexity; prefer 12 cols for consistency and developer familiarity.
HardTechnical
31 practiced
Propose a strategy for web font loading that optimizes perceived performance and minimizes layout shifts (CLS) for a global audience. Discuss font subsets, variable fonts, font-display strategies, fallbacks, and server/CDN considerations, and explain the trade-offs of each choice.
Sample Answer
**Situation & goal**I’d design a font-loading strategy that feels fast worldwide and avoids layout shifts (low CLS) while preserving brand typography.**Approach (high level)**- Prioritize visual stability: ensure text has a reliable fallback system so layout doesn’t jump.- Reduce bytes: use subsets and variable fonts to cut download size and latency.- Use progressive rendering: control rendering via font-display and preloading.**Concrete techniques**- Font subsets: ship a small Latin/basic subset for initial render (hero/UI text). Lazy-load extended scripts (Cyrillic, Arabic, CJK) based on accept-language or geolocation. Trade-off: extra requests and complexity vs. much smaller initial payload.- Variable fonts: prefer a single variable font (weight/italic axes) instead of multiple static files. Trade-off: larger single file sometimes, but fewer requests and flexible styles.- font-display: use font-display: optional for body text to avoid FOIT; use font-display: swap for headings when brand font matters, combined with CSS to minimize reflow (match fallback metrics). Trade-off: swap avoids blank text but can cause visible switch — mitigate with matching metrics.- Fallbacks & metric matching: choose system fallback with similar x-height/weight; use font-family stack and font-face metrics overrides (font-size-adjust or @font-face ascent-override/descent-override) to reduce CLS.- Preload & server hints: preload critical fonts with <link rel="preload" as="font" crossorigin>, but only for truly critical fonts to avoid wasting bandwidth. Use HTTP/2 or HTTP/3 and Brotli compression on the CDN.- CDN & caching: serve fonts from a global CDN with long cache TTLs and CORS headers. Use variant-specific URLs for immutable caching. Use edge logic to serve subsets by geo or negotiate Accept-Language.- Local-first: consider setting up service worker or localStorage cache for fonts to speed repeat visits.**Why these choices**- Subsets + variable fonts optimize bytes and reduce first-byte times globally.- font-display and metric-matching directly reduce CLS by avoiding layout reflow/FOIT.- Preload+CDN reduce latency, but preloading too many fonts harms LCP.**Trade-offs summary**- Smaller subset → faster but may flash incorrect glyphs until full download.- Variable font → fewer files but can be larger for simple use-cases.- font-display: swap/optional avoids FOIT but can show a flash of unbranded text; FOIT preserves brand but hurts perceived speed.- Aggressive preload → improves first render but increases initial bandwidth.**How I’d collaborate**I’d deliver font specs in the design system (fallbacks, weights, roles), share metric-comparison screenshots, and work with devs to implement preloads, CDN rules, and A/B test CLS and perceived speed metrics in key regions.
EasyTechnical
37 practiced
Explain five Gestalt principles most relevant to UI design (proximity, similarity, continuity, closure, figure-ground). For each principle, provide a short UI example that shows how it helps users understand relationships between elements.
Sample Answer
**Brief intro** As a UI designer I rely on Gestalt principles to make interfaces readable and scannable. Below are five core principles with practical UI examples showing how they reveal relationships.**Proximity** Related items placed close together are perceived as a group. Example: Form labels and inputs tightly spaced; unrelated help text is separated by extra margin so users know which field it belongs to.**Similarity** Elements that look alike are seen as related. Example: All primary CTAs use the same color and rounded shape, so users identify them as main actions across screens.**Continuity** The eye follows aligned lines or curves, creating a flow. Example: A stepper with connected horizontal lines guides users smoothly through a multi-step checkout.**Closure** Users mentally fill gaps to perceive a whole. Example: An incomplete rounded card border implies a card container without adding heavy borders, reducing visual clutter.**Figure–Ground** Users distinguish foreground (content) from background. Example: Modal overlays dim the background so the dialog reads as the primary focus.
MediumTechnical
58 practiced
Design a semantic color token system that supports both light and dark modes for UI states (primary, on-primary, background, surface, success, error, warning). Explain how you derive dark-mode values and how you test to ensure required contrast ratios across modes.
Sample Answer
**Answer (UI Designer perspective)****Overview & tokens**I define semantic tokens for both modes: color.primary, color.onPrimary, color.background, color.surface, color.success, color.error, color.warning. Each token maps to a role (interaction, text on role, container) instead of specific hexes so developers and designers can swap palettes without breaking semantics.**Deriving dark-mode values**- Preserve hue; transform Lightness/Chroma in a perceptual space (OKLab or L*a*b/Material HCT). Reduce lightness for backgrounds, increase for “on” colors so text stays readable; reduce chroma for high-saturation colors in dark to avoid glow.- Use a tone-mapping curve: tone_dark = clamp( 100 - f(tone_light) , 0, 100 ) where f is tuned per token class (e.g., backgrounds invert more, accents invert less).- Generate tonal palette programmatically (design-tool plugin or script) and pick tones for primary/onPrimary that maintain contrast.**Testing & validation**- Automated checks: compute relative luminance and WCAG contrast ratios (normal text 4.5:1, large text 3:1, UI components/graphics ≥3:1). Fail CI if any token-pair falls below threshold.- Visual tests: Storybook stories for each token pair in light/dark, with component states and overlays; snapshot + manual review for perceived contrast and glow.- Tools: Axe / pa11y for pages, contrast-ratio CLI, Chromatic for visual regressions, Figma plugin to preview tokens in both themes.- Edge cases: layered surfaces, alpha blend with elevation tints — test composite contrast by compositing tokens over surfaces programmatically.**Outcome**This approach yields consistent, accessible semantic tokens where dark values are derived predictably and validated automatically and visually.
MediumTechnical
36 practiced
Design a microinteraction for validating a form field in real time (e.g., password strength). Describe the animation sequence, timing, color/use of icons, and accessibility considerations to ensure the interaction communicates state without relying on color alone.
Sample Answer
**Situation & goal**Design a subtle, informative microinteraction for real-time password strength that guides users without interrupting flow and remains accessible.**Animation sequence & timing**- On focus: field border soft-fades in (0 → 1 opacity) over 120ms, easing: cubic-bezier(0.2,0.8,0.2,1).- As user types: strength bar updates with a left-to-right wipe animation (duration 220ms, ease-out) and chewable micro-bounce on final state (80ms) to draw attention.- On blur: summary icon gently scales down to 95% then back (total 160ms) to signal final evaluation.**Visuals: color & icons**- Strength bar segmented (4 segments) with default gray background.- Icons: lock outline (empty), warning triangle (weak), shield half (fair), shield full with check (strong).- Colors: red/orange/yellow/green for states but never sole cue.**Non-color cues & accessibility**- Shape, iconography, and label text: "Weak — add 2 more characters", "Strong".- Motion preference: respect prefers-reduced-motion; replace animated wipe with instant fill and announce state change.- ARIA: live region (aria-live="polite") announces strength and actionable hint; input aria-describedby links to helper text.- Contrast: icons and text meet 4.5:1; provide focus ring and clear hit target.**UX copy**- Actionable, concise: show next step (e.g., "Include a symbol or number") rather than vague labels.This yields an elegant, usable microinteraction that communicates state through motion, iconography, text, and semantics — not color alone.
Unlock Full Question Bank
Get access to hundreds of Visual Design Principles and Systems interview questions and detailed answers.
