Banner Sizes & Art Direction Styles Reference
Complete Banner Sizes
Social Media
| Platform | Type | Size (px) | Aspect Ratio |
|---|---|---|---|
| Cover (desktop) | 820 × 312 | ~2.6:1 | |
| Cover (mobile) | 640 × 360 | ~16:9 | |
| Event cover | 1920 × 1080 | 16:9 | |
| Twitter/X | Header | 1500 × 500 | 3:1 |
| Twitter/X | Ad banner | 800 × 418 | ~2:1 |
| Company cover | 1128 × 191 | ~6:1 | |
| Personal banner | 1584 × 396 | 4:1 | |
| YouTube | Channel art | 2560 × 1440 | 16:9 |
| YouTube | Safe area | 1546 × 423 | ~3.7:1 |
| Stories | 1080 × 1920 | 9:16 | |
| Post | 1080 × 1080 | 1:1 | |
| 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 |
| Type | Size |
|---|---|
| Roll-up | 850mm × 2000mm |
| Step-and-repeat | 8ft × 8ft |
| Vinyl outdoor | 6ft × 3ft |
| Trade show | 33in × 78in |
22 Art Direction Styles
- Minimalist — White space dominant, single focal element, 1-2 colors, clean sans-serif
- Bold Typography — Type IS the design; oversized, expressive letterforms fill canvas
- Gradient / Color Wash — Smooth transitions, mesh gradients, chromatic blends
- Photo-Based — Full-bleed photography with text overlay; hero lifestyle imagery
- Illustrated / Hand-Drawn — Custom illustrations, bespoke icons, artisan feel
- Geometric / Abstract — Shapes, lines, grids as primary visual elements
- Retro / Vintage — Distressed textures, muted palettes, serif type, halftone dots
- Glassmorphism — Frosted glass panels, blur backdrop, subtle border glow
- 3D / Sculptural — Rendered objects, depth, shadows; product-centric
- Neon / Cyberpunk — Dark backgrounds, glowing neon accents, high contrast
- Duotone — Two-color photo treatment; bold brand color overlay on image
- Editorial / Magazine — Grid-heavy layouts, pull quotes, journalistic composition
- Collage / Mixed Media — Cut-paper textures, photo cutouts, layered elements
- Retro Futurism — Space-age nostalgia, chrome, gradients, optimism
- Expressive / Anti-Design — Chaotic layouts, mixed fonts, deliberate "wrong" composition
- Digi-Cute / Kawaii — Rounded shapes, pastel gradients, pixel art, playful characters
- Tactile / Sensory — Puffy/squishy textures, hyper-real materials, embossed feel
- Data / Infographic — Stats front-and-center, charts, numbers as heroes
- Dark Mode / Moody — Near-black backgrounds, rich jewel tones, high contrast
- Flat / Solid Color — Single background color, clean icons, no gradients
- Nature / Organic — Earthy tones, botanical motifs, sustainable brand feel
- 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")