# Frontend Design

> Frontend design principles for marketing websites and landing pages.

- Skill: `nguyenphp/frontend-design` (Agent Skill, multi-file: 10 files)
- Install (CLI): `npx skillmds@latest add nguyenphp/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nguyenphp/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: nguyenphp (https://skillmd.com/u/nguyenphp)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nguyenphp/frontend-design

---


# 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.