287 lines
7.7 KiB
Markdown
287 lines
7.7 KiB
Markdown
# Module 09: Conceptual Sketching
|
|
|
|
## Lesson 1: Visualize First
|
|
|
|
**Why seeing comes before specifying**
|
|
|
|
---
|
|
|
|
## The Specification Problem
|
|
|
|
You can't specify what you can't see.
|
|
|
|
Try writing a detailed specification for a page layout purely in words:
|
|
|
|
> "The header should contain the logo on the left, navigation in the center, and user profile on the right. Below that, a hero section with a headline, subheadline, and call-to-action button. The button should be prominent..."
|
|
|
|
How big is prominent? How much space between elements? What's the visual hierarchy?
|
|
|
|
Words fail at spatial problems. You need to see it.
|
|
|
|
---
|
|
|
|
## Keyframe 0
|
|
|
|
This module is about **keyframe 0** — the default state of each logical view.
|
|
|
|
What does the user see when the page first loads?
|
|
|
|
Before any interactions. Before any animations. Before any state changes.
|
|
|
|
Just: what appears on screen?
|
|
|
|
---
|
|
|
|
## Why Default State First?
|
|
|
|
Everything else is a transformation FROM the default state.
|
|
|
|
- Loading states → default state
|
|
- User interactions → transform from default
|
|
- Error states → modify the default
|
|
- Success states → change from default
|
|
|
|
If you don't nail the default state, everything built on top wobbles.
|
|
|
|
---
|
|
|
|
## The Conceptual Mindset
|
|
|
|
### Low Fidelity on Purpose
|
|
|
|
Rough visuals prevent attachment.
|
|
|
|
If your sketch looks finished, you'll defend it. You'll argue about it. You'll resist changes.
|
|
|
|
If your sketch looks rough, you'll iterate freely. You'll explore alternatives. You'll find better solutions.
|
|
|
|
**Keep it ugly. Keep it fast. Keep it flexible.**
|
|
|
|
### Quantity Over Quality
|
|
|
|
Your first idea is rarely your best.
|
|
|
|
Professional designers know this. They explore 3-5 approaches before picking one. They generate options before converging.
|
|
|
|
**One perfect sketch = probably wrong.**
|
|
**Five rough sketches = probably right (one of them).**
|
|
|
|
### Think Out Loud
|
|
|
|
Visualize while talking through the scenario.
|
|
|
|
- What does the user see first?
|
|
- What draws their attention?
|
|
- Where do they click?
|
|
- What are they trying to accomplish?
|
|
|
|
Connect every visual decision to the user's journey.
|
|
|
|
---
|
|
|
|
## Entry Points
|
|
|
|
You don't have to start from scratch.
|
|
|
|
| Entry Point | How It Works |
|
|
|-------------|--------------|
|
|
| **Workshop** | Talk through the screen together — conversation shapes the concept |
|
|
| **Visualize** | Send any visual — AI analyzes and refines |
|
|
| **Example** | "I like how this site does it" → AI extracts patterns |
|
|
| **Dream it up** | "Show me 3 ways to lay out a signup form" → AI generates options |
|
|
|
|
Same output. Different starting points. Use whatever feels natural.
|
|
|
|
---
|
|
|
|
## Ways to Visualize
|
|
|
|
You can send anything visual. All methods work.
|
|
|
|
| Method | When to Use |
|
|
|--------|-------------|
|
|
| **Pixel-perfect Figma** | You already have detailed designs |
|
|
| **Wireframes** | Structure without visual noise |
|
|
| **Hand sketch (paper)** | Fastest way to think out loud |
|
|
| **Hand sketch (digital)** | iPad, tablet, stylus |
|
|
| **Whiteboard concepts** | Rough, collaborative, big picture |
|
|
| **Screen dumps** | "This feature from another product" |
|
|
| **Generated images** | AI creates options for you |
|
|
| **ASCII art** | Quick text-based layouts from AI |
|
|
| **Vibe coded example** | Quick prototype → agent screenshots states |
|
|
|
|
Mix and match. One view might be a polished wireframe, another a napkin sketch.
|
|
|
|
**What matters is communication, not polish.**
|
|
|
|
---
|
|
|
|
## The Great Divide
|
|
|
|
You can make something amazing with AI.
|
|
|
|
Beautiful mockups. Working prototypes. Impressive demos.
|
|
|
|
But then what?
|
|
|
|
**There's a great divide between conceptualizing and producing.**
|
|
|
|
In the middle stands the specification — with its static visualization.
|
|
|
|
```
|
|
┌───────────────┐ ┌───────────────┐ ┌───────────────┐
|
|
│ CONCEPTUALIZE │ ──────► │ SPECIFICATION │ ──────► │ PRODUCTION │
|
|
│ │ │ │ │ CODE │
|
|
│ Cool mockups │ │ Static visual │ │ Real software │
|
|
│ AI demos │ │ + behavior │ │ │
|
|
│ Prototypes │ │ + content │ │ │
|
|
└───────────────┘ └───────────────┘ └───────────────┘
|
|
Creative The Bridge Deliverable
|
|
```
|
|
|
|
No matter how cool your concept — you still create a specification.
|
|
|
|
That's what gets built.
|
|
|
|
---
|
|
|
|
## What Sketching Reveals
|
|
|
|
Sketching isn't just about showing what you know.
|
|
|
|
It's about discovering what you don't know.
|
|
|
|
**Common discoveries:**
|
|
|
|
- "This page needs more content than I thought"
|
|
- "These two elements compete for attention"
|
|
- "The user's next action isn't obvious"
|
|
- "This layout doesn't work on mobile"
|
|
|
|
Better to discover these with rough sketches than polished mockups.
|
|
|
|
---
|
|
|
|
## Connected to Scenarios
|
|
|
|
Every sketch maps to a logical view in your scenario.
|
|
|
|
```
|
|
Scenario: S01-User-Registration
|
|
|
|
Logical Views:
|
|
1. Landing Page → [Sketch needed]
|
|
2. Signup Form → [Sketch needed]
|
|
3. Welcome Screen → [Sketch needed]
|
|
```
|
|
|
|
You're not sketching random pages. You're sketching the steps in a user journey.
|
|
|
|
This keeps your work connected to purpose.
|
|
|
|
---
|
|
|
|
## What to Capture
|
|
|
|
For each logical view, sketch:
|
|
|
|
### 1. Overall Layout
|
|
Where do major elements go?
|
|
- Header, main content, footer
|
|
- Navigation placement
|
|
- Primary action location
|
|
|
|
### 2. Visual Hierarchy
|
|
What's most important?
|
|
- Primary element (biggest, boldest)
|
|
- Secondary elements
|
|
- Supporting content
|
|
|
|
### 3. User Flow
|
|
Where does the eye travel?
|
|
- Entry point (where they look first)
|
|
- Path through the content
|
|
- Call to action
|
|
|
|
### 4. Key Interactions
|
|
What's clickable?
|
|
- Primary CTA
|
|
- Secondary actions
|
|
- Navigation elements
|
|
|
|
---
|
|
|
|
## Not Yet
|
|
|
|
At this stage, don't worry about:
|
|
|
|
- **Colors** — Too early
|
|
- **Final typography** — Too early
|
|
- **Exact spacing** — Too early
|
|
- **Animations** — Too early (that's Module 10)
|
|
- **Edge cases** — That's Module 11
|
|
|
|
Focus on structure and hierarchy. Everything else comes later.
|
|
|
|
---
|
|
|
|
## Quick Visualization Patterns
|
|
|
|
### Boxes and Labels
|
|
|
|
```
|
|
┌─────────────────────┐
|
|
│ HEADER │
|
|
├─────────────────────┤
|
|
│ │
|
|
│ [Form Area] │
|
|
│ │
|
|
├─────────────────────┤
|
|
│ [ CTA Button ] │
|
|
└─────────────────────┘
|
|
```
|
|
|
|
### Variants
|
|
|
|
Sketch the same screen 3 different ways. Label them A, B, C.
|
|
|
|
```
|
|
Variant A: Form centered, minimal
|
|
Variant B: Form left, benefits right
|
|
Variant C: Step-by-step wizard style
|
|
```
|
|
|
|
Pick the best. Or combine elements from multiple.
|
|
|
|
---
|
|
|
|
## The Freya Method
|
|
|
|
Freya helps you explore visually while staying connected to strategy:
|
|
|
|
> "Based on Felix's fear of complicated signups, what's the simplest layout?"
|
|
|
|
> "Here are 3 approaches — which resonates with your trigger map?"
|
|
|
|
> "I notice this sketch has 5 fields. Your scenario mentioned 'quick signup.' Which is right?"
|
|
|
|
She won't let you sketch in isolation from purpose.
|
|
|
|
---
|
|
|
|
## What's Next
|
|
|
|
In the next lesson, you'll learn specific techniques for sketching effectively — whether you're using paper, digital tools, or AI-generated options.
|
|
|
|
Then in the tutorial, you'll sketch the default states for your own scenario views with Freya's guidance.
|
|
|
|
---
|
|
|
|
**[Continue 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*
|