Visual Design and Execution Questions

Focuses on visual design craft and the ability to execute high quality visual experiences. Topics include typography, color theory, layout, spacing, visual hierarchy, composition, aesthetic systems, and creating consistent design systems and component libraries. Candidates should be prepared to show portfolio examples, explain design decisions, describe systems for maintaining consistency across screens and products, and discuss handoff and collaboration with engineering to ensure pixel quality and implementation fidelity.

EasyTechnical

75 practiced

Explain what a spacing scale is and why it's important in UI design. Provide an example spacing scale (for example: 4, 8, 16, 24, 32) and describe how you would use tokens for spacing across components, layouts, and responsive breakpoints to maintain rhythm and consistency.

MediumTechnical

64 practiced

Describe a concrete workflow with checkpoints and artifacts to ensure implementation fidelity from design to production. Include how you communicate edge cases, track visual bugs, integrate Storybook or visual references, and close the loop to verify fixes after engineering changes.

EasyTechnical

77 practiced

List the essential accessibility checks you perform when doing a visual review for a new screen. Cover color contrast, focus indicators, logical focus order, keyboard navigation, semantic structure, image alt text, and how you would prioritize issues when time is limited.

MediumSystem Design

118 practiced

Describe how you would design a token system for color and spacing to support theming and dark mode across a product. Explain naming conventions, the difference between foundational and semantic tokens, strategies for dark mode color mapping, and how to minimize breaking changes when updating tokens.

MediumTechnical

93 practiced

You are designing a hero section that uses a high-resolution background image and a subtle animated overlay. Describe the visual strategies and technical trade-offs you would recommend to balance aesthetics and load performance, including responsive image strategies (srcset/art direction), placeholders, and animation fallbacks.

Sample Answer

**Approach summary**I’d prioritize LCP and perceived quality: deliver an optimized image for each breakpoint/art direction, show a lightweight placeholder while the full image loads, and use a subtle overlay animation that’s GPU-friendly and respects reduced-motion.

**Responsive images & art direction**- Use <picture> + sources with AVIF/WebP fallbacks and srcset for widths so browsers pick best combo.- Provide different crops for mobile vs desktop (art direction) to preserve focal points.

html

<picture>
  <source type="image/avif" media="(min-width:800px)" srcset="hero-lg.avif 1200w, hero-xl.avif 2000w">
  <source type="image/webp" srcset="hero-lg.webp 1200w, hero-xl.webp 2000w">
  <img src="hero-small.jpg" alt="..." loading="eager">
</picture>

**Placeholders**- Use a tiny LQIP (base64 SVG or blurred jpeg) or dominant-color CSS background for immediate paint.- Preload the critical size used for LCP only if needed.

**Overlay animation & fallbacks**- Implement overlay with CSS (opacity, transform) or a composited canvas; animate only transform/opacity to avoid repaints.- Respect prefers-reduced-motion: switch to a static overlay or subtle opacity transition.- Limit animation complexity on mobile; throttle or disable on low-power devices.

**Trade-offs**- Preloading improves perceived speed but increases initial bytes; balance by preloading only the LCP candidate.- AVIF/WebP reduce bytes but require fallbacks.- Art direction increases asset count; justify by visual impact.

This approach balances aesthetics, accessibility, and performance while giving developers clear implementation patterns.

Unlock Full Question Bank

Get access to hundreds of Visual Design and Execution interview questions and detailed answers.

Join thousands of developers preparing for their dream job.