init

.opencode/skills/design/references/banner-sizes-and-styles.md

@@ -0,0 +1,118 @@
+# 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")