1# Banner Sizes & Art Direction Styles Reference
2 
3## Complete Banner Sizes
4 
5### Social Media
6| Platform | Type | Size (px) | Aspect Ratio |
7|----------|------|-----------|--------------|
8| Facebook | Cover (desktop) | 820 × 312 | ~2.6:1 |
9| Facebook | Cover (mobile) | 640 × 360 | ~16:9 |
10| Facebook | Event cover | 1920 × 1080 | 16:9 |
11| Twitter/X | Header | 1500 × 500 | 3:1 |
12| Twitter/X | Ad banner | 800 × 418 | ~2:1 |
13| LinkedIn | Company cover | 1128 × 191 | ~6:1 |
14| LinkedIn | Personal banner | 1584 × 396 | 4:1 |
15| YouTube | Channel art | 2560 × 1440 | 16:9 |
16| YouTube | Safe area | 1546 × 423 | ~3.7:1 |
17| Instagram | Stories | 1080 × 1920 | 9:16 |
18| Instagram | Post | 1080 × 1080 | 1:1 |
19| Pinterest | Pin | 1000 × 1500 | 2:3 |
20 
21### Web / Display Ads (Google Display Network)
22| Name | Size (px) | Notes |
23|------|-----------|-------|
24| Medium Rectangle | 300 × 250 | Highest CTR |
25| Leaderboard | 728 × 90 | Top of page |
26| Wide Skyscraper | 160 × 600 | Sidebar |
27| Half Page | 300 × 600 | Premium |
28| Large Rectangle | 336 × 280 | High performer |
29| Mobile Banner | 320 × 50 | Mobile default |
30| Large Mobile | 320 × 100 | Mobile hero |
31| Billboard | 970 × 250 | Desktop hero |
32 
33### Website
34| Type | Size (px) |
35|------|-----------|
36| Full-width hero | 1920 × 600–1080 |
37| Section banner | 1200 × 400 |
38| Blog header | 1200 × 628 |
39| Email header | 600 × 200 |
40 
41### Print
42| Type | Size |
43|------|------|
44| Roll-up | 850mm × 2000mm |
45| Step-and-repeat | 8ft × 8ft |
46| Vinyl outdoor | 6ft × 3ft |
47| Trade show | 33in × 78in |
48 
49## 22 Art Direction Styles
50 
511. **Minimalist** — White space dominant, single focal element, 1-2 colors, clean sans-serif
522. **Bold Typography** — Type IS the design; oversized, expressive letterforms fill canvas
533. **Gradient / Color Wash** — Smooth transitions, mesh gradients, chromatic blends
544. **Photo-Based** — Full-bleed photography with text overlay; hero lifestyle imagery
555. **Illustrated / Hand-Drawn** — Custom illustrations, bespoke icons, artisan feel
566. **Geometric / Abstract** — Shapes, lines, grids as primary visual elements
577. **Retro / Vintage** — Distressed textures, muted palettes, serif type, halftone dots
588. **Glassmorphism** — Frosted glass panels, blur backdrop, subtle border glow
599. **3D / Sculptural** — Rendered objects, depth, shadows; product-centric
6010. **Neon / Cyberpunk** — Dark backgrounds, glowing neon accents, high contrast
6111. **Duotone** — Two-color photo treatment; bold brand color overlay on image
6212. **Editorial / Magazine** — Grid-heavy layouts, pull quotes, journalistic composition
6313. **Collage / Mixed Media** — Cut-paper textures, photo cutouts, layered elements
6414. **Retro Futurism** — Space-age nostalgia, chrome, gradients, optimism
6515. **Expressive / Anti-Design** — Chaotic layouts, mixed fonts, deliberate "wrong" composition
6616. **Digi-Cute / Kawaii** — Rounded shapes, pastel gradients, pixel art, playful characters
6717. **Tactile / Sensory** — Puffy/squishy textures, hyper-real materials, embossed feel
6818. **Data / Infographic** — Stats front-and-center, charts, numbers as heroes
6919. **Dark Mode / Moody** — Near-black backgrounds, rich jewel tones, high contrast
7020. **Flat / Solid Color** — Single background color, clean icons, no gradients
7121. **Nature / Organic** — Earthy tones, botanical motifs, sustainable brand feel
7222. **Motion-Ready / Kinetic** — Designed for animation; layered elements, loopable
73 
74## Design Principles
75 
76### Visual Hierarchy (3-Zone Rule)
77- **Top**: Logo or main value prop
78- **Middle**: Supporting message + visuals
79- **Bottom**: CTA (button/QR/URL)
80 
81### Safe Zones
82- Critical content in central 70-80% of canvas
83- Avoid text/CTA within 50-100px of edges
84- YouTube: 1546 × 423px safe area inside 2560 × 1440
85- Meta/Instagram: central 80% to avoid UI chrome
86 
87### CTA Rules
88- One CTA per banner
89- High contrast vs background
90- Bottom-right placement (terminal area)
91- Min 44px height for mobile tap targets
92- Action verbs: "Get", "Start", "Download", "Claim"
93 
94### Typography
95- Max 2 typefaces per banner
96- Min 16px body, ≥32px headline (digital)
97- Min 4.5:1 contrast ratio
98- Max 7 words/line, 3 lines for ads
99 
100### Text-to-Image Ratio
101- Ads: under 20% text (Meta penalizes)
102- Social covers: 60/40 image-to-text
103- Print: 70pt+ headlines for 3-5m viewing distance
104 
105### Print Specs
106- 300 DPI minimum (150 DPI for large format)
107- 3-5mm bleed all sides
108- CMYK color mode
109- 1pt per foot viewing distance rule
110 
111## Pinterest Research Queries
112 
113Use these search queries on Pinterest for art direction references:
114- `[purpose] banner design [style]` (e.g., "social media banner minimalist")
115- `[platform] cover design inspiration` (e.g., "youtube channel art design")
116- `creative banner layout [industry]` (e.g., "creative banner layout tech startup")
117- `[style] graphic design 2026` (e.g., "gradient graphic design 2026")
118- `banner ad design [product type]` (e.g., "banner ad design saas")
119