Amanoba Logo
Back to Course

Designing for Unknown Content

Day 15 of 30 · The Playbook 2026 – Masterclass for Designers

Keep structure when content length varies or is unknown.

Learning Goal

  • Placeholder and empty-state rules.
  • Variable title length, multilingual handling (wrap/truncate).
  • Loading states: skeleton vs spinner.
  • Documented patterns for cards, lists, tables.
  • Apply the same rules across all courses/lessons.

Why This Matters

  • Real data differs from mocks.
  • Layouts shouldn’t break while loading.
  • Multilingual text can expand.

Explanation

  • Text handling: wrap up to 2 lines, then truncate + tooltip/link.
  • Empty state: icon + short message + CTA.
  • Skeleton: stable dimensions, avoid layout shifts.

Examples

Bad: Long title overflows, layout breaks.

Good: Max 2 lines then ellipsis; empty state defined.

Guided Exercise (10–15 minutes)

  1. Create text-handling rules (wrap/truncate) for cards and lists.
  2. Define empty-state component (icon, text, CTA).
  3. Write skeleton usage rules.

Independent Exercise (5–10 minutes)

Apply to multilingual content (e.g., German/English) and capture outcomes.

Self-Check

  • Wrap/truncate rules exist.
  • Empty state documented.
  • Skeleton rules set.

Optional Deepening