11 KiB
Module 10: Storyboarding
Time: 45 min | Agent: Freya | Phase: Design | Focus: UX
Transformations Within a View
You have sketches of your pages. But pages aren't static.
Things change. Elements transform. States shift.
Without leaving the page.
Scenario vs. Storyboard
| Concept | What Changes | Example |
|---|---|---|
| Scenario | Logical views change | User navigates from Signup to Welcome |
| Storyboard | Elements within a view change | Signup form shows loading → success → confetti |
A scenario is the journey across pages.
A storyboard is the transformation within a page.
Think of it like a film: scenarios are scene changes, storyboards are what happens in each scene.
The Comic Strip Analogy
Think of storyboarding like a comic strip for your interface.
┌────────────────────────┐
│ [Logo] [Nav] │ ┌──────────────────────────────────────────────┐
├────────────────────────┤ │ SIGNUP FORM - STATE TRANSFORMATIONS │
│ │ ├──────────────────────────────────────────────┤
│ Hero Section │ │ │
│ │ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
├────────────────────────┤ │ │ 1 │ │ 2 │ │ 3 │ │ 4 │ │
│ ┌──────────────────┐ │ ──► │ │ │ │ │ │ │ │ │ │
│ │ │ │ │ │[btn] │ │ ... │ │ ✓ │ │ 🎉 │ │
│ │ Signup Form │◄──┼─┐ │ │ │ │ │ │ │ │ │ │
│ │ (Focus area) │ │ │ │ └──────┘ └──────┘ └──────┘ └──────┘ │
│ └──────────────────┘ │ │ │ Click Loading Success Celebrate │
│ │ │ │ Button State Message Animation │
├────────────────────────┤ │ │ │
│ Footer │ │ └──────────────────────────────────────────────┘
└────────────────────────┘ │
Full Page │
(Default State) └─── Same section, 4 keyframes showing transformation
The page stays the same. One section transforms.
Like a comic strip, each frame shows what changes:
- Default — User sees the button
- Loading — Button becomes spinner
- Success — Checkmark appears
- Celebration — Confetti animation
The Default State
Every page starts somewhere.
This is keyframe 0 — the default state of all objects on the screen.
Your sketch from Module 09? That's typically the default state.
What happens next is the storyboard.
What Storyboards Capture
Storyboards document complex, non-standard transformations:
Async Operations
- Form submission → Loading → Success/Error
- Data fetching → Skeleton screens → Content
- File upload → Progress → Complete
User Interactions (Complex)
- Accordion expand/collapse with animation
- Modal dialogs opening and closing
- Multi-step wizards with validation
- Searchable/filterable dropdowns
Animations (Custom)
- Entrance effects when content loads
- Success celebrations (confetti, checkmarks)
- Error shake animations
- Progressive disclosure reveals
System State Changes
- Real-time notifications appearing
- Live data updates
- Session timeout warnings
- Conditional content showing/hiding
What storyboards DON'T capture: Standard hover states, focus rings, simple link colors, or any behavior developers already know from design systems.
Storyboard Format
Add the storyboard images to the section in question.
Specify step by step:
Visual Example:
K0: Default K1: User Types K2: Strong K3: Show Password
┌────────────────┐ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐
│ Password │ │ Password │ │ Password │ │ Password │
│ ┌────────────┐ │ │ ┌────────────┐ │ │ ┌────────────┐ │ │ ┌────────────┐ │
│ │ │👁│ │ │ ••••• │👁│ │ │ •••••••• │👁│ │ │MyP@ssw0rd! │👁│
│ └────────────┘ │ │ └────────────┘ │ │ └────────────┘ │ │ └────────────┘ │
│ │ │ [▌ ] Weak │ │ [████▌] Strong │ │ [████▌] Strong │
│ │ │ │ │ ✓ │ │ ✓ │
└────────────────┘ └────────────────┘ └────────────────┘ └────────────────┘
Documented Format:
## Password Field Storyboard
### Keyframe 0: Default State
[Image: password-field-default.png]
- Input empty
- Eye icon visible (closed)
- No validation message
### Keyframe 1: User Types
[Image: password-field-typing.png]
- Characters masked as dots
- Strength indicator appears
- Shows "Weak" in red
### Keyframe 2: Password Strong
[Image: password-field-strong.png]
- Strength indicator fills
- Shows "Strong" in green
- Checkmark appears
### Keyframe 3: Show Password
[Image: password-field-visible.png]
- User clicks eye icon
- Characters become visible
- Eye icon opens
Why Each Change Happens
Don't just show what changes. Explain why.
The Complete Picture:
K0 K1 K2 K3
Empty ─────► Typing ─────► Strong ─────► Visible
│ │ │
▼ ▼ ▼
WHY: User WHY: User WHY: User
needs needs wants to
feedback visual verify
while reinforcement what they
typing typed
| Keyframe | What Changes | Why |
|---|---|---|
| 0 → 1 | Strength indicator appears | User needs feedback while typing |
| 1 → 2 | Color shifts red → green | Reinforce password quality visually |
| 2 → 3 | Characters visible | User wants to verify what they typed |
The Freya Method
Freya helps you think through on-page transformations:
"When the user submits, what do they see while waiting?" "This dropdown opens instantly. Should it animate?" "The error appears, but how does the user know which field?"
She ensures every state change serves the user.
What Needs Storyboarding
Storyboard complex, non-standard transformations:
✅ DO STORYBOARD: ❌ DON'T STORYBOARD:
Async Actions Button Hover
┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐
│Submit│ │ ... │ │ ✓ │ │Button│ │Button│
└──────┘ └──────┘ └──────┘ └──────┘ └──────┘
K0 → K1 → K2 → K3 Default Hover
Complex flow Standard behavior
Modal Dialog Focus Ring
┌──────────────┐ ┌──────────┐
│ │ │ [Input ] │
│ Content │ └──────────┘
│ │ Standard pattern
└──────────────┘
Fade in, 200ms ease
Custom animation
| Element | What to Storyboard |
|---|---|
| Async Actions | Submit → Loading → Success/Error states |
| Forms | Multi-step validation, progressive disclosure, dynamic fields |
| Modals | Open animation, content transitions, close behavior |
| Expandable Sections | Collapsed → Expanded with content reveal |
| Complex Dropdowns | Multi-level menus, filtered searches, dynamic options |
| Animations | Entrance effects, celebration moments, transitions |
| Real-time Updates | Live data appearing, notifications arriving |
Don't storyboard standard behaviors like button hovers, link colors, or focus states — developers already know these.
Output
For each interactive section of your page:
- Keyframe images showing transformation
- Step-by-step description of changes
- Reason for each change
- Timing/duration where relevant
This becomes the specification for developers.
Common Mistakes
| Mistake | Fix |
|---|---|
| Confusing with scenarios | Storyboards stay on one page |
| Missing intermediate states | Show every step, not just start/end |
| No "why" | Explain the purpose of each change |
| Forgetting error states | What happens when things fail? |
Practice
Take one interactive section from your sketch:
- Identify the default state (keyframe 0)
- List all possible changes
- Draw/describe each keyframe
- Explain why each change happens
- Note timing if relevant
Learn More
- Lesson 1: Transformations — Understanding state changes within views
- Lesson 2: Storyboard Format — How to document keyframes effectively
- Tutorial: Storyboard Your Views — Hands-on practice with Freya
Next Module
Module 11: Conceptual Specifications →
Document every decision.
Part of the WDS Course: From Designer to Linchpin