7.6 KiB

Raw Blame History

WDS Sketching Best Practices: Images

How to represent images in UI sketches

✅ Recommended: Sketch the Actual Image Content

Why Sketch Real Content?

When you sketch what the image should actually show (rather than just "X" or "image here"), you:

Provide visual direction - Designer/developer understands image purpose
Enable AI interpretation - Agent can suggest appropriate image content
Guide art direction - Photographer/illustrator knows what's needed
Communicate intent - Stakeholders visualize the final design
Inspire creativity - More engaging than abstract placeholders

Image Sketching Techniques

1. Portrait/Profile Photos

Sketch a simple face:

┌──────────────┐
│   ◠  ◠       │  ← Simple eyes
│              │
│      ᵕ       │  ← Simple smile
└──────────────┘

┌──────────────┐
│   ●  ●       │  ← Dots for eyes
│              │
│    \_/       │  ← Smile
└──────────────┘

Purpose: Profile pictures, team photos, author avatars, user images

2. Hero Images / Backgrounds

Sketch landscape/scenery:

┌──────────────────────────┐
│                          │
│    /\   /\    /\         │  ← Mountains
│   /  \ /  \  /  \        │
│  /    X    \/    \       │
└──────────────────────────┘

Sketch clouds/sky:

┌──────────────────────────┐
│  ~   ~      ~            │
│    ~    ~      ~   ~     │  ← Soft clouds
│       ~           ~      │
│                          │
└──────────────────────────┘

Sketch abstract shapes:

┌──────────────────────────┐
│   ∿∿∿     ≈≈≈           │
│      ∿∿  ≈≈   ∿∿        │  ← Waves, organic shapes
│         ≈≈≈    ∿∿∿      │
└──────────────────────────┘

Purpose: Hero sections, full-width backgrounds, feature images

3. Product Images

Sketch the product outline:

┌──────────────┐
│   |‾‾‾‾|     │  ← Phone outline
│   |    |     │
│   | ●  |     │  ← Home button
│   |____|     │
└──────────────┘

┌──────────────┐
│   _____      │  ← Laptop screen
│  |     |     │
│  |_____|     │
│  '-----'     │  ← Keyboard
└──────────────┘

Purpose: Product photos, e-commerce images, feature showcases

4. Icons / Illustrations

Sketch simple icon shapes:

┌──────┐
│  ⚙   │  ← Settings gear
└──────┘

┌──────┐
│  ♥   │  ← Heart icon (favorites/likes)
└──────┘

┌──────┐
│  ✓   │  ← Checkmark (success)
└──────┘

Purpose: UI icons, feature illustrations, decorative graphics

5. Abstract/Decorative Images

Use soft, flowing shapes:

┌──────────────────────────┐
│    ∞                     │
│       ≋≋≋                │  ← Abstract flowing shapes
│           ⌇⌇             │
│              ∿∿∿         │
└──────────────────────────┘

Use geometric patterns:

┌──────────────────────────┐
│  ◆    ○    ▢             │
│    ▢    ◆    ○           │  ← Geometric pattern
│  ○    ▢    ◆             │
└──────────────────────────┘

Purpose: Background patterns, decorative elements, brand graphics

❌ Discouraged: Generic "X" Marker

Why avoid X markers?

┌──────────────┐
│      X       │  ← Generic, uninformative
└──────────────┘

Problems with X markers:

❌ No context - Doesn't communicate what image shows
❌ No direction - No guidance for content selection
❌ Intrusive - Visually distracting in sketch
❌ Uninspiring - Doesn't engage stakeholders
❌ Ambiguous - Could be mistaken for "delete" or error

Only use X if: Sketch is extremely rough/quick and image content is described elsewhere

WDS Detection Rules

AI Image Detection

When analyzing sketches, the AI should:

Look for rectangular containers (image boundaries)
Check for sketched content inside (faces, landscapes, products, shapes)
Interpret the sketch to understand image purpose
Route to image.md for specification

Example Detection

Sketch shows:

┌──────────────────────────┐
│    /\   /\    /\         │
│   /  \ /  \  /  \        │  ← Mountains sketched
│  /    X    \/    \       │
└──────────────────────────┘

AI interprets:

Rectangle container detected
Mountain/landscape sketch inside
Purpose: Hero background image showing outdoor/nature scene
Route to: image.md
Suggested content: Mountain landscape, outdoor scenery, nature photography

Benefits of Sketching Real Content

For Designers

✅ Communicate visual intent clearly
✅ Test composition and layout
✅ Provide art direction
✅ Inspire creative solutions

For AI Agents

✅ Understand image purpose from context
✅ Suggest appropriate image sources
✅ Recommend image dimensions and aspect ratios
✅ Generate meaningful alt text

For Developers

✅ Understand what image represents
✅ Know how to style and position image
✅ Select appropriate placeholder images
✅ Write meaningful alt text for accessibility

For Stakeholders

✅ Visualize final design better
✅ Provide meaningful feedback
✅ Understand design intent
✅ Approve with confidence

Quick Reference

Image Type	Sketch Technique	Example
Portrait/Face	Simple face with eyes and smile	◠ ◠ ᵕ
Landscape	Mountains, trees, horizon	/\ /\ /\
Sky/Clouds	Wavy cloud shapes	~ ~ ~
Product	Product outline/silhouette	Phone, laptop shape
Icon	Simple icon shape	⚙ ♥ ✓
Abstract	Flowing, organic shapes	∿ ≋ ∞
Geometric	Shapes and patterns	◆ ○ ▢

Summary

WDS Image Sketching Philosophy:

"Sketch what you see, not just where it goes."

Guidelines:

✅ Draw the actual content - Faces, landscapes, products
✅ Use soft, organic shapes - Clouds, waves for abstract images
✅ Keep it simple - Quick sketches are fine, detail level matches sketch fidelity
❌ Avoid generic X markers - Provides no useful context

Result: Better communication, clearer intent, more useful AI analysis! 🎨✨

7.6 KiB Raw Blame History