Initial commit

skills/youtube-thumbnail/references/design-requirements.md

@@ -0,0 +1,109 @@
+# YouTube Thumbnail Design Requirements
+
+## Critical Requirements (**MUST ALWAYS** Follow)
+
+### 1. **Pass The Glance Test** ⚡
+**The viewer must understand the thumbnail in 1 second or less.**
+
+- The full image must be comprehensible at a glance
+- No mental effort required to figure out what's going on
+- **Test criterion**: Would this be immediately clear when viewed at mobile size?
+- If the viewer's eye has to search or study the image, it **FAILS**
+
+### 2. **Spark Curiosity** 🎯
+**This is the #1 most important principle for clickable thumbnails.**
+
+- Create intrigue and tension in the viewer's mind
+- Make viewers feel compelled to click to resolve the curiosity
+- The thumbnail should make viewers want to know more
+- Without curiosity, other principles won't matter as much
+
+### 3. **Single Clear Focal Point** 👁️
+**The viewer's eye must be drawn to ONE point, not multiple competing elements.**
+
+- **NEVER** create thumbnails with multiple focal points
+- As soon as the eye needs to search for what to notice, it fails The Glance Test
+- One dominant element should immediately grab attention
+
+### 4. **Mobile-First Design** 📱
+**Most viewers see thumbnails small - design must work at small sizes.**
+
+- Always preview thumbnails at mobile/small size during design
+- Important details **MUST** remain visible when thumbnail is small
+- What looks good on a big monitor may fail on mobile
+- **Critical**: Don't let important details get lost at small sizes
+
+---
+
+## Text Guidelines
+
+### **NEVER:**
+- ❌ Repeat the video title in the thumbnail text (viewer already has that information)
+- ❌ Use too much text (breaks The Glance Test)
+- ❌ Use text that's too small to read on mobile devices
+
+### **ALWAYS:**
+- ✅ Use text that **complements** (not repeats) the video title
+- ✅ Ensure text is large enough to read at mobile thumbnail size
+- ✅ Keep text minimal and impactful
+- ✅ Test text readability at small sizes
+
+### **Best Practice - Short, Punchy Text:**
+- Use brief, impactful phrases that describe the video
+- Example: "10x Your Creative Production" (with visual emphasis like neon background highlights)
+- **Exception**: Slightly longer text is acceptable when there are minimal other elements and text takes up most of the space
+- Text should be descriptive and add value beyond the title
+
+---
+
+## Visual Composition
+
+### **AVOID:**
+- ❌ Clutter (multiple competing elements)
+- ❌ Images where nothing stands out
+- ❌ Complex compositions that require study to understand
+- ❌ Designs that take mental work to process
+
+### **PRIORITIZE:**
+- ✅ Clear, simple compositions
+- ✅ High contrast elements
+- ✅ Single dominant subject or element
+- ✅ Immediate visual clarity
+
+### **Performance Boosters:**
+
+#### 1. **Eye-Catching Graphics and Colors**
+- Use bold, vibrant colors that stand out
+- High contrast between elements
+- Graphics should be visually striking and attention-grabbing
+
+#### 2. **People (Especially Faces)**
+- **Faces perform exceptionally well** in thumbnails
+- Ideally feature someone from the video
+- Human faces create connection and draw attention
+- Facial expressions can convey emotion and intrigue
+
+---
+
+## Hierarchy of Importance
+
+1. **Spark Curiosity** - Without this, nothing else matters
+2. **Pass The Glance Test** - Just as important; all other principles serve this goal
+3. Single focal point, mobile optimization, and text guidelines - All support the above two
+
+---
+
+## Evaluation Checklist
+
+When evaluating or creating a thumbnail, ask:
+
+1. ✓ Can I understand this in 1 second? (Glance Test)
+2. ✓ Does this make me curious to learn more? (Curiosity)
+3. ✓ Is there ONE clear focal point? (Not multiple)
+4. ✓ Does this work at mobile size? (Mobile-first)
+5. ✓ If text is used: Does it complement (not repeat) the title?
+6. ✓ If text is used: Is it short, punchy, and readable at small sizes?
+7. ✓ Does it use eye-catching graphics and colors?
+8. ✓ Does it feature people (ideally faces from the video)?
+9. ✓ Is the composition simple and uncluttered?
+