273 lines
7.6 KiB
Markdown
273 lines
7.6 KiB
Markdown
# 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
|
|
└──────────────┘
|
|
```
|
|
|
|
or
|
|
|
|
```
|
|
┌──────────────┐
|
|
│ ● ● │ ← 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:
|
|
|
|
1. **Look for rectangular containers** (image boundaries)
|
|
2. **Check for sketched content inside** (faces, landscapes, products, shapes)
|
|
3. **Interpret the sketch** to understand image purpose
|
|
4. **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! 🎨✨
|