217 lines
4.7 KiB
Markdown
217 lines
4.7 KiB
Markdown
---
|
|
slug: hero-image-website
|
|
title: "Hero Images That Convert: Design Guide for Non-Designers"
|
|
author: nina
|
|
status: inbox
|
|
priority: MEDIUM
|
|
created: 2026-01-10
|
|
source: seo-research-additional-opportunities
|
|
note: "⚠️ Nina's style guide not yet created — hold until style guide complete"
|
|
---
|
|
|
|
# Idea
|
|
|
|
## Discovery
|
|
|
|
**Source:** Additional SEO research for Nina — 2026-01-10
|
|
**Evidence:**
|
|
- "hero image website" = 720 monthly searches
|
|
- KD: 17 (LOW — very achievable)
|
|
- Search intent: Informational/Commercial
|
|
- Target audience: Website owners, small business, designers, developers building landing pages
|
|
|
|
## Why This Matters
|
|
|
|
Design-focused opportunity:
|
|
- 720 searches = niche but targeted
|
|
- KD 17 = low competition
|
|
- Hero images = critical website element
|
|
- Design + conversion focus
|
|
- Nina's creative + UX expertise perfect fit
|
|
|
|
## Content Angle
|
|
|
|
**Title:** "Hero Images That Convert: Design Guide for Non-Designers"
|
|
|
|
**Nina's Approach:**
|
|
- Design principles simplified
|
|
- Conversion-focused (UX background)
|
|
- AI tool recommendations
|
|
- Real examples (good/bad)
|
|
- "You don't need a designer" empowerment
|
|
- Psychology of first impressions
|
|
|
|
**Structure:**
|
|
1. Opening: "Your hero image has 3 seconds to make an impression..."
|
|
2. Why hero images matter (psychology + conversion)
|
|
3. What makes a great hero image:
|
|
- Visual impact
|
|
- Brand alignment
|
|
- Message clarity
|
|
- Call-to-action support
|
|
4. Design principles simplified:
|
|
- Composition basics
|
|
- Color psychology
|
|
- Typography considerations
|
|
- Mobile responsiveness
|
|
5. Tool recommendations:
|
|
- Midjourney (quality)
|
|
- Leonardo AI (balance)
|
|
- Canva AI (accessible + text)
|
|
6. Workflow: Create hero image:
|
|
- Define message
|
|
- Visual concept
|
|
- AI generation
|
|
- Text integration
|
|
- Testing
|
|
7. Real examples analysis (what works/doesn't)
|
|
8. Common mistakes and fixes
|
|
9. A/B testing basics
|
|
10. Closing: "First impressions that convert"
|
|
|
|
## Why This Works for Nina
|
|
|
|
Perfect for her expertise:
|
|
- UX design background
|
|
- Conversion focus
|
|
- Design psychology
|
|
- Accessible content
|
|
- Visual analysis
|
|
- Empowering tone
|
|
|
|
## Keywords Cluster
|
|
|
|
| Keyword | Vol | KD | Priority |
|
|
|---------|-----|----|----------|
|
|
| hero image website | 720 | 17 | PRIMARY |
|
|
| website hero image | — | — | Synonym |
|
|
| hero section image | — | — | Related |
|
|
| website header image | — | — | Variant |
|
|
|
|
## Secondary Keywords
|
|
|
|
- "hero image design"
|
|
- "hero image examples"
|
|
- "website hero image best practices"
|
|
- "ai hero images"
|
|
|
|
## Design Principles
|
|
|
|
**Nina's UX Perspective:**
|
|
|
|
**Visual Impact:**
|
|
- Eye-catching but not overwhelming
|
|
- Relevant to message
|
|
- Professional quality
|
|
|
|
**Brand Alignment:**
|
|
- Color scheme consistency
|
|
- Style matching
|
|
- Voice reflection
|
|
|
|
**Message Clarity:**
|
|
- Supports headline
|
|
- Clear value proposition
|
|
- Not competing with text
|
|
|
|
**Conversion Support:**
|
|
- Directs attention to CTA
|
|
- Creates trust
|
|
- Encourages action
|
|
|
|
## Psychology Elements
|
|
|
|
Nina's approach includes:
|
|
- First impression psychology (3-second rule)
|
|
- Color impact on emotion
|
|
- Visual hierarchy for conversion
|
|
- Trust-building through imagery
|
|
- Mobile-first considerations
|
|
|
|
## Content Format
|
|
|
|
**Nina's Style:**
|
|
- Visual examples
|
|
- Good vs bad comparisons
|
|
- Design principle breakdowns
|
|
- Psychology insights
|
|
- Tool recommendations
|
|
- Step-by-step workflow
|
|
|
|
## Differentiation
|
|
|
|
Most hero image content:
|
|
- Generic design tips
|
|
- Designer-focused
|
|
- No conversion angle
|
|
|
|
Nina's angle:
|
|
- Conversion-focused (UX)
|
|
- Non-designer accessible
|
|
- Psychology insights
|
|
- AI tool integration
|
|
- Real example analysis
|
|
- Practical workflows
|
|
|
|
## Real Examples
|
|
|
|
Nina should analyze:
|
|
- SaaS landing pages
|
|
- E-commerce sites
|
|
- Portfolio sites
|
|
- Service businesses
|
|
- What works and why
|
|
- What fails and why
|
|
|
|
## Strategic Value
|
|
|
|
**Why This Article Matters:**
|
|
- KD 17 = very achievable
|
|
- Conversion focus = high value
|
|
- UX + creative = Nina's sweet spot
|
|
- Practical immediate application
|
|
- Can update with trends
|
|
|
|
## Notes
|
|
|
|
- ⚠️ **IMPORTANT:** Nina's style guide not yet created
|
|
- Hold until style guide complete
|
|
- Perfect UX + creative blend
|
|
- Conversion focus = Nina's strength
|
|
- Real analysis = educational value
|
|
|
|
## A/B Testing Section
|
|
|
|
Nina should cover basics:
|
|
- What to test (image variants)
|
|
- How to measure (conversion metrics)
|
|
- Simple tools (Google Optimize, etc.)
|
|
- Iteration approach
|
|
|
|
## Mobile Considerations
|
|
|
|
Critical for hero images:
|
|
- Vertical composition
|
|
- Text readability
|
|
- File size optimization
|
|
- Responsive behavior
|
|
|
|
## Related Content Opportunities
|
|
|
|
Can expand to:
|
|
- "Landing Page Hero Sections"
|
|
- "SaaS Hero Image Guide"
|
|
- "E-commerce Homepage Heroes"
|
|
- "Hero Section A/B Testing"
|
|
|
|
## Publication Priority
|
|
|
|
**MEDIUM — WHEN NINA IS READY**
|
|
|
|
Good mid-tier article:
|
|
- KD 17 (low)
|
|
- Design + UX focus
|
|
- Conversion angle
|
|
- Should come after easier wins
|
|
- Can reference in other content
|