251 lines
5.0 KiB
Markdown
251 lines
5.0 KiB
Markdown
# 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*
|