7.4 KiB
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
- Sketch on paper or tablet
- Share photo with Freya
- Get strategic feedback connected to your personas
Path B: Not Yet Sketched
- Discuss the page with Freya
- Explore options together
- Sketch based on discussion
- 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:
- Overall layout — Where do major elements go?
- Visual hierarchy — What's most important?
- User flow — Where does the eye travel?
- 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:
- Identify the key logical views
- Visualize each one (use any entry point)
- Explore variants
- Discuss with Freya
Learn More
- Lesson 1: Visualize First — Why seeing comes before specifying
- Lesson 2: Sketching Techniques — Practical methods for all visualization approaches
- Lesson 3: Why Hand Sketching is Still King — The case for paper and tablet in the AI era
- Lesson 4: Image Sketching Best Practices — How to represent images in UI sketches
- Lesson 5: Sketch Text Strategy — Actual text vs. markers in sketches
- Lesson 6: AI Wireframe Generation — Using Nano Banana for wireframe exploration — what works, what doesn't
- Tutorial: Sketch Your Views — Hands-on practice with Freya
Next Module
Show how elements transform within each view — keyframe by keyframe.
Part of the WDS Course: From Designer to Linchpin