| name | frontend-design |
| description | Frontend design principles for marketing websites and landing pages. |
| allowed-tools | Read, Glob, Grep |
Frontend Design for Marketing
Design principles for converting marketing websites.
1. Landing Page Anatomy
Essential Sections
| Section | Purpose |
|---|
| Hero | Hook, value prop, CTA |
| Social Proof | Trust logos, numbers |
| Problem | Pain point resonance |
| Solution | How you help |
| Features | What you offer |
| Testimonials | Social proof |
| Pricing | Clear options |
| FAQ | Objection handling |
| Final CTA | Last push |
2. Color Psychology
| Color | Association | Use For |
|---|
| Blue | Trust, stability | Finance, tech |
| Green | Growth, health | Wellness, eco |
| Orange | Energy, action | CTAs |
| Purple | Premium, creative | Luxury, SaaS |
| Red | Urgency, passion | Sales, food |
| Black | Luxury, power | Premium |
Color Application
| Rule | Application |
|---|
| 60-30-10 | Primary-Secondary-Accent |
| CTA contrast | Stand out from page |
| Consistency | Same meaning everywhere |
3. Typography Best Practices
Font Pairing
| Type | Style | Example |
|---|
| Headlines | Bold, distinctive | Playfair, Poppins |
| Body | Clean, readable | Inter, Open Sans |
Readability
| Factor | Recommendation |
|---|
| Line length | 50-75 characters |
| Line height | 1.5-1.7 for body |
| Paragraph | 3-4 sentences max |
4. Visual Hierarchy
Attention Flow
1. Hero headline (largest)
2. Supporting image
3. Subheadline
4. CTA button
5. Secondary content
Creating Hierarchy
| Technique | Effect |
|---|
| Size | Bigger = more important |
| Color | Brand color = emphasis |
| Whitespace | Isolation = attention |
| Position | Top-left gets seen first |
5. Image Guidelines
Hero Images
| Do | Don't |
|---|
| Real photos | Generic stock |
| Show product in use | Empty product shots |
| People looking at CTA | People looking away |
| High quality | Low resolution |
Image Optimization
| Format | Use |
|---|
| WebP | Photos, complex images |
| SVG | Icons, illustrations |
| PNG | Transparency needed |
6. Form Design
Field Reduction
| Approach | Impact |
|---|
| 1 field (email only) | Highest conversion |
| 2-3 fields | Good balance |
| 4+ fields | Significant drop-off |
Form UX
| Element | Best Practice |
|---|
| Labels | Above field |
| Placeholders | Examples only |
| Errors | Inline, immediate |
| Submit | Action-oriented text |
7. Mobile Considerations
Touch Targets
| Element | Minimum Size |
|---|
| Buttons | 44x44px |
| Links | 44x44px tap area |
| Form fields | Full width |
Mobile Layout
| Desktop | Mobile |
|---|
| Multi-column | Single column |
| Hover effects | Tap feedback |
| Fixed nav | Hamburger |
8. Page Speed
Impact on Conversion
| Load Time | Effect |
|---|
| 1 second | Baseline |
| 3 seconds | -7% conversions |
| 5 seconds | -20% conversions |
Quick Wins
| Action | Impact |
|---|
| Compress images | High |
| Lazy loading | Medium |
| Minify CSS/JS | Medium |
| CDN | High |
9. Trust Elements
Placement Strategy
| Element | Where |
|---|
| Logos | Below hero |
| Security badges | Near forms |
| Testimonials | Before pricing |
| Guarantees | Near CTAs |
10. A/B Testing Priorities
High Impact (Test First)
| Element | Why |
|---|
| Headlines | Biggest attention grabber |
| CTAs | Direct conversion impact |
| Hero image | First impression |
| Social proof | Trust factor |
Lower Impact
| Element | Why |
|---|
| Button colors | Minor effect |
| Font choices | Subtle impact |
| Spacing | Minimal change |
Remember: Beautiful design that doesn't convert is just art. Always optimize for action.
