244 lines
7.4 KiB
Markdown
244 lines
7.4 KiB
Markdown
# Module 09: Conceptual Sketching
|
|
|
|
**Time: 45 min | Agent: Freya | Phase: Design | Focus: UX**
|
|
|
|
---
|
|
|
|
## Visualize the Default State
|
|
|
|
You need to see it. How you get there is up to you.
|
|
|
|
This is **keyframe 0** — the default state of each logical view, what the user sees when the page first loads.
|
|
|
|
Everything that happens *after* (interactions, animations, state changes) comes in Module 10: Storyboarding.
|
|
|
|
---
|
|
|
|
## Why Visualize First?
|
|
|
|
You need to see it before you can specify it. Visualization is faster than words for spatial problems.
|
|
|
|
Sketching is one way to visualize. Not the only way.
|
|
|
|
- Where does this element go?
|
|
- How big should it be?
|
|
- What's the visual hierarchy?
|
|
- Does this layout make sense?
|
|
|
|
You can't answer these questions in a specification. You have to see it.
|
|
|
|
---
|
|
|
|
## The Conceptual Mindset
|
|
|
|
### Low Fidelity on Purpose
|
|
|
|
Rough visuals prevent attachment. If it looks finished, you'll defend it.
|
|
|
|
Keep it ugly. Keep it fast. Keep it flexible.
|
|
|
|
### Quantity Over Quality
|
|
|
|
First idea is rarely best. Explore 3-5 approaches before picking one.
|
|
|
|
### Think Out Loud
|
|
|
|
Visualize while talking through the scenario. What does the user see first? What draws their attention? Where do they click?
|
|
|
|
---
|
|
|
|
## 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.**
|
|
|
|
---
|
|
|
|
## The Collaborative Workflow
|
|
|
|
Working with Freya, you can take two paths:
|
|
|
|
**Path A: Already Sketched**
|
|
1. Sketch on paper or tablet
|
|
2. Share photo with Freya
|
|
3. Get strategic feedback connected to your personas
|
|
|
|
**Path B: Not Yet Sketched**
|
|
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.
|
|
|
|
---
|
|
|
|
## Ways to Visualize
|
|
|
|
You can send anything visual. All methods work. Use them interchangeably within a scenario or storyboard.
|
|
|
|
| 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. Doesn't matter — as long as it communicates the concept.
|
|
|
|
---
|
|
|
|
## 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.
|
|
|
|
---
|
|
|
|
## 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 spec says 3. Which is right?"
|
|
|
|
She keeps you connected to strategy while exploring form.
|
|
|
|
---
|
|
|
|
## What to Visualize
|
|
|
|
For each logical view in your scenario:
|
|
|
|
1. **Overall layout** — Where do major elements go?
|
|
2. **Visual hierarchy** — What's most important?
|
|
3. **User flow** — Where does the eye travel?
|
|
4. **Key interactions** — What's clickable?
|
|
|
|
---
|
|
|
|
## Not Yet
|
|
|
|
At this stage, don't worry about:
|
|
|
|
- Colors (too early)
|
|
- Final typography (too early)
|
|
- Exact spacing (too early)
|
|
- Animations (too early)
|
|
|
|
Those come in Visual Design (Module 14).
|
|
|
|
---
|
|
|
|
## Quick Visualization Patterns
|
|
|
|
Whatever method you use, these patterns communicate clearly.
|
|
|
|
### Boxes and Labels
|
|
|
|
```
|
|
┌─────────────────────┐
|
|
│ HEADER │
|
|
├─────────────────────┤
|
|
│ │
|
|
│ [Form Area] │
|
|
│ │
|
|
├─────────────────────┤
|
|
│ [ CTA Button ] │
|
|
└─────────────────────┘
|
|
```
|
|
|
|
### Variants
|
|
|
|
Sketch the same screen 3 different ways. Label them A, B, C. Pick the best.
|
|
|
|
---
|
|
|
|
## Output
|
|
|
|
Rough sketches showing the **default state** of each logical view in your scenario.
|
|
|
|
Not polished. Not pretty. Just clear enough to:
|
|
- Understand what the user sees first
|
|
- Know where key elements are positioned
|
|
- Serve as keyframe 0 for storyboarding
|
|
|
|
---
|
|
|
|
## Common Mistakes
|
|
|
|
| Mistake | Fix |
|
|
|---------|-----|
|
|
| Too polished | Keep it rough |
|
|
| Only one idea | Explore 3 variants |
|
|
| Designing in isolation | Reference your scenario |
|
|
| Starting with edge cases | Focus on default state |
|
|
| Including colors/typography | Save for Module 14 |
|
|
|
|
---
|
|
|
|
## Practice
|
|
|
|
Take one scenario from Module 08:
|
|
|
|
1. Identify the key logical views
|
|
2. Visualize each one (use any entry point)
|
|
3. Explore variants
|
|
4. Discuss with Freya
|
|
|
|
---
|
|
|
|
## Learn More
|
|
|
|
- **[Lesson 1: Visualize First](lesson-01-visualize-first.md)** — Why seeing comes before specifying
|
|
- **[Lesson 2: Sketching Techniques](lesson-02-sketching-techniques.md)** — Practical methods for all visualization approaches
|
|
- **[Lesson 3: Why Hand Sketching is Still King](lesson-03-why-hand-sketching.md)** — The case for paper and tablet in the AI era
|
|
- **[Lesson 4: Image Sketching Best Practices](lesson-04-image-sketching-best-practices.md)** — How to represent images in UI sketches
|
|
- **[Lesson 5: Sketch Text Strategy](lesson-05-sketch-text-strategy.md)** — Actual text vs. markers in sketches
|
|
- **[Lesson 6: AI Wireframe Generation](lesson-06-ai-wireframe-generation.md)** — Using Nano Banana for wireframe exploration — what works, what doesn't
|
|
- **[Tutorial: Sketch Your Views](tutorial-09.md)** — Hands-on practice with Freya
|
|
|
|
---
|
|
|
|
## Next Module
|
|
|
|
**[Module 10: Storyboarding →](../module-10-storyboarding/module-10-storyboarding-overview.md)**
|
|
|
|
Show how elements transform within each view — keyframe by keyframe.
|
|
|
|
---
|
|
|
|
*Part of the WDS Course: From Designer to Linchpin*
|