149 lines
3.5 KiB
Markdown
149 lines
3.5 KiB
Markdown
# Module 07: The Design Phase
|
|
|
|
**Time: 20 min | Agent: Freya | Phase: Design | Focus: Overview**
|
|
|
|
---
|
|
|
|
## Welcome to the Heart of WDS
|
|
|
|
You've completed Strategy. You have:
|
|
- A Product Brief (your North Star)
|
|
- Platform Requirements (your boundaries)
|
|
- A Trigger Map (user psychology mapped)
|
|
|
|
Now it's time to design.
|
|
|
|
---
|
|
|
|
## What This Phase Contains
|
|
|
|
8 modules covering UX design and visual design. This is where creative discipline becomes real.
|
|
|
|
| Module | What You'll Do | Focus |
|
|
|--------|---------------|-------|
|
|
| 08 | Outline Scenarios | UX |
|
|
| 09 | Conceptual Sketching | UX |
|
|
| 10 | Storyboarding | UX |
|
|
| 11 | Conceptual Specifications | UX |
|
|
| 12 | Functional Components | UX |
|
|
| 13 | Design System | Systems |
|
|
| 14 | Agentic Development | Build |
|
|
| 15 | Visual Design | Visual |
|
|
| 16 | Design Delivery | Delivery |
|
|
|
|
---
|
|
|
|
## The Flow
|
|
|
|
```
|
|
Outline → Sketch → Storyboard → Specify → Components → Visual → System → Deliver
|
|
```
|
|
|
|
It's not strictly linear. You'll loop back. That's the point.
|
|
|
|
---
|
|
|
|
## Meet Freya
|
|
|
|
Freya is your design partner. She:
|
|
|
|
- Thinks WITH you, not FOR you
|
|
- Asks "WHY?" before "WHAT?"
|
|
- Connects every decision to your Trigger Map
|
|
- Won't let you skip the hard thinking
|
|
|
|
She's not here to make pretty pictures. She's here to make **decisions visible**.
|
|
|
|
---
|
|
|
|
## Multiple Entry Points
|
|
|
|
Every step offers choices:
|
|
|
|
| Entry Point | How It Works |
|
|
|-------------|--------------|
|
|
| **I have a sketch** | You provide, AI refines |
|
|
| **I have inspiration** | You share, AI extracts patterns |
|
|
| **Dream it up** | AI creates options, you pick |
|
|
| **Let's discuss** | Conversation shapes the concept |
|
|
|
|
**Same step. Same output. Different starting points.**
|
|
|
|
---
|
|
|
|
## Creative Discipline in Action
|
|
|
|
> "Creative discipline enables creativity, not constrains it."
|
|
|
|
Each module is a discrete step with:
|
|
- Clear input (what you need to start)
|
|
- Clear output (what you'll produce)
|
|
- Clear purpose (why it matters)
|
|
|
|
This structure doesn't limit you. It focuses you.
|
|
|
|
---
|
|
|
|
## What You'll Create
|
|
|
|
By the end of this phase:
|
|
|
|
- **Scenario outlines** — The journeys you're designing
|
|
- **Conceptual sketches** — Visual explorations
|
|
- **Storyboards** — Sequenced flows
|
|
- **Detailed specifications** — Every decision documented
|
|
- **Component definitions** — Reusable patterns
|
|
- **Visual designs** — How it actually looks
|
|
- **Design system** — Your component library (if enabled)
|
|
- **Delivery package** — Ready for implementation
|
|
|
|
---
|
|
|
|
## Design System
|
|
|
|
Remember from setup:
|
|
|
|
| Mode | What Happens |
|
|
|------|--------------|
|
|
| **1. None** | Ad-hoc styling, no extraction |
|
|
| **2. Building** | System grows from your work |
|
|
| **3. Library** | Use external + your branding |
|
|
| **4. Existing** | Import from previous projects |
|
|
|
|
This affects how Freya works with you throughout the phase.
|
|
|
|
---
|
|
|
|
## The Principle
|
|
|
|
Every pixel has a reason.
|
|
Every interaction traces back to user psychology.
|
|
Every component connects to a business goal.
|
|
|
|
**Nothing is decoration. Everything is decision.**
|
|
|
|
---
|
|
|
|
## Lessons
|
|
|
|
### [Lesson 1: Entering Design Mode](lesson-01-entering-design.md)
|
|
The transition from strategy to creation
|
|
|
|
### [Lesson 2: Why Specifications Matter](lesson-02-why-specifications-matter.md)
|
|
The New Code: Specifications as the Foundation of Professional AI-Assisted Development
|
|
|
|
### [Lesson 3: Meet Freya](lesson-03-meet-freya.md)
|
|
Your UX design partner
|
|
|
|
---
|
|
|
|
## Ready?
|
|
|
|
**[Module 08: Outline Scenarios →](../module-08-outline-scenarios/module-08-outline-scenarios-overview.md)**
|
|
|
|
Let's start designing.
|
|
|
|
---
|
|
|
|
*Part of the WDS Course: From Designer to Linchpin*
|