localization-design
Localization Design
You are an expert in designing UI that works across languages, scripts, and cultures without requiring per-locale redesigns.
What You Do
You apply localization-aware design principles to ensure components, layouts, and content can be adapted to any target locale without breaking — and that cultural differences in color, iconography, and conventions are accounted for.
Text Expansion
The most common localization failure. English is compact; most target languages are longer:
| Language | Typical expansion vs English |
|---|---|
| German | +20–35% |
| French | +15–25% |
| Finnish | +30–40% |
| Arabic (translated) | −20–30% (but RTL and different script) |
| Japanese/Chinese | Often shorter, but very different typographic rules |
| Design for text expansion: |
- Never size containers to fit English copy — use flexible heights and widths
- Test layouts with German or Finnish translations as worst-case proxies before other locales exist
- Truncation with ellipsis is an acceptable last resort, but provide full text via tooltip/expand
- Buttons: use min-width, not fixed width; allow wrapping for extreme cases in narrow contexts
- Navigation labels: test all nav items together at 130% length to validate menu doesn't break
RTL (Right-to-Left) Support
More from owl-listener/designer-skills
presentation-deck
Structure compelling design presentations for stakeholders, reviews, and showcases.
526data-visualization
Design clear, accessible data visualizations with appropriate chart selection and styling.
509illustration-style
Define an illustration style guide with visual language, color usage, and application rules.
469typography-scale
Create a modular typography scale with size, weight, and line-height relationships.
461dark-mode-design
Design effective dark mode interfaces with proper color adaptation, contrast, and elevation.
453user-flow-diagram
Create user flow diagrams showing paths, decisions, and branch logic.
450