Building a Web Evolution Timeline - Tutorial

What You'll Build

Timelines are perfect for showing evolution, historical events, or project milestones. In this tutorial, you'll create a web evolution timeline with:

A horizontal timeline spine
Era cards for Web 1.0, 2.0, and 3.0
Date markers along the timeline
Technology icons and descriptions

Web Evolution Timeline Preview — The final web evolution timeline you'll create

The Timeline Pattern

Era	Years	Color	Technologies
Web 1.0	1991-2004	Gray/Blue	Static HTML, Tables, Frames
Web 2.0	2004-2020	Green/Cyan	AJAX, Social Media, Mobile
Web 3.0	2020+	Purple/Pink	Blockchain, AI, Decentralized

Step 1: Create the Timeline Spine

The spine is a horizontal line that runs through the center of your timeline.

Add the Central Line

{
  "id": "timeline-spine",
  "type": "line",
  "x": 50,
  "y": 400,
  "w": 1200,
  "h": 0,
  "options": {
    "stroke": "slate.400",
    "strokeWidth": 3
  }
}

Step 2: Add Era Markers

Use ellipses or circles as milestone markers along the timeline.

Create Timeline Nodes

// Web 1.0 marker (left)
{
  "id": "marker-web1",
  "type": "ellipse",
  "x": 180,
  "y": 385,
  "w": 30,
  "h": 30,
  "options": {
    "stroke": "blue.500",
    "fill": "blue.500",
    "fillStyle": "solid"
  }
},
// Date label below
{
  "id": "date-1991",
  "type": "text",
  "x": 160,
  "y": 420,
  "w": 70,
  "h": 18,
  "text": "1991",
  "fontSize": 12,
  "fontWeight": "bold",
  "align": "center",
  "options": { "stroke": "slate.600" }
}

Step 3: Add Era Cards

Create content cards above or below the timeline for each era.

Build Era Description Cards

// Web 1.0 card (above the line)
{
  "id": "card-web1",
  "type": "rectangle",
  "x": 100,
  "y": 200,
  "w": 200,
  "h": 150,
  "borderRadius": 12,
  "options": {
    "stroke": "blue.400",
    "fill": "blue.50",
    "fillStyle": "solid"
  }
},
{
  "id": "card-web1-title",
  "type": "text",
  "x": 100,
  "y": 220,
  "w": 200,
  "h": 25,
  "text": "🌐 Web 1.0",
  "fontSize": 18,
  "fontWeight": "bold",
  "align": "center",
  "options": { "stroke": "blue.700" }
},
{
  "id": "card-web1-desc",
  "type": "text",
  "x": 110,
  "y": 250,
  "w": 180,
  "h": 80,
  "text": "Static pages\\nRead-only\\nTables & Frames",
  "fontSize": 12,
  "align": "center",
  "options": { "stroke": "slate.600" }
}

Tip: Alternate cards above and below the timeline for visual balance.

Vertical Connectors

Add short vertical lines connecting each card to its marker on the timeline. This creates a clear visual link between the description and the point in time.

Design Principles for Timelines

Left to right — Time flows from past (left) to future (right)
Consistent spacing — Equal gaps between major events
Color progression — Use warmer/brighter colors for more recent eras
Alternating cards — Above/below prevents crowding
Date labels — Always include clear year/date markers

📅 Create Your Timeline

Open Privacy Sketch and document your project's evolution or historical research.

Open Privacy Sketch

Next Steps

History of AI Tutorial — Educational timeline example
Remote Work Infographic — Data visualization
LLM Reference — Technical documentation