Day 3 — How It Works

⏱️ Time needed: 30–45 minutes

🎯 Goal: Build a step-by-step section that shows visitors how easy the tool is to use.

📍 What’s Happening Today

You’ve told visitors what your tool does. Now you show them how — in three simple steps. This section reduces friction. It says: “This isn’t complicated. Look, it’s just 1-2-3.”

Think of it like the onboarding screens in a mobile app. Short, visual, confidence-building.

🧠 The Concept

A “How It Works” section typically:

Has 3 steps (occasionally 4, never more)
Uses numbers or a visual sequence to show progression
Keeps each step to one sentence
Often includes illustrations or screenshots

Three is the magic number. It feels manageable. More than three and people start skimming.

🚀 Let’s Go

Prompt 1: The Three Steps

Below the features section, add a "How It Works" section with 3 steps displayed horizontally:

Step 1: "Generate" — "Click the button to create a random color palette instantly."
Step 2: "Customize" — "Lock colors you love, shuffle the rest until it's perfect."
Step 3: "Use" — "Copy hex codes or save palettes for later. Done."

Each step should have:
- A large step number (like "01", "02", "03") in a bold, slightly faded style
- The step title in bold
- The description in regular weight
- A connecting line or arrow between steps to show progression

Add a section heading: "Three steps. That's it." Center everything.

Prompt 2: Add Visual Interest

Make the How It Works section more visually engaging:
- Add a subtle icon or small illustration above each step (or use emojis: 🎨 for Generate, 🔧 for Customize, ✨ for Use)
- Make the step numbers very large (like 64px) and use a light opacity so they sit behind the content as a decorative element
- Add a dotted or dashed line connecting the three steps horizontally to reinforce the sequence
- On mobile, stack the steps vertically with the connecting line running down the left side

Prompt 3: Background and Spacing

Give this section its own visual identity:
- Use a slightly different background — maybe a very soft colored tint (light blue or light purple) to distinguish it from the features section above
- Add generous padding (80-100px top and bottom)
- Make sure there's clear visual separation between this section and the ones above and below it

🎨 Design Principle: Progressive Disclosure

What you’re doing here is called progressive disclosure — revealing information in digestible chunks rather than all at once. Your landing page does this naturally:

Hero → “Here’s what this is” (the hook)
Features → “Here’s what it does” (the details)
How It Works → “Here’s how easy it is” (the reassurance)

Each section answers the next logical question a visitor would have. You’re guiding them down the page like you’d guide them through a user flow.

🎁 Bonus: Animated Steps

Add a subtle animation so the three steps fade in one by one as the user scrolls down to this section. Each step should appear with a slight delay after the previous one (stagger them by about 200ms). Use a gentle fade-up effect.

💡 Scroll-triggered animations make a page feel alive without requiring the user to click anything. The content reveals itself as they explore. We’ll go deeper on this in Day 8.

💡 What You Learned Today

How to build a step-by-step sequence layout
How to use visual connectors (lines, arrows) to show progression
The concept of progressive disclosure — revealing info in the right order
How section backgrounds create visual rhythm on a long page

⏭️ Tomorrow

You’ll add social proof — testimonials from (fictional) users that build trust and credibility.

🎯 Checkpoint: You should have a three-step “How It Works” section with clear numbering, short descriptions, and visual connectors between steps. If the steps don’t feel connected, try: “The three steps feel like separate cards rather than a sequence. Can you add a visual connector — like a dashed line or arrow — between them to show progression?”