15 KiB

Raw Blame History

Sketch Text Strategy: Actual Text vs. Markers

Guidance for Creating WDS Sketches

The Two Approaches

1. Actual Text (Recommended for Headlines)

Draw readable text directly in sketch

┌─────────────────────────────────────┐
│                                     │
│    Every walk. on time.             │
│    Every time.                      │
│                                     │
│    [Get Started - Free Forever]    │
│                                     │
└─────────────────────────────────────┘

When to use:

Headlines (H1, H2, H3)
Button labels
Navigation items
CTAs (calls-to-action)
Any short, important text

Why: ✅ Agent can read and interpret text ✅ Provides content context ✅ Shows character count naturally ✅ Guides design decisions ✅ Can still be refined during specification

2. Horizontal Line Markers (For Body Text)

Draw lines to indicate text blocks

┌─────────────────────────────────────┐
│                                     │
│ ─────────────────────────────────── │ ← Body text
│ ─────────────────────────────────── │
│ ─────────────────────────────────── │
│ ─────────────────────────────────── │
│                                     │
└─────────────────────────────────────┘

When to use:

Body paragraphs
Long descriptions
Feature lists (when wording TBD)
Content where you want to show SIZE, not specific text

Why: ✅ Faster to sketch ✅ Shows font size (distance between lines) ✅ Shows font weight (line thickness) ✅ Indicates capacity without committing to content ✅ Focuses on layout, not copywriting

Mixed Approach (Recommended)

Combine both methods for best results:

┌──────────────────────────────────────────┐
│                                          │
│        Welcome to Dog Week               │  ← ACTUAL TEXT (H1)
│                                          │
│ ─────────────────────────────────────── │  ← LINE MARKERS
│ ─────────────────────────────────────── │  ← (Body paragraph)
│ ─────────────────────────────────────── │
│ ─────────────────────────────────────── │
│                                          │
│        [Start Planning]                  │  ← ACTUAL TEXT (CTA)
│                                          │
└──────────────────────────────────────────┘

Result:

Headlines provide content guidance
Body text shows sizing and capacity
Buttons show clear actions
Fast to sketch, still informative

Dog Week Example

Start Page Hero Sketch

┌─────────────────────────────────────────────┐
│                                             │
│     🐕 Dog Week                             │  ← Logo (actual)
│                          [Sign In]  SE ▼    │  ← Buttons (actual)
│                                             │
│                                             │
│       Every walk. on time.                  │  ← H1 (actual text)
│       Every time.                           │
│                                             │
│  ────────────────────────────────────────  │  ← Subtext (markers)
│  ────────────────────────────────────────  │
│                                             │
│  [start planning - free forever]            │  ← CTA (actual)
│                                             │
│  ┌───────────────────────────────────────┐ │
│  │                                       │ │
│  │      [Person with dog image]          │ │  ← Image placeholder
│  │                                       │ │
│  └───────────────────────────────────────┘ │
│                                             │
│  Never ask whose turn it is again           │  ← Small text (actual)
│                                             │
│  ─────────────────────────────────────────│  ← Feature description
│  ─────────────────────────────────────────│  ← (markers)
│  ─────────────────────────────────────────│
│                                             │
└─────────────────────────────────────────────┘

Agent Analysis

Agent reads:

Logo text: "Dog Week" → suggests as logo content
H1 actual text: "Every walk. on time. Every time." → suggests as starting headline
Marker analysis: 2 thin lines → body text, spacing matches icon size (~16-20px), ~120-140 chars
CTA actual text: "start planning - free forever" → suggests as button label
Small actual text: "Never ask whose turn it is again" → suggests as supporting text
Marker analysis: 3 thin lines → feature description, spacing matches icon size (~16-20px), ~180-210 chars

Agent output:

I found text in your sketch: "Every walk. on time. Every time."

Would you like to use this for the Primary Headline, or change it?

EN: Every walk. on time. Every time.
SE: [Your Swedish translation]

User can:

✅ Keep the sketch text
✅ Change it completely
✅ Refine it slightly

Technical Details for Markers

Line Thickness → Font Weight (Relative)

═══════════════════  ← Thickest = Bold (700)
───────────────────  ← Medium = Medium (500)
─────────────────────  ← Thinnest = Regular (400)

Compare relative thickness within the sketch, not absolute pixels.

Distance Between Lines → Font Size (Context-Based)

═══════════════════
      ↕ ~Button Height  ← H1 (~40-48px)
═══════════════════

───────────────────
    ↕ ~Icon Size        ← Body (~16-20px)
───────────────────

Use UI elements (buttons, icons, scrollbars) as scale references.

Complete Example

═══════════════════  ← Thickest lines in sketch
      ↕ ~Button Height
═══════════════════  ← Thickest lines in sketch

Analysis:

Thickness: Bold (relative to other text)
Distance: Matches button height (~40-48px)
Lines: 2
Capacity: ~50-60 chars

Agent Behavior

When Sketch Has Actual Text

Agent says:

I found text in your sketch: "Every walk. on time."

Content for Primary Headline:

EN: Every walk. on time.
SE:

(You can keep the sketch text or change it)

Benefits:

Pre-filled starting point
Still editable
Saves time
Provides context

When Sketch Has Line Markers

Agent says:

Text placeholder detected:
- 4 horizontal lines
- Line thickness: Thinnest → Regular weight
- Distance: Matches icon/scrollbar size → ~16-20px font
- Capacity: ~240-280 characters

Content for Feature Description:

Please provide content in one language, and I'll suggest translations!

EN:

User provides:

EN: Organize your family around dog care. Assign walks, track feeding schedules, and never miss a walk again.

Agent suggests:

Great! Here are translation suggestions:

SE: Organisera din familj kring hundvård. Tilldela promenader, spåra matscheman och missa aldrig en promenad igen.

Does this work, or would you like to adjust it?

Benefits:

Clear capacity guidance
Agent suggests translations
User reviews and confirms
Helps with content length

Workflow: From Analysis to Specification

When AI analyzes sketch text markers, the workflow is:

Step 1: AI Analyzes Sketch

Agent detects text markers and estimates properties:

Line thickness: Thicker than body text → Bold font weight
Spacing between pairs: Similar to button height → ~40-48px font size estimate
Line-height: ~1.2 (calculated from font size)
Character capacity: ~35 characters per line

Step 2: AI Presents Estimates with Reasoning

Agent shows analysis WITH explanation of how estimates were derived:

- **Style**:
  - Font weight: Bold (from thick line markers, relative to body text)
  - Font size: 42px (est. from spacing matching button height)
  - Line-height: 1.2 (est. calculated as font-size × 1.2)

Why show reasoning?

Designer understands how AI interpreted the sketch
Designer can judge if estimation logic makes sense
Makes it easy to adjust if sketch measurements were different
Builds trust through transparency

Step 3: Designer Confirms/Adjusts

Designer reviews estimates and either:

Confirms - "Yes, 42px based on button-height spacing is correct"
Adjusts - "Actually, the spacing is larger, make it 48px instead"
Overrides - "Ignore the sketch measurements, I want it to be 56px"

Step 4: Finalize Specification

Agent updates spec with confirmed values, removes estimation notes:

- **Style**:
  - Font weight: Bold
  - Font size: 48px
  - Line-height: 1.15

Clean, production-ready specification with no estimation artifacts.

Key Principle:

All estimated values are spelled out explicitly (not hidden)
Marked with (est.) label to indicate AI interpretation
Designer confirms or adjusts each estimated value
Label removed once designer specifies actual values

This ensures transparency about which values came from AI sketch analysis vs. designer specification.

Best Practices

✅ DO:

Use actual text for headlines
- Provides content direction
- Agent can read and suggest
- Still changeable during spec
Use markers for body text
- Shows sizing without committing
- Faster to sketch
- Focuses on layout
Mix both approaches
- Headlines = actual text
- Body = markers
- Best of both worlds
Keep sketch text informal
- It's a suggestion, not final
- Can be refined later
- Agent will ask to confirm/change

❌ DON'T:

Don't use Lorem Ipsum
- Not helpful for context
- Agent can't interpret
- Use real(ish) content or markers
Don't commit too early
- Sketch text is guidance
- Refinement happens in spec phase
- Stay flexible
Don't mix for same element
- Either actual text OR markers
- Not both for one text block
- Confuses analysis

Workflow Integration

During Sketching

Designer:

1. Draw page layout
2. Add ACTUAL TEXT for headlines/buttons
3. Add LINE MARKERS for body paragraphs
4. Show font weight (thickness)
5. Show font size (distance)

During Specification (Phase 4)

Agent:

1. Analyze sketch
2. Read any actual text found
3. Suggest sketch text as starting point
4. Analyze markers for sizing
5. Request final content
6. Allow refinement
7. Document in spec

User:

1. See sketch text as suggestion
2. Keep, change, or refine
3. Add translations
4. Confirm length fits capacity

Real Dog Week Flow

Sketch Shows:

Every walk. on time. Every time.  ← Actual text in sketch

Agent Says:

I found text in your sketch: "Every walk. on time. Every time."

Let me suggest translations...

Suggested content for Primary Headline:

EN: Every walk. on time. Every time.
SE: Varje promenad. i tid. Varje gång.

These are my suggestions. Do they work?

1. Use these translations
2. Adjust translations
3. Manual input

Choice [1/2/3]:

User Says:

1  ← Accepts!

Or refines:

2

SE: Varje promenad. Punktligt. Varje gång.  ← Adjusted

EN: Every walk. on time. Every time. ← Keeps it! SE: Varje promenad. i tid. Varje gång.


### Specification Result:

```markdown
#### Primary Headline
**OBJECT ID**: `start-hero-headline`
- **Component**: H1 heading
- **Position**: Center of hero
- **Style**: Bold, 42px, line-height 1.2
- **Content**:
  - EN: "Every walk. on time. Every time."
  - SE: "Varje promenad. i tid. Varje gång."

Result: Sketch text became final content! ✅

Summary

Element Type	Sketch Method	Agent Behavior
Headlines	Actual text	Reads & suggests as starting content
Buttons	Actual text	Reads & suggests as button label
Navigation	Actual text	Reads & suggests as nav items
Body paragraphs	Line markers	Analyzes for size/capacity, requests content
Descriptions	Line markers	Analyzes for size/capacity, requests content

Golden Rule:

Important/short text = Draw actual text
Long/placeholder text = Use line markers
Mix both for best results

Remember:

Sketch text is a suggestion, not final
Agent will ask to confirm or change
Refinement happens during specification
Stay flexible, iterate as needed

Use actual text for headlines, markers for body text! 📝✨

15 KiB Raw Blame History Unescape Escape