Ideation and Sketching Questions

Rapidly generate and communicate multiple design concepts using low fidelity sketches, wireframes, and annotations. Emphasize clarity of thought rather than visual polish: show user flows, layout options, and interaction ideas through quick drawings and labeled notes. Produce several distinct approaches, evaluate the pros and cons of each, and explain the rationale for selecting the strongest direction. Demonstrate exploration, trade off analysis, and decision making by iterating quickly and exposing your design thinking throughout the process.

EasyTechnical

80 practiced

Given the persona 'Marta' — a 67-year-old with limited vision and low technical literacy — sketch three low-fidelity layout ideas for a mobile appointment-booking screen that prioritize accessibility. Describe the accessibility-driven changes you make to tap targets, typography, copy, and navigation in each sketch and why.

Sample Answer

**Sketch 1 — Single-column large-card flow (simple linear)**

- Layout: Full-width stacked cards: “Next available”, “Choose date”, “Confirm”.- Tap targets: 48–60 dp buttons; entire card is tappable to accommodate imprecise taps.- Typography & color: 20–24 pt high-contrast sans; bold headings; 1.5x line height.- Copy: Short, spoken-tone labels: “Book appointment”, “Change date”, “Call if you need help”.- Navigation: Linear bottom “Back / Continue” with persistent “Help” pill.- Why: Reduces choice overload, large targets and clear copy match Marta’s low vision and low tech confidence.

**Sketch 2 — Icon + text grid with voice affordance**

- Layout: Two large tiles per row with icon on left, label on right.- Tap targets: 60 dp tiles; increased spacing; ripple feedback + haptic.- Typography: 22 pt label; icon simple and high-contrast.- Copy: Action-first verbs: “Select time”, “Reschedule”, “Cancel”.- Navigation: Floating “Listen” button to read screen aloud; back via single persistent home button.- Why: Visual icons help recognition; listen and large tiles aid Marta’s vision and literacy.

**Sketch 3 — Minimal list with progressive disclosure**

- Layout: Vertical list with large primary action and a single prominent default suggestion (e.g., “Next Monday, 10am”).- Tap targets: Primary action 72 dp; secondary actions smaller but still ≥48 dp.- Typography: 24 pt for primary, 18 pt for secondary; clear contrast.- Copy: Confirm-focused microcopy: “Confirm appointment for Next Monday at 10:00 — yes / no”.- Navigation: One-step confirm modal; option to call support visible on every screen.- Why: Fast path for users who prefer minimal decisions; progressive disclosure limits complexity for Marta.

Across all sketches I prioritize consistent placement, predictable flows, large touch areas, clear readable type, plain-language copy, and multi-modal support (audio, call) to accommodate Marta’s vision and technical comfort.

HardTechnical

83 practiced

Sketch annotated frames that describe a micro-interaction: a compact card expands to a detailed overlay on tap/click. Provide a frame-by-frame breakdown, specify timing in milliseconds, easing suggestions, exposed states, and describe what you would hand to developers (CSS hints, motion specs, accessibility notes).

Sample Answer

**Overview / Goal**Compact card expands into a full overlay on tap/click showing details. Micro-interaction should feel fast, grounded, and reversible.

**Frame-by-frame breakdown (annotated)**1. Frame 0 — Rest (compact card) - Visual: 120×80px card, drop shadow 0 1px 3px rgba(0,0,0,0.12) - State exposed: idle2. Frame 50ms — Touch feedback - Scale down to 0.98, shadow shortens (0 1px 2px rgba(...)) - Easing: cubic-bezier(.2,.8,.2,1)3. Frame 150–400ms — Expand & translate - Card scales and translates to center, corner radius animates 8px → 16px → 0 - Fade in overlay backdrop (opacity 0 → .6) - Easing: ease-out (cubic-bezier(.0,.0,.2,1))4. Frame 400–520ms — Content reveal - Cross-fade and staggered slide-up of text and buttons (stagger 40ms) - Easing: ease-out5. Frame 520–600ms — Final settle - Slight overshoot rollback to final size (spring-like) - Easing: cubic-bezier(.2,1.2,.3,1)

**Timings summary**- Press feedback: 0–50ms- Expand motion: 150–400ms (primary)- Content reveal: 400–520ms- Settle: 520–600msTotal: ~600ms

**Exposed states**- idle, pressed, expanding, expanded, collapsing, disabled/blocked (backdrop active)

**Handoff to developers**- Motion spec: list keyframes with ms and easing per element; include stagger values (40ms).- CSS hints:

css

.card {
  transition: transform 250ms cubic-bezier(.0,.0,.2,1),
              box-shadow 180ms ease,
              border-radius 250ms cubic-bezier(.2,1.2,.3,1);
  will-change: transform, opacity;
}
.backdrop {
  transition: opacity 250ms ease-out;
}
.content > * { transition: opacity 160ms ease, transform 180ms ease; transition-delay: var(--stagger); }

- Use translate/scale (GPU-accelerated); avoid animating width/height where possible — animate transform + clip-path for shape changes if needed.

**Accessibility notes**- Ensure expansion is triggered by keyboard (Enter/Space) and focus moves into overlay.- Provide ARIA: trigger gets aria-expanded, overlay role="dialog" with aria-modal="true", focus trap, ESC to close.- Respect reduced-motion: if prefers-reduced-motion, skip scale/overshoot and use simple fade (200ms).- Maintain contrast on backdrop and ensure large hit targets.

**Developer deliverables**- Annotated frames (PNG/SVG) + exported Lottie or CSS keyframes snippets, timing table, easing tokens, accessibility checklist, and small prototype (Figma/Principle) showing exact timings and stagger.

MediumTechnical

68 practiced

Explain how you annotate accessibility constraints during the sketching stage: include focus order, semantic structure, alt-text placeholders, color-contrast notes, and keyboard flow. Provide concrete examples of annotations you would add to a sketch of a modal dialog and how you would hand those to developers.

Sample Answer

**Approach (brief):**I annotate sketches so developers and QA can implement accessible behavior from the start: explicit focus order, semantic roles, alt-text placeholders, color-contrast notes with values, and keyboard flow details. I include acceptance criteria and small interaction examples.

**What I add to a modal-dialog sketch**- Focus order (numbered): 1. Trigger button -> 2. Modal container (role="dialog", aria-modal="true") -> 3. Heading (aria-labelledby) -> 4. Primary CTA -> 5. Secondary CTA -> 6. Close (Esc closes, focus returns to trigger).- Semantic structure: callout: <dialog role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc"> with IDs.- Alt-text placeholders: image in modal: "alt: Photo of product X showing size relative to hand — used for purchase decision."- Color-contrast notes: "Primary CTA: #0057D9 on #FFFFFF — contrast 8.2:1 (AA/AAA). Secondary CTA: #6B6B6B on #FFFFFF — contrast 5.1:1 (AA). Warning text: ensure >=4.5:1."- Keyboard flow: "Tab cycles inside modal; Shift+Tab reverse; Esc closes; Enter on primary CTA triggers action; focus trap: first tabbable receives focus if tab from last."

**Concrete annotations on the sketch (sample callouts)**- Top-left near dialog header: "1: dialog role; aria-modal=true; aria-labelledby=#title"- Next to Title: "H2 #title — screen reader announces on open; focus lands here"- Beside image: "img alt='Product X in hand — shows scale'"- Primary button: "Tab order 4; aria-disabled when loading; contrast checked"- Footer close X: "Button, aria-label='Close dialog'; keyboard: Enter/Space activates; Esc closes and focus -> trigger"

**Hand-off to developers**- Export annotated PNG + single-page spec in Figma with: - Layer names matching semantic IDs (title: #title, desc: #desc, btn-primary: #checkout) - A short acceptance checklist: - Focus lands on #title on open - Tab is trapped; Esc returns focus to trigger - ARIA attributes present as noted - Color contrast values pass WCAG 2.1 AA - Example ARIA snippet (pseudo-HTML) under the sketch for quick reference: <dialog role="dialog" aria-modal="true" aria-labelledby="title" aria-describedby="desc">...- Discuss in handoff meeting, record decisions in ticket, and include links to automated a11y tests (axe, contrast-check) and a keyboard test script for QA.

MediumTechnical

75 practiced

Sketch how a complex content page (article with embedded multimedia, comments, and related content modules) should reflow across desktop, tablet, and mobile. Provide thumbnail sketches for each breakpoint and annotate interaction behaviors (playback, expand comments), progressive loading, and prioritized elements at each size.

Sample Answer

**Context & goal**Design a responsive reflow for a complex article page (hero media, body, comments, related modules) that prioritizes readability, engagement, and performance across desktop, tablet, and mobile.

**Breakpoints & thumbnail sketches (ASCII)**- Desktop (≥1200px) [ Header | Nav ] [ Hero image/video --------------------------- ] <- wide media, inline play controls [ Article column (left 65%) | Sidebar (35%) ] [ Body text with inline multimedia embeds ] [ Related, author, CTA ] [ Comments full view w/ sort/filter below body spanning columns ]

- Tablet (768–1199px) [ Header compact ] [ Hero (responsive height) ] [ Article (100%) ] [ Embedded media stacked centered ] [ Related module collapsible below article ] [ Comments collapsed by default; “Show comments (34)” ]

- Mobile (<768px) [ Header (hamburger) ] [ Hero (tall poster image, play overlay) ] [ Article stream - single column ] [ Sticky CTA / share bar ] [ Comments lazy-load on demand; related cards carousel ]

**Priorities per size**- Desktop: simultaneous content + discovery (media + sidebar recommendations)- Tablet: reading focus + discoverability (media then content, condensed sidebar as module)- Mobile: reading & performance first; quick access to media and comments

**Interaction behaviors**- Playback: lazy-init player on viewport or tap; preload low-res poster; progressive bitrate switching; global mute toggle- Expand comments: collapsed summary with comment count; expand animates downward; maintain scroll position; deep-link to specific comment- Related content: hover preview on desktop; swipe carousel on mobile; “See more” on tablet

**Progressive loading & performance**- Critical CSS + first meaningful paint for title/poster- Lazy-load below-the-fold images and comments (intersection observer)- Poster image + LQIP, then progressive JPEG/AVIF- Defer non-essential JS (analytics, recommendation ranking)- Placeholder skeletons for embeds; hydrate media only on interaction or when 50% visible

**Accessibility & UX notes**- Keyboard-accessible players and comment controls- Clear focus states, sufficient contrast, readable line length (50–75 ch)- Preserve user context when switching breakpoints (e.g., keep expanded comment open if user rotates device)

This sketch balances engagement and performance while keeping reading experience central across breakpoints.

MediumTechnical

88 practiced

You must propose a novel calendar interaction but are constrained to an existing component library and strict brand system. Sketch three wireframe-level alternatives that fit within these constraints; annotate where you'd propose minimal system extensions, and justify each choice with expected UX benefit vs implementation effort.

Unlock Full Question Bank

Get access to hundreds of Ideation and Sketching interview questions and detailed answers.

Join thousands of developers preparing for their dream job.