# Banner Sizes & Art Direction Styles Reference

## Complete Banner Sizes

### Social Media
| Platform | Type | Size (px) | Aspect Ratio |
|----------|------|-----------|--------------|
| Facebook | Cover (desktop) | 820 × 312 | ~2.6:1 |
| Facebook | Cover (mobile) | 640 × 360 | ~16:9 |
| Facebook | Event cover | 1920 × 1080 | 16:9 |
| Twitter/X | Header | 1500 × 500 | 3:1 |
| Twitter/X | Ad banner | 800 × 418 | ~2:1 |
| LinkedIn | Company cover | 1128 × 191 | ~6:1 |
| LinkedIn | Personal banner | 1584 × 396 | 4:1 |
| YouTube | Channel art | 2560 × 1440 | 16:9 |
| YouTube | Safe area | 1546 × 423 | ~3.7:1 |
| Instagram | Stories | 1080 × 1920 | 9:16 |
| Instagram | Post | 1080 × 1080 | 1:1 |
| Pinterest | Pin | 1000 × 1500 | 2:3 |

### Web / Display Ads (Google Display Network)
| Name | Size (px) | Notes |
|------|-----------|-------|
| Medium Rectangle | 300 × 250 | Highest CTR |
| Leaderboard | 728 × 90 | Top of page |
| Wide Skyscraper | 160 × 600 | Sidebar |
| Half Page | 300 × 600 | Premium |
| Large Rectangle | 336 × 280 | High performer |
| Mobile Banner | 320 × 50 | Mobile default |
| Large Mobile | 320 × 100 | Mobile hero |
| Billboard | 970 × 250 | Desktop hero |

### Website
| Type | Size (px) |
|------|-----------|
| Full-width hero | 1920 × 600–1080 |
| Section banner | 1200 × 400 |
| Blog header | 1200 × 628 |
| Email header | 600 × 200 |

### Print
| Type | Size |
|------|------|
| Roll-up | 850mm × 2000mm |
| Step-and-repeat | 8ft × 8ft |
| Vinyl outdoor | 6ft × 3ft |
| Trade show | 33in × 78in |

## 22 Art Direction Styles

1. **Minimalist** — White space dominant, single focal element, 1-2 colors, clean sans-serif
2. **Bold Typography** — Type IS the design; oversized, expressive letterforms fill canvas
3. **Gradient / Color Wash** — Smooth transitions, mesh gradients, chromatic blends
4. **Photo-Based** — Full-bleed photography with text overlay; hero lifestyle imagery
5. **Illustrated / Hand-Drawn** — Custom illustrations, bespoke icons, artisan feel
6. **Geometric / Abstract** — Shapes, lines, grids as primary visual elements
7. **Retro / Vintage** — Distressed textures, muted palettes, serif type, halftone dots
8. **Glassmorphism** — Frosted glass panels, blur backdrop, subtle border glow
9. **3D / Sculptural** — Rendered objects, depth, shadows; product-centric
10. **Neon / Cyberpunk** — Dark backgrounds, glowing neon accents, high contrast
11. **Duotone** — Two-color photo treatment; bold brand color overlay on image
12. **Editorial / Magazine** — Grid-heavy layouts, pull quotes, journalistic composition
13. **Collage / Mixed Media** — Cut-paper textures, photo cutouts, layered elements
14. **Retro Futurism** — Space-age nostalgia, chrome, gradients, optimism
15. **Expressive / Anti-Design** — Chaotic layouts, mixed fonts, deliberate "wrong" composition
16. **Digi-Cute / Kawaii** — Rounded shapes, pastel gradients, pixel art, playful characters
17. **Tactile / Sensory** — Puffy/squishy textures, hyper-real materials, embossed feel
18. **Data / Infographic** — Stats front-and-center, charts, numbers as heroes
19. **Dark Mode / Moody** — Near-black backgrounds, rich jewel tones, high contrast
20. **Flat / Solid Color** — Single background color, clean icons, no gradients
21. **Nature / Organic** — Earthy tones, botanical motifs, sustainable brand feel
22. **Motion-Ready / Kinetic** — Designed for animation; layered elements, loopable

## Design Principles

### Visual Hierarchy (3-Zone Rule)
- **Top**: Logo or main value prop
- **Middle**: Supporting message + visuals
- **Bottom**: CTA (button/QR/URL)

### Safe Zones
- Critical content in central 70-80% of canvas
- Avoid text/CTA within 50-100px of edges
- YouTube: 1546 × 423px safe area inside 2560 × 1440
- Meta/Instagram: central 80% to avoid UI chrome

### CTA Rules
- One CTA per banner
- High contrast vs background
- Bottom-right placement (terminal area)
- Min 44px height for mobile tap targets
- Action verbs: "Get", "Start", "Download", "Claim"

### Typography
- Max 2 typefaces per banner
- Min 16px body, ≥32px headline (digital)
- Min 4.5:1 contrast ratio
- Max 7 words/line, 3 lines for ads

### Text-to-Image Ratio
- Ads: under 20% text (Meta penalizes)
- Social covers: 60/40 image-to-text
- Print: 70pt+ headlines for 3-5m viewing distance

### Print Specs
- 300 DPI minimum (150 DPI for large format)
- 3-5mm bleed all sides
- CMYK color mode
- 1pt per foot viewing distance rule

## Pinterest Research Queries

Use these search queries on Pinterest for art direction references:
- `[purpose] banner design [style]` (e.g., "social media banner minimalist")
- `[platform] cover design inspiration` (e.g., "youtube channel art design")
- `creative banner layout [industry]` (e.g., "creative banner layout tech startup")
- `[style] graphic design 2026` (e.g., "gradient graphic design 2026")
- `banner ad design [product type]` (e.g., "banner ad design saas")