1---2name: frontend-design3description: Frontend design principles for marketing websites and landing pages.4---56# Frontend Design for Marketing78> Design principles for converting marketing websites.910---1112## 1. Landing Page Anatomy1314### Essential Sections1516| Section | Purpose |17|---------|---------|18| **Hero** | Hook, value prop, CTA |19| **Social Proof** | Trust logos, numbers |20| **Problem** | Pain point resonance |21| **Solution** | How you help |22| **Features** | What you offer |23| **Testimonials** | Social proof |24| **Pricing** | Clear options |25| **FAQ** | Objection handling |26| **Final CTA** | Last push |2728---2930## 2. Color Psychology3132| Color | Association | Use For |33|-------|------------|---------|34| **Blue** | Trust, stability | Finance, tech |35| **Green** | Growth, health | Wellness, eco |36| **Orange** | Energy, action | CTAs |37| **Purple** | Premium, creative | Luxury, SaaS |38| **Red** | Urgency, passion | Sales, food |39| **Black** | Luxury, power | Premium |4041### Color Application4243| Rule | Application |44|------|-------------|45| **60-30-10** | Primary-Secondary-Accent |46| **CTA contrast** | Stand out from page |47| **Consistency** | Same meaning everywhere |4849---5051## 3. Typography Best Practices5253### Font Pairing5455| Type | Style | Example |56|------|-------|---------|57| **Headlines** | Bold, distinctive | Playfair, Poppins |58| **Body** | Clean, readable | Inter, Open Sans |5960### Readability6162| Factor | Recommendation |63|--------|----------------|64| Line length | 50-75 characters |65| Line height | 1.5-1.7 for body |66| Paragraph | 3-4 sentences max |6768---6970## 4. Visual Hierarchy7172### Attention Flow7374```751. Hero headline (largest)762. Supporting image773. Subheadline784. CTA button795. Secondary content80```8182### Creating Hierarchy8384| Technique | Effect |85|-----------|--------|86| **Size** | Bigger = more important |87| **Color** | Brand color = emphasis |88| **Whitespace** | Isolation = attention |89| **Position** | Top-left gets seen first |9091---9293## 5. Image Guidelines9495### Hero Images9697| Do | Don't |98|----|-------|99| Real photos | Generic stock |100| Show product in use | Empty product shots |101| People looking at CTA | People looking away |102| High quality | Low resolution |103104### Image Optimization105106| Format | Use |107|--------|-----|108| **WebP** | Photos, complex images |109| **SVG** | Icons, illustrations |110| **PNG** | Transparency needed |111112---113114## 6. Form Design115116### Field Reduction117118| Approach | Impact |119|----------|--------|120| 1 field (email only) | Highest conversion |121| 2-3 fields | Good balance |122| 4+ fields | Significant drop-off |123124### Form UX125126| Element | Best Practice |127|---------|---------------|128| Labels | Above field |129| Placeholders | Examples only |130| Errors | Inline, immediate |131| Submit | Action-oriented text |132133---134135## 7. Mobile Considerations136137### Touch Targets138139| Element | Minimum Size |140|---------|--------------|141| Buttons | 44x44px |142| Links | 44x44px tap area |143| Form fields | Full width |144145### Mobile Layout146147| Desktop | Mobile |148|---------|--------|149| Multi-column | Single column |150| Hover effects | Tap feedback |151| Fixed nav | Hamburger |152153---154155## 8. Page Speed156157### Impact on Conversion158159| Load Time | Effect |160|-----------|--------|161| 1 second | Baseline |162| 3 seconds | -7% conversions |163| 5 seconds | -20% conversions |164165### Quick Wins166167| Action | Impact |168|--------|--------|169| Compress images | High |170| Lazy loading | Medium |171| Minify CSS/JS | Medium |172| CDN | High |173174---175176## 9. Trust Elements177178### Placement Strategy179180| Element | Where |181|---------|-------|182| **Logos** | Below hero |183| **Security badges** | Near forms |184| **Testimonials** | Before pricing |185| **Guarantees** | Near CTAs |186187---188189## 10. A/B Testing Priorities190191### High Impact (Test First)192193| Element | Why |194|---------|-----|195| Headlines | Biggest attention grabber |196| CTAs | Direct conversion impact |197| Hero image | First impression |198| Social proof | Trust factor |199200### Lower Impact201202| Element | Why |203|---------|-----|204| Button colors | Minor effect |205| Font choices | Subtle impact |206| Spacing | Minimal change |207208---209210> **Remember:** Beautiful design that doesn't convert is just art. Always optimize for action.
nguyenphp