Wearable Design

Designing for smartwatches and wearable devices, glanceable UX, and small screen constraints.

dragoon0x a21d1b6 1.1 KB Updated

File contents

Wearable Design

Constraints

  • Screen: ~40mm, round or square
  • Interaction: taps, swipe, crown/bezel, voice
  • Session: 3-5 seconds (glance, not browse)
  • Context: active, on-the-go, hands may be occupied

Design Principles

  1. Glanceable: Information in 2-3 seconds
  2. Actionable: One tap to the most common action
  3. Minimal: One piece of information per screen
  4. Timely: Show what's relevant NOW

UI Patterns

  • Notification: Title + 1 line body + 1-2 action buttons
  • Complication: Single metric on watch face (step count, weather)
  • List: Short scrollable list (5-10 items max)
  • Detail: Headline + key info + action

Typography

  • System font (SF Compact for Apple Watch)
  • Large: 20-34pt for primary info
  • Body: 15-17pt minimum
  • No more than 2 font sizes per screen

Don'ts

  • Don't replicate the phone app
  • Don't require typing (use voice or preset responses)
  • Don't show more than 3-5 items in a list
  • Don't use light colors on bright outdoor screens

dragoon0x/everything-design-taste/tree/main/skills/wearable-design commit a21d1b658e

Frequently asked questions

npx skillmds@latest add dragoon0x/wearable-design