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.

HardSystem Design

86 practiced

Design the interactions, error handling, and accessibility behavior for a multi-step conditional form with animated progress. Explain keyboard navigation, ARIA attributes, focus management on transitions, and tests you would run to ensure correctness and performance.

Sample Answer

**Clarify requirements**I’d design a multi-step form where steps appear conditionally, with animated progress indicating overall completion. Goals: fast, keyboard-accessible, screen-reader friendly, robust error handling, and smooth transitions without losing focus context.

**High-level interaction pattern**- Linear stepper with abilities to jump backwards; forward navigation gated by validation.- Progress bar shows percent + step labels; animation is reduced/muted if user prefers reduced motion.

**Keyboard & focus**- Tab order follows visible controls; Enter submits current step; Esc cancels modal (if modal).- Arrow keys navigate between step tabs only when stepper has focus.- On transition: focus moves to the first meaningful input of the new step. If validation error, focus moves to the first invalid field and an aria-live="assertive" region announces the error.

**ARIA & semantic attributes**- Role="form" on container.- Step containers: aria-hidden="true"/"false" based on visibility.- Progress: role="progressbar" with aria-valuemin=0, aria-valuemax=100, aria-valuenow=<percent>, aria-valuetext="Step X of Y".- Current step tab: aria-current="step".- Inputs: aria-invalid="true" on error; associated aria-describedby points to inline error message.- Use live regions: <div aria-live="polite"> for non-critical status, aria-live="assertive" for errors.

**Error handling & messaging**- Inline validation on blur and full-step validation on submit. Show clear message, icon, and focus shift to first error.- Server-side errors surfaced at top of step and mapped to fields when possible.- Save-in-progress and optimistic UI for slow networks; show spinner overlay and disable navigation during submission.

**Animation & accessibility**- Respect prefers-reduced-motion: disable non-essential animations.- Keep animations under 200ms for perceived responsiveness.- Animate only transform/opacity to avoid layout thrash.

**Testing**- Keyboard tests: tab order, Enter/Esc behavior, arrow navigation.- Screen-reader tests: NVDA/VoiceOver walkthrough ensuring announcements for step changes, errors, and progress updates.- Automated a11y: axe, pa11y for ARIA issues.- Focus management: e2e tests (Cypress) asserting focus lands correctly after transitions/errors.- Performance: Lighthouse audits, memory profiling for long conditional branches, and animation frame checks to ensure 60fps or graceful degradation.- Edge cases: preference for reduced motion, screen reader verbosity, slow/failed network, rapid step changes.

This approach balances user clarity, accessibility standards, and engineering constraints while keeping the design predictable and testable.

MediumTechnical

79 practiced

Design the states, micro-interactions, and accessibility considerations for a primary CTA button that must work reliably in high-latency mobile networks. Include idle, pressed, hover, focus, disabled, and loading states and how you communicate progress and prevent duplicate submissions.

EasyTechnical

83 practiced

Describe your process for selecting typography for a new product brand. Explain how you choose typefaces, weights, sizes, and line-height across headings, body, and captions while balancing readability, brand tone, and platform constraints.

EasyTechnical

85 practiced

Your company shipped a product with inconsistent buttons and form styles across screens. Describe a practical plan to audit the UI, prioritize components to standardize, and roll out a component library that improves visual consistency quickly.

MediumTechnical

63 practiced

You need to add a dark mode to an existing light-mode product. Describe a practical approach to design and implement dark mode ensuring accessibility, visual hierarchy, and brand tone are preserved. Mention token changes, component overrides, and testing strategy.

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.