Graphic Design for Digital Media

Design principles for thumbnails, feature images, and social media graphics.

tools-only Updated Sep 29, 2026 7 repo stars

Coding & Dev Tools

Install

Press C to copy

$ npx skillmds@latest add tools-only/graphic-design-for-digital-media

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

＋ Add to plugin

README badge

[![SkillMD](https://skillmd.com/badge/tools-only/graphic-design-for-digital-media.svg)](https://skillmd.com/skills/tools-only/graphic-design-for-digital-media)

Trust & safety

2 of 3 audits passed

Last audited Sep 23, 2026 · commit 2c2655f

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

Graphic Design for Digital Media

Design principles for thumbnails, feature images, and social media graphics.

Table of Contents

Typography
Visual Hierarchy
Layout & Composition
Platform-Specific Guidelines
Thumbnail Best Practices

1. Typography

Font Categories

Category	Characteristics	Use For	Prompt Keywords
Sans-serif	Clean, modern, readable	Headlines, UI, tech	"bold sans-serif", "Helvetica style"
Serif	Traditional, elegant, trustworthy	Body text, luxury	"elegant serif", "Times style"
Display	Decorative, attention-grabbing	Headlines only	"display font", "decorative type"
Script	Handwritten, personal	Accents, signatures	"script font", "handwritten"
Monospace	Technical, code-like	Tech, data	"monospace", "code font"

Typography Rules

Rule	Guideline
Font limit	Max 2 fonts per design (1 heading + 1 body)
Size contrast	Headlines 2-3x larger than body
Weight contrast	Bold headlines, regular body
Line spacing	1.4-1.6x font size for readability
Letter spacing	Tighter for headlines, normal for body

Text Readability

Background	Text Color	Contrast
Light	Dark text	High contrast
Dark	Light text	High contrast
Busy image	Text with shadow/stroke/box	Added contrast
Gradient	Solid color area for text	Clear zone

Text Effects for Images

Effect	When to Use	Prompt Keywords
Drop shadow	Text over varied backgrounds	"text with drop shadow"
Outline/Stroke	High visibility needed	"outlined text", "text with stroke"
Background box	Complex backgrounds	"text in box", "label style"
Gradient text	Modern, dynamic feel	"gradient text"
3D text	Playful, attention-grabbing	"3D text", "extruded text"

2. Visual Hierarchy

Hierarchy Levels

1. PRIMARY   → Eye goes here first (largest, boldest, most contrast)
2. SECONDARY → Supporting information (medium size, less bold)
3. TERTIARY  → Details, fine print (smallest, subtle)

Creating Hierarchy

Method	How It Works
Size	Larger = more important
Weight	Bolder = more important
Color	Brighter/contrasting = more important
Position	Top-left, center = more attention
Isolation	White space around = more focus
Depth	Foreground = more important

F-Pattern vs Z-Pattern

Pattern	Description	Use For
F-Pattern	Top → left side scan	Text-heavy, articles
Z-Pattern	Top-left → right → bottom-left → right	Minimal text, ads

Focal Point Techniques

Technique	Description	Prompt Keywords
Contrast	Brightest/darkest area	"high contrast focal point"
Isolation	Subject alone with space	"isolated subject", "negative space"
Leading lines	Lines point to subject	"leading lines to subject"
Framing	Elements surround subject	"natural frame", "framed subject"
Blur	Background soft, subject sharp	"shallow depth of field"

3. Layout & Composition

Grid Systems

Grid	Structure	Best For
Rule of Thirds	3x3 grid, place at intersections	Photos, thumbnails
Golden Ratio	1:1.618 spiral	Elegant compositions
Center	Subject in middle	Symmetry, impact
Asymmetric	Off-center balance	Dynamic, modern

Safe Zones

┌─────────────────────────────┐
│  ← 10% margin on all sides →│
│  ┌─────────────────────┐    │
│  │                     │    │
│  │   SAFE ZONE         │    │
│  │   (Key content)     │    │
│  │                     │    │
│  └─────────────────────┘    │
│                             │
└─────────────────────────────┘

Why safe zones matter:

Platform UI overlays (play buttons, duration)
Mobile cropping
Social media preview crops

Balance Types

Type	Description	Feel
Symmetrical	Mirror left/right	Formal, stable, traditional
Asymmetrical	Visual weight balanced	Dynamic, modern, interesting
Radial	Elements around center	Focus, energy, movement

White Space (Negative Space)

Amount	Effect	Use For
Minimal	Busy, energetic, overwhelming	Sales, urgency
Moderate	Balanced, professional	Most designs
Generous	Elegant, premium, calm	Luxury, minimal

4. Platform-Specific Guidelines

YouTube Thumbnails

Aspect	Specification
Size	1280 x 720 px (16:9)
Min width	640 px
Max file	2 MB
Format	JPG, PNG, GIF

Best Practices:

Face with emotion (surprise, excitement)
3-4 words max, large text
Bright, saturated colors
High contrast
Avoid bottom-right (duration overlay)
Consistent branding elements

Blog/Article Feature Images

Aspect	Specification
Recommended	1200 x 630 px (1.91:1)
Alternative	1200 x 675 px (16:9)
WordPress	Theme-dependent, check settings

Best Practices:

Clear visual metaphor for topic
Space for title overlay if needed
Works in small previews
Consistent style across posts

Social Media Sizes

Platform	Post Image	Story/Reel
Instagram	1080 x 1080 (1:1)	1080 x 1920 (9:16)
Facebook	1200 x 630 (1.91:1)	1080 x 1920 (9:16)
Twitter/X	1200 x 675 (16:9)	-
LinkedIn	1200 x 627 (1.91:1)	-
Pinterest	1000 x 1500 (2:3)	-
TikTok	-	1080 x 1920 (9:16)

5. Thumbnail Best Practices

The ABCD Formula

Element	Description
A - Attention	Bold colors, faces, contrast
B - Branding	Consistent style, recognizable
C - Clarity	Clear message, readable text
D - Desire	Emotional hook, curiosity gap

Face Psychology

Expression	Effect	CTR Impact
Surprise	Curiosity, intrigue	High
Excitement	Energy, positivity	High
Concern	Problem/solution	Medium-High
Neutral	Professional but less engaging	Low

Color Psychology for Thumbnails

Color	Association	Use For
Red	Urgency, excitement, passion	Alerts, action
Yellow	Optimism, attention, warning	Highlights, callouts
Blue	Trust, calm, professional	Tech, business
Green	Growth, money, nature	Finance, health
Orange	Energy, creativity, fun	Entertainment
Purple	Luxury, creativity, mystery	Premium, creative
Black	Sophistication, power	Luxury, serious
White	Clean, minimal, space	Modern, tech

Text on Thumbnails

Rule	Guideline
Word count	3-5 words maximum
Font size	Readable at 100px width
Position	Avoid center (face goes there)
Contrast	Use stroke/shadow on busy backgrounds
Keywords	Front-load important words

Thumbnail Composition Templates

Template 1: Face + Text

┌─────────────────────┐
│ BIG      │          │
│ TEXT     │  FACE    │
│ HERE     │  (1/3)   │
│ (2/3)    │          │
└─────────────────────┘

Template 2: Before/After

┌─────────────────────┐
│  BEFORE  │  AFTER   │
│          │          │
│  (bad)   │  (good)  │
│          │          │
└─────────────────────┘

Template 3: Number + Visual

┌─────────────────────┐
│                     │
│   "7"    VISUAL     │
│  (big)   CONTENT    │
│                     │
└─────────────────────┘

Template 4: Question Hook

┌─────────────────────┐
│                     │
│   "Why does         │
│    X happen?"       │
│        + visual     │
└─────────────────────┘

Quick Reference

Thumbnail Checklist

□ Clear at 100px width (mobile preview)
□ Face visible and expressive (if using)
□ Text readable with contrast
□ 3-5 words maximum
□ Bright, saturated colors
□ Avoids platform UI zones
□ Consistent with brand style
□ Creates curiosity/emotion

Common Mistakes

Mistake	Fix
Too much text	Reduce to 3-5 words
Low contrast	Add shadow/stroke to text
Cluttered	Use negative space
Small text	Min 30% of thumbnail height
Boring colors	Increase saturation
No focal point	Apply hierarchy principles
Ignoring safe zones	Keep content in center 80%

Prompt Template for Thumbnails

[COMPOSITION]: Face on right third, text on left
[SUBJECT]: [person/object description] with [expression/state]
[TEXT]: Large bold "[KEYWORD]" text with [color] outline
[BACKGROUND]: [simple/gradient/blurred] in [color scheme]
[STYLE]: YouTube thumbnail style, high contrast, saturated colors
[TECHNICAL]: 16:9 aspect ratio, clean composition, professional

Example Thumbnail Prompts

Tutorial Thumbnail:

YouTube thumbnail showing excited young professional pointing at
floating "5 TIPS" text with yellow glow effect.
Clean blue gradient background, high contrast.
Bold white text with black outline, readable at small size.
Professional, energetic, educational style.

Before/After Thumbnail:

Split-screen comparison thumbnail.
Left side: messy spreadsheet, red tint, "BEFORE" label.
Right side: organized dashboard, green tint, "AFTER" label.
Bold dividing line in center.
Clean, professional, high contrast.

Reaction Thumbnail:

Close-up face with surprised expression, mouth open, eyes wide.
Large red "WOW!" text with white outline on left side.
Blurred colorful background.
YouTube thumbnail style, highly saturated, attention-grabbing.

---name: graphic-design-for-digital-mediadescription: Design principles for thumbnails, feature images, and social media graphics.---# Graphic Design for Digital MediaDesign principles for thumbnails, feature images, and social media graphics.## Table of Contents1. [Typography](#1-typography)2. [Visual Hierarchy](#2-visual-hierarchy)3. [Layout & Composition](#3-layout--composition)4. [Platform-Specific Guidelines](#4-platform-specific-guidelines)5. [Thumbnail Best Practices](#5-thumbnail-best-practices)---## 1. Typography### Font Categories| Category | Characteristics | Use For | Prompt Keywords ||----------|-----------------|---------|-----------------|| **Sans-serif** | Clean, modern, readable | Headlines, UI, tech | "bold sans-serif", "Helvetica style" || **Serif** | Traditional, elegant, trustworthy | Body text, luxury | "elegant serif", "Times style" || **Display** | Decorative, attention-grabbing | Headlines only | "display font", "decorative type" || **Script** | Handwritten, personal | Accents, signatures | "script font", "handwritten" || **Monospace** | Technical, code-like | Tech, data | "monospace", "code font" |### Typography Rules| Rule | Guideline ||------|-----------|| **Font limit** | Max 2 fonts per design (1 heading + 1 body) || **Size contrast** | Headlines 2-3x larger than body || **Weight contrast** | Bold headlines, regular body || **Line spacing** | 1.4-1.6x font size for readability || **Letter spacing** | Tighter for headlines, normal for body |### Text Readability| Background | Text Color | Contrast ||------------|------------|----------|| Light | Dark text | High contrast || Dark | Light text | High contrast || Busy image | Text with shadow/stroke/box | Added contrast || Gradient | Solid color area for text | Clear zone |### Text Effects for Images| Effect | When to Use | Prompt Keywords ||--------|-------------|-----------------|| **Drop shadow** | Text over varied backgrounds | "text with drop shadow" || **Outline/Stroke** | High visibility needed | "outlined text", "text with stroke" || **Background box** | Complex backgrounds | "text in box", "label style" || **Gradient text** | Modern, dynamic feel | "gradient text" || **3D text** | Playful, attention-grabbing | "3D text", "extruded text" |---## 2. Visual Hierarchy### Hierarchy Levels```1. PRIMARY → Eye goes here first (largest, boldest, most contrast)2. SECONDARY → Supporting information (medium size, less bold)3. TERTIARY → Details, fine print (smallest, subtle)```### Creating Hierarchy| Method | How It Works ||--------|--------------|| **Size** | Larger = more important || **Weight** | Bolder = more important || **Color** | Brighter/contrasting = more important || **Position** | Top-left, center = more attention || **Isolation** | White space around = more focus || **Depth** | Foreground = more important |### F-Pattern vs Z-Pattern| Pattern | Description | Use For ||---------|-------------|---------|| **F-Pattern** | Top → left side scan | Text-heavy, articles || **Z-Pattern** | Top-left → right → bottom-left → right | Minimal text, ads |### Focal Point Techniques| Technique | Description | Prompt Keywords ||-----------|-------------|-----------------|| **Contrast** | Brightest/darkest area | "high contrast focal point" || **Isolation** | Subject alone with space | "isolated subject", "negative space" || **Leading lines** | Lines point to subject | "leading lines to subject" || **Framing** | Elements surround subject | "natural frame", "framed subject" || **Blur** | Background soft, subject sharp | "shallow depth of field" |---## 3. Layout & Composition### Grid Systems| Grid | Structure | Best For ||------|-----------|----------|| **Rule of Thirds** | 3x3 grid, place at intersections | Photos, thumbnails || **Golden Ratio** | 1:1.618 spiral | Elegant compositions || **Center** | Subject in middle | Symmetry, impact || **Asymmetric** | Off-center balance | Dynamic, modern |### Safe Zones```┌─────────────────────────────┐│ ← 10% margin on all sides →││ ┌─────────────────────┐ ││ │ │ ││ │ SAFE ZONE │ ││ │ (Key content) │ ││ │ │ ││ └─────────────────────┘ ││ │└─────────────────────────────┘```**Why safe zones matter:**- Platform UI overlays (play buttons, duration)- Mobile cropping- Social media preview crops### Balance Types| Type | Description | Feel ||------|-------------|------|| **Symmetrical** | Mirror left/right | Formal, stable, traditional || **Asymmetrical** | Visual weight balanced | Dynamic, modern, interesting || **Radial** | Elements around center | Focus, energy, movement |### White Space (Negative Space)| Amount | Effect | Use For ||--------|--------|---------|| **Minimal** | Busy, energetic, overwhelming | Sales, urgency || **Moderate** | Balanced, professional | Most designs || **Generous** | Elegant, premium, calm | Luxury, minimal |---## 4. Platform-Specific Guidelines### YouTube Thumbnails| Aspect | Specification ||--------|---------------|| **Size** | 1280 x 720 px (16:9) || **Min width** | 640 px || **Max file** | 2 MB || **Format** | JPG, PNG, GIF |**Best Practices:**- Face with emotion (surprise, excitement)- 3-4 words max, large text- Bright, saturated colors- High contrast- Avoid bottom-right (duration overlay)- Consistent branding elements### Blog/Article Feature Images| Aspect | Specification ||--------|---------------|| **Recommended** | 1200 x 630 px (1.91:1) || **Alternative** | 1200 x 675 px (16:9) || **WordPress** | Theme-dependent, check settings |**Best Practices:**- Clear visual metaphor for topic- Space for title overlay if needed- Works in small previews- Consistent style across posts### Social Media Sizes| Platform | Post Image | Story/Reel ||----------|------------|------------|| **Instagram** | 1080 x 1080 (1:1) | 1080 x 1920 (9:16) || **Facebook** | 1200 x 630 (1.91:1) | 1080 x 1920 (9:16) || **Twitter/X** | 1200 x 675 (16:9) | - || **LinkedIn** | 1200 x 627 (1.91:1) | - || **Pinterest** | 1000 x 1500 (2:3) | - || **TikTok** | - | 1080 x 1920 (9:16) |---## 5. Thumbnail Best Practices### The ABCD Formula| Element | Description ||---------|-------------|| **A - Attention** | Bold colors, faces, contrast || **B - Branding** | Consistent style, recognizable || **C - Clarity** | Clear message, readable text || **D - Desire** | Emotional hook, curiosity gap |### Face Psychology| Expression | Effect | CTR Impact ||------------|--------|------------|| **Surprise** | Curiosity, intrigue | High || **Excitement** | Energy, positivity | High || **Concern** | Problem/solution | Medium-High || **Neutral** | Professional but less engaging | Low |### Color Psychology for Thumbnails| Color | Association | Use For ||-------|-------------|---------|| **Red** | Urgency, excitement, passion | Alerts, action || **Yellow** | Optimism, attention, warning | Highlights, callouts || **Blue** | Trust, calm, professional | Tech, business || **Green** | Growth, money, nature | Finance, health || **Orange** | Energy, creativity, fun | Entertainment || **Purple** | Luxury, creativity, mystery | Premium, creative || **Black** | Sophistication, power | Luxury, serious || **White** | Clean, minimal, space | Modern, tech |### Text on Thumbnails| Rule | Guideline ||------|-----------|| **Word count** | 3-5 words maximum || **Font size** | Readable at 100px width || **Position** | Avoid center (face goes there) || **Contrast** | Use stroke/shadow on busy backgrounds || **Keywords** | Front-load important words |### Thumbnail Composition Templates**Template 1: Face + Text**```┌─────────────────────┐│ BIG │ ││ TEXT │ FACE ││ HERE │ (1/3) ││ (2/3) │ │└─────────────────────┘```**Template 2: Before/After**```┌─────────────────────┐│ BEFORE │ AFTER ││ │ ││ (bad) │ (good) ││ │ │└─────────────────────┘```**Template 3: Number + Visual**```┌─────────────────────┐│ ││ "7" VISUAL ││ (big) CONTENT ││ │└─────────────────────┘```**Template 4: Question Hook**```┌─────────────────────┐│ ││ "Why does ││ X happen?" ││ + visual │└─────────────────────┘```---## Quick Reference### Thumbnail Checklist```□ Clear at 100px width (mobile preview)□ Face visible and expressive (if using)□ Text readable with contrast□ 3-5 words maximum□ Bright, saturated colors□ Avoids platform UI zones□ Consistent with brand style□ Creates curiosity/emotion```### Common Mistakes| Mistake | Fix ||---------|-----|| Too much text | Reduce to 3-5 words || Low contrast | Add shadow/stroke to text || Cluttered | Use negative space || Small text | Min 30% of thumbnail height || Boring colors | Increase saturation || No focal point | Apply hierarchy principles || Ignoring safe zones | Keep content in center 80% |### Prompt Template for Thumbnails```[COMPOSITION]: Face on right third, text on left[SUBJECT]: [person/object description] with [expression/state][TEXT]: Large bold "[KEYWORD]" text with [color] outline[BACKGROUND]: [simple/gradient/blurred] in [color scheme][STYLE]: YouTube thumbnail style, high contrast, saturated colors[TECHNICAL]: 16:9 aspect ratio, clean composition, professional```### Example Thumbnail Prompts**Tutorial Thumbnail:**```YouTube thumbnail showing excited young professional pointing atfloating "5 TIPS" text with yellow glow effect.Clean blue gradient background, high contrast.Bold white text with black outline, readable at small size.Professional, energetic, educational style.```**Before/After Thumbnail:**```Split-screen comparison thumbnail.Left side: messy spreadsheet, red tint, "BEFORE" label.Right side: organized dashboard, green tint, "AFTER" label.Bold dividing line in center.Clean, professional, high contrast.```**Reaction Thumbnail:**```Close-up face with surprised expression, mouth open, eyes wide.Large red "WOW!" text with white outline on left side.Blurred colorful background.YouTube thumbnail style, highly saturated, attention-grabbing.```

tools-only/X-Skills/tree/main/content-creation/1101-graphic-design_5f895ac4 commit 2c2655f150

Frequently asked questions

npx skillmds@latest add tools-only/graphic-design-for-digital-media