119 lines
4.9 KiB
Markdown
119 lines
4.9 KiB
Markdown
# 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")
|