whiteport-design-studio 0.2.2 → 0.3.0

package/docs/learn/module-09-conceptual-sketching/lesson-02-sketching-techniques.md

@@ -0,0 +1,270 @@
+# Module 09: Conceptual Sketching
+
+## Lesson 2: Sketching Techniques
+
+**Practical methods for visualizing your logical views**
+
+---
+
+## The Goal
+
+Communicate structure and hierarchy quickly.
+
+Not beauty. Not polish. Just enough clarity to:
+- Understand what the user sees
+- Know where key elements are positioned
+- Serve as the foundation for specifications
+
+---
+
+## Paper Sketching
+
+The fastest way to think out loud.
+
+### Materials
+
+- Paper (any kind works)
+- Pen or marker
+- 5 minutes
+
+### Photograph and Share
+
+Phone camera → send to AI → get feedback.
+
+Freya can analyze hand sketches and suggest refinements.
+
+---
+
+## Digital Sketching
+
+If you prefer tablet or stylus.
+
+### Tools
+
+- iPad + Apple Pencil
+- Any drawing app (Notes app works fine)
+- Freeform, Concepts, Paper
+
+### Approach
+
+Same as paper, but digital:
+- Rough shapes
+- Quick text labels
+- Multiple variants
+- Export and share
+
+### Advantage
+
+Easy to share directly with AI. No photography step.
+
+---
+
+## Wireframe Tools
+
+If you want more structure than freehand.
+
+### Tools
+
+- Figma
+- Balsamiq
+- Whimsical
+- Excalidraw
+
+### Low-Fi Mode
+
+**Black lines only. No colors. No real content.**
+
+The more you reduce, the more you communicate.
+
+```
+┌─────────────────────────────────────┐
+│ [Logo]                    [Nav] [P] │
+├─────────────────────────────────────┤
+│                                     │
+│           [Hero Image]              │
+│                                     │
+│         ─────────────────           │
+│         Large Headline Here         │
+│         ─────────────────           │
+│         Supporting text that        │
+│         explains the value          │
+│                                     │
+│         [  Primary CTA  ]           │
+│                                     │
+└─────────────────────────────────────┘
+```
+
+Placeholders force focus on structure, not content. Black lines force focus on layout, not decoration.
+
+---
+
+## AI-Generated Sketches
+
+Let the AI create options for you.
+
+### Prompting for Layouts
+
+**Good prompt:**
+> "Show me 3 different layouts for a signup form. The user is Felix who wants to try quickly with minimal friction. Mobile-first."
+
+**Better prompt:**
+> "I need a signup form for S01-User-Registration. The persona is Felix who fears complicated onboarding. Show me 3 approaches: minimal, conversational, and wizard-style. ASCII art is fine."
+
+### ASCII Art
+
+AI can generate quick text-based layouts:
+
+```
+┌─────────────────────────────────┐
+│  Dog Week                 [?]  │
+├─────────────────────────────────┤
+│                                 │
+│     Welcome to Dog Week         │
+│                                 │
+│   ┌───────────────────────┐     │
+│   │ Email                 │     │
+│   └───────────────────────┘     │
+│                                 │
+│   ┌───────────────────────┐     │
+│   │ Password              │     │
+│   └───────────────────────┘     │
+│                                 │
+│   [    Create Account    ]      │
+│                                 │
+│   Already have an account?      │
+│   Log in →                      │
+│                                 │
+└─────────────────────────────────┘
+```
+
+Fast to generate. Easy to iterate. Clear enough to discuss.
+
+---
+
+## Screen Dumps as Reference
+
+Using existing products for inspiration.
+
+### The Pattern
+
+1. Find a product you admire
+2. Screenshot the relevant screen
+3. Share with Freya: "I like how this handles signup"
+4. AI extracts the patterns
+
+### What to Share
+
+- "I like this form layout"
+- "This navigation feels right"
+- "The hierarchy here works"
+
+### What Freya Does
+
+> "I see this uses a single-column form with progressive disclosure. The CTA is high-contrast and fixed at the bottom. Should we apply similar patterns to Felix's signup experience?"
+
+She extracts what works, connects to your context.
+
+---
+
+## Vibe-Coded Prototypes
+
+Quick prototypes that the AI can analyze.
+
+### The Pattern
+
+1. Ask AI to build a quick prototype
+2. View it in browser
+3. Screenshot the states
+4. Use screenshots as sketches
+
+### Example
+
+> "Build me a quick HTML signup form based on our S01-User-Registration scenario. Just the structure, no styling."
+
+Then screenshot the result and use it as your starting point.
+
+---
+
+## Responsive Considerations
+
+Sketch for your primary platform first.
+
+### Mobile-First
+
+If users are primarily on mobile (like Dog Week):
+- Sketch mobile layout first
+- Everything stacks vertically
+- Touch-friendly tap targets
+
+### Desktop-First
+
+If users are primarily on desktop:
+- Sketch desktop layout first
+- Multiple columns allowed
+- Hover states possible
+
+### Then Adapt
+
+Once primary platform is sketched:
+- "How does this adapt to secondary platform?"
+- Key elements stay, layout adjusts
+
+---
+
+## Common Mistakes
+
+| Mistake | Fix |
+|---------|-----|
+| Too polished | Keep it rough |
+| Only one variant | Explore 3-5 options |
+| Designing in isolation | Reference your scenario |
+| Starting with edge cases | Focus on default state |
+| Using colors | Black lines only—colors distract from structure |
+
+---
+
+## The Sketching Conversation
+
+With Freya:
+
+**You:** "Here's my sketch for the signup form. [share image]"
+
+**Freya:** "I see a two-field form with prominent CTA. This aligns with Felix's need for simplicity. A few questions:
+- Where does the user see they can log in instead?
+- Is there a way to try before creating an account?
+- How prominent should the value proposition be?"
+
+**You:** "Good points. Let me sketch variant B with those addressed..."
+
+The conversation refines the concept.
+
+---
+
+## Output
+
+For each logical view in your scenario:
+
+- **1-3 rough sketches** showing layout options
+- **Selected direction** with rationale
+
+The sketches show WHAT appears on screen. The specifications (Module 11) document WHY—explaining decisions, persona connections, and business rationale.
+
+These sketches become the foundation for storyboarding (what changes after load) and specifications (the detailed documentation).
+
+---
+
+## What's Next
+
+In the next lesson, you'll learn why hand sketching (paper or tablet) is still the recommended approach in the AI era—and what makes it superior to other methods.
+
+Then in the tutorial, you'll sketch the default states for your own scenario views with Freya's guidance.
+
+---
+
+**[Continue to Lesson 3: Why Hand Sketching is Still King →](lesson-03-why-hand-sketching.md)**
+
+---
+
+[← Back to Lesson 1](lesson-01-visualize-first.md) | [Back to Module Overview](module-09-conceptual-sketching-overview.md)
+
+*Part of Module 09: Conceptual Sketching*

package/docs/learn/module-09-conceptual-sketching/lesson-03-why-hand-sketching.md

@@ -0,0 +1,250 @@
+# Module 09: Conceptual Sketching
+
+## Lesson 3: Why Hand Sketching is Still King
+
+**Grab pen and paper. Let's go.**
+
+---
+
+## The AI Paradox
+
+AI can generate beautiful mockups in seconds.
+
+So why are we recommending you grab a pen?
+
+**Because sketching isn't about the artifact. It's about the thinking.**
+
+---
+
+## Your Hand, Your Brain
+
+When you draw by hand, something magical happens:
+
+**Your hand draws what your mind sees. Instantly.**
+
+No boot time. No interface. No fighting with tools.
+
+**The thought becomes visible in real time.**
+
+This is faster than any digital tool will ever be.
+
+---
+
+## Being Sketchy is a Superpower
+
+Here's what people get wrong about sketching:
+
+**They think "sketchy" means vague.**
+
+**Actually, sketchy means: rough but complete.**
+
+- 20 minutes making it concrete and complete
+- Not 2 hours making it pixel-perfect
+
+**Ugly is good. Ugly keeps you moving.**
+
+---
+
+## Five Things Only Hand Sketching Can Do
+
+### 1. **Fastest from Thought to Visual**
+
+Think it. Draw it. Done.
+
+**Digital tools make you wait. Paper doesn't.**
+
+### 2. **Forces You to Be Concrete**
+
+Can't hide behind "we'll figure it out later."
+
+**If you can't draw it, you haven't thought it through.**
+
+### 3. **Invites Everyone to Participate**
+
+Non-designers feel safe with rough sketches.
+
+**Polished mockups intimidate. Rough sketches invite.**
+
+### 4. **Keeps You Exploring**
+
+Low stakes = more options.
+
+**You'll sketch 10 variants. You'll wireframe 2.**
+
+### 5. **Shows Your Thinking Process**
+
+Looking back at variants shows how you got to the answer.
+
+**This is valuable documentation.**
+
+---
+
+## You Don't Need Artistic Skills
+
+Seriously. You need four things:
+
+1. **Box** — Any UI element
+2. **Line** — Separators, borders
+3. **Text** — Labels
+4. **Arrow** — Flow
+
+**That's it. You can sketch any interface.**
+
+If you can write your name, you can sketch UX.
+
+---
+
+## What You Need
+
+**Materials:**
+- Paper (any kind)
+- Pen or marker
+- 5 minutes
+
+**Permission:**
+- To be ugly
+- To explore
+- To cross out and start over
+
+**That's it. You're ready.**
+
+---
+
+## Digital Sketching Works Too
+
+Prefer iPad + Apple Pencil? That works.
+
+Any tablet + stylus? Great.
+
+**Same approach:**
+- Rough shapes
+- Quick labels
+- Multiple variants
+
+**The principle stays the same: rough but complete.**
+
+---
+
+## The Collaborative Superpower
+
+Here's where it gets powerful:
+
+### Path A: You Already Sketched
+1. Take a photo
+2. Share with Freya
+3. Get strategic feedback connected to your personas
+
+### Path B: You Haven't Sketched Yet
+1. Discuss the page with Freya
+2. Explore options together
+3. Sketch based on discussion
+4. Share for feedback
+
+**Either way, the sketch becomes the thinking tool.**
+
+---
+
+## Why This Beats AI-Generated Layouts
+
+AI can generate options fast. That's true.
+
+**But here's what AI can't do:**
+
+**AI generates layouts. Sketching generates understanding.**
+
+Use both:
+1. **Sketch to think** through the structure
+2. **Share with AI** for strategic feedback
+3. **Generate if needed** for digital artifacts
+
+**The sketch comes first. Always.**
+
+---
+
+## Common Objections Destroyed
+
+**"I can't draw"**
+→ You don't need to. Boxes and labels work perfectly.
+
+**"My sketches are ugly"**
+→ Perfect. Ugly = rough = flexible = good.
+
+**"I work faster in Figma"**
+→ You polish faster in Figma. You think faster on paper.
+
+**"AI can generate layouts instantly"**
+→ AI generates options. Sketching generates thinking. Do both.
+
+---
+
+## The Standard: Concrete and Complete
+
+However you visualize (hand, tablet, digital), meet this standard:
+
+✓ **Concrete** — Shows actual objects, not vague concepts
+✓ **Complete** — Everything on screen, nothing more
+✓ **Rough** — Fast and ugly, not polished
+
+**Sketches show WHAT. Specifications document WHY.**
+
+**Method doesn't matter. Meeting the standard does.**
+
+---
+
+## Want the Full Case?
+
+This lesson gives you the energy to start.
+
+**For the comprehensive argument** (45 reasons across 9 categories), see the model:
+
+**[Sketching Concepts by Hand Model](../../models/whiteport-sketching-concepts-by-hand.md)**
+
+It covers:
+- Speed & Flow
+- Thinking Quality
+- Collaboration Benefits
+- Design Quality
+- Psychological Advantages
+- And much more
+
+**But you don't need to read that to start.**
+
+---
+
+## Right Now
+
+Here's what to do:
+
+1. **Grab paper and pen** (seriously, right now)
+2. **Pick one logical view** from your scenario
+3. **Sketch 3 variants** (rough boxes and labels)
+4. **Take 15 minutes max**
+
+**That's it. That's the lesson.**
+
+Stop reading. Start sketching.
+
+---
+
+## What's Next
+
+In the tutorial, you'll sketch default states for your scenario views.
+
+Freya will:
+- Help you explore options
+- Connect decisions to personas
+- Keep you strategically aligned
+
+**But first, you need to experience sketching yourself.**
+
+So grab that pen.
+
+---
+
+**[Continue to Tutorial: Sketch Your Views →](tutorial-09.md)**
+
+---
+
+[← Back to Lesson 2: Sketching Techniques](lesson-02-sketching-techniques.md) | [Back to Module Overview](module-09-conceptual-sketching-overview.md)
+
+*Part of Module 09: Conceptual Sketching*