Landing Page Guide V2

Landing Page Guide V2

Overview

This skill enables creation of distinctive, high-converting landing pages that combine:

• Proven Conversion Framework: 11 essential elements from DESIGNNAS for high conversion rates
• Exceptional Design Quality: Bold aesthetic choices that create unforgettable brand experiences
• Production-Ready Code: Next.js 14+ with ShadCN UI, TypeScript, and performance optimization

Philosophy: A landing page must convert visitors AND make them remember your brand. Generic, template-looking pages fail at both. This skill ensures your landing pages are functionally effective and visually extraordinary.

When to Use This Skill

Use this skill when users request:

• Creation of landing pages, marketing pages, or product pages
• Next.js or React-based promotional websites
• Pages that need to convert visitors into customers AND stand out visually
• Professional marketing pages with exceptional design quality
• Landing pages that avoid generic "template" aesthetics
• Brand experiences that are both conversion-optimized and memorable

Design Thinking: Before You Code

Before implementing any landing page, commit to a BOLD aesthetic direction that aligns with the brand and product:

1. Understand Context

• Purpose: What problem does this product solve? Who is the target audience?
• Brand Personality: Is this brand playful, professional, luxury, minimalist, bold, technical?
• Industry: What visual language does this industry expect (or should we break)?
• Differentiation: What makes this brand unforgettable? What's the ONE thing visitors will remember?

2. Choose an Aesthetic Direction

Pick an extreme direction and commit fully. Examples:

Minimalist & Refined

• Brutally clean layouts, generous whitespace
• Sophisticated typography with large scale contrasts
• Monochromatic or limited color palette (2-3 colors max)
• Subtle micro-interactions, elegant transitions
• Examples: Luxury products, professional services, premium SaaS

Bold & Maximalist

• Rich, complex visual layers
• Dynamic animations and scroll effects
• Gradient meshes, textures, and overlapping elements
• Vibrant color palettes with high contrast
• Examples: Creative agencies, entertainment, youth brands

Retro-Futuristic

• Nostalgic elements with modern execution
• Geometric patterns, neon accents
• Glitch effects, scanlines, grain textures
• Monospace or display fonts with character
• Examples: Gaming, tech startups, creative tools

Organic & Natural

• Soft, flowing shapes and gradients
• Nature-inspired colors (earth tones, pastels)
• Smooth animations mimicking natural motion
• Rounded corners, soft shadows
• Examples: Wellness, sustainability, food

Editorial & Magazine

• Strong typographic hierarchy
• Grid-breaking asymmetric layouts
• Large, impactful imagery
• Bold use of whitespace and negative space
• Examples: Content platforms, media, education

Brutalist & Raw

• Unconventional layouts, intentional "ugly"
• System fonts or deliberately basic typography
• High contrast, limited color
• Minimal or no animations
• Examples: Art, fashion, anti-establishment brands

CRITICAL: Choose ONE clear direction. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity. Execute your chosen direction with precision and consistency across all 11 elements.

3. Define Your Design System

Before coding, define these core decisions:

Typography Choices

• Display Font: Choose something distinctive and memorable (NOT Inter, Roboto, Arial, or system fonts)
• Consider: Space Grotesk, Clash Display, Cabinet Grotesk, Syne, DM Serif Display, Zodiak, Fraunces, Archivo Black, Unbounded, Outfit
• Or use Google Fonts wisely: Playfair Display, Crimson Pro, Libre Baskerville, Epilogue, Plus Jakarta Sans
• NEVER converge on common choices - vary fonts across different projects
• Body Font: Refined, readable choice that complements display font
• Consider: DM Sans, General Sans, Switzer, Geist, Manrope, Karla, Work Sans
• Scale: Establish clear hierarchy (e.g., H1: 4rem → H2: 3rem → H3: 2rem → Body: 1rem)

Color Palette

• Dominant Color: Your primary brand color (60% usage)
• Accent Color: High-contrast color for CTAs (10% usage)
• Neutral Palette: Grays or earth tones (30% usage)
• Background Strategy: Solid, gradient, texture, or pattern?
• Define as CSS variables for consistency

Motion Strategy

• Page Load: Staggered reveals with animation-delay for hero elements
• Scroll Interactions: Fade-ups, parallax, or scroll-triggered animations?
• Hover States: Subtle scale, color shift, or dramatic transformations?
• CTA Animations: How do buttons attract attention without being annoying?

Spatial Approach

• Layout Style: Centered and symmetric? Asymmetric and dynamic? Grid-breaking?
• Spacing System: Tight and dense? Generous and airy?
• Section Flow: Traditional stacked? Diagonal? Overlapping?

The 11 Essential Elements Framework

Every effective landing page must include these 11 essential elements. These are based on DESIGNNAS's proven framework for high-converting landing pages.

Each element has TWO requirements:

1. Functional requirement (for conversion) - Must be included
2. Design excellence (for memorability) - Must be distinctive and beautiful

Element-by-Element Design Guide

1. URL with Keywords

Functional: SEO-optimized, descriptive URL structure Design: N/A (SEO-focused)

2. Company Logo (Header)

Functional: Brand identity placed prominently (top-left) Design Excellence:

• Consider animated logo on page load
• Sticky header with smooth scroll transitions
• Logo mark variation for different scroll states
• Header background: transparent → solid with backdrop blur
• Navigation typography that matches your display font choice

3. SEO-Optimized Title and Subtitle (Hero)

Functional: Clear value proposition with keywords Design Excellence:

• Typography: Make this MASSIVE and unforgettable (4rem-6rem+)
• Use your distinctive display font here
• Consider gradient text, outlined text, or text shadows for impact
• Animate title words with staggered fade-in (animation-delay)
• Subtitle should be 50% the size of title, different weight or font
• Add visual rhythm with line breaks and spacing

4. Primary CTA (Hero)

Functional: Main call-to-action button in hero section Design Excellence:

• Make it IMPOSSIBLE to miss: size, color contrast, position
• Avoid boring rectangles: consider pill shapes, unique borders, or geometric shapes
• Add micro-interactions: hover scale, shadow expansion, color shift
• Consider dual CTAs with primary/secondary hierarchy
• Entrance animation that draws the eye (delay after title)
• Add visual cues: arrows, icons, or pulsing effects

5. Social Proof (Hero)

Functional: Reviews, ratings, user statistics Design Excellence:

• Numbers should be HUGE and animated on load (count-up effect)
• Statistics cards with gradient backgrounds or subtle borders
• Customer avatars in overlapping circles
• Star ratings with custom styling (not default yellow stars)
• "As featured in" logos with proper spacing and opacity treatment
• Consider rotating testimonials or animated social proof carousel

6. Images or Videos (Media Section)

Functional: Visual demonstration of product/service Design Excellence:

• CRITICAL: Never use placeholder or generic images
• Product screenshots with device mockups (laptop/phone frames)
• Add depth: shadows, reflections, 3D tilt effects
• Consider: Floating screenshots, parallax scroll effects, video backgrounds
• Image reveal animations on scroll (fade-up, slide-in)
• For videos: Custom play button design, ambient background glow
• Grid layouts: Asymmetric, overlapping, or bento box style

7. Core Benefits/Features