🎯 Lesson Objectives

By the end of this lesson, you will:

Create a hand-drawn website design on paper
Practice translating visual ideas into structural descriptions
Use AI to interpret your design into HTML structure
Understand the connection between visual design and code

📖 Introduction: Why Paper?

Before any code is written, designers and developers often sketch on paper. Why?

Benefit	Explanation
Speed	Drawing takes seconds, coding takes minutes
Freedom	No technical constraints — just pure ideas
Iteration	Easy to crumple and start over
Focus	You think about WHAT, not HOW
Communication	Anyone can understand a drawing

Core Principle

Paper prototyping bridges the gap between your imagination and code.

🛠️ What You'll Need

✅ Gather These Materials:

0/5

📝 Part 1: Design on Paper (15 minutes)

Your Task:

Draw a simple personal portfolio website on paper.

Required Elements:

✅ Your Design MUST Include:

0/6

Drawing Tips:

✅ DO

❌ DON'T

Use simple rectangles for sections

Worry about artistic ability

Label everything clearly

Spend time on perfect lines

Write placeholder text

Add colors (focus on structure)

Show spacing between elements

Overcomplicate — keep it simple

Example Sketch Structure:

Text

┌────────────────────────────────────────────────┐
│  HEADER                                        │
│  [Logo] Alex Smith    Home About Projects Contact
├────────────────────────────────────────────────┤
│                                                │
│  HERO                                          │
│  ┌──────┐  Hi, I'm Alex!                      │
│  │      │  I'm a web developer who loves      │
│  │ PHOTO│  creating beautiful things.         │
│  │      │                                      │
│  └──────┘  [View My Work] button              │
│                                                │
├────────────────────────────────────────────────┤
│                                                │
│  ABOUT ME                                      │
│  ─────────                                     │
│  [Paragraph text here about who I am          │
│   and what I do. Maybe 2-3 sentences.]        │
│                                                │
├────────────────────────────────────────────────┤
│                                                │
│  MY PROJECTS                                   │
│  ────────────                                  │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐       │
│  │ Project 1│ │ Project 2│ │ Project 3│       │
│  │ [image]  │ │ [image]  │ │ [image]  │       │
│  │ Desc...  │ │ Desc...  │ │ Desc...  │       │
│  └──────────┘ └──────────┘ └──────────┘       │
│                                                │
├────────────────────────────────────────────────┤
│                                                │
│  CONTACT ME                                    │
│  ───────────                                   │
│  Name: [____________]                          │
│  Email: [___________]                          │
│  Message:                                      │
│  [                           ]                 │
│  [                           ]                 │
│  [Submit Button]                               │
│                                                │
├────────────────────────────────────────────────┤
│  FOOTER                                        │
│  © 2024 Alex Smith  [f] [tw] [in]             │
└────────────────────────────────────────────────┘

⏱️ Start Drawing Now!

Take 15 minutes to create your paper prototype. Don't read ahead until you've drawn something!

📝

Reflection Journal

Saved privately on your device

1After drawing, note any challenges or questions you had:

0 characters

0 total characters

📸 Part 2: Photo & AI Analysis (15 minutes)

Now let's see how AI interprets your design.

Step 1: Photograph Your Design

Take a clear, well-lit photo of your drawing
Make sure all labels are readable
Crop out unnecessary background

Step 2: Upload or Describe to AI

Option A: If your AI supports image upload (ChatGPT-4, Claude):

Image Upload Prompt

I've drawn a website design on paper (see attached image). Please analyze this design and describe the HTML structure you would use to build it. Explain it in plain English, like: 'You would need a header container with a logo on the left and navigation links on the right...' Focus on the STRUCTURE, not the styling. Be specific about what HTML elements would be used.

ChatGPT Claude

Option B: If your AI doesn't support images:

Text Description Prompt

I've drawn a website design with the following layout: HEADER: - My name 'Alex Smith' on the left side - 4 navigation links on the right (Home, About, Projects, Contact) HERO SECTION: - A square photo on the left - Large text saying 'Hi, I'm Alex!' to the right of the photo - Smaller tagline text below - A button that says 'View My Work' ABOUT SECTION: - Heading that says 'About Me' - 2 paragraphs of text below PROJECTS SECTION: - Heading that says 'My Projects' - 3 project cards in a row, each with an image and description CONTACT SECTION: - Heading that says 'Contact Me' - Form with name, email, and message fields - Submit button FOOTER: - Copyright text on the left - 3 social media icons on the right Please describe the HTML structure you would use to build this. Explain in plain English what elements would be used.

ChatGPT Claude

Step 3: Review AI's Response

AI should respond with something like:

"For this design, you would structure it as follows:

Header: Create a <header> element containing a <div> for your logo/name and a <nav> element for the navigation links..."

Step 4: Ask Follow-up Questions

Follow-up: Generate HTML

Now write out the basic HTML skeleton for this design. No styling, just the HTML structure with placeholder text.

ChatGPT Claude

Follow-up: CSS Question

What CSS layout technique would you recommend for the projects section with 3 cards in a row?

ChatGPT Claude

Follow-up: Responsive Design

How would you make this design responsive for mobile phones?

ChatGPT Claude

🔍 Part 3: Reflection (10 minutes)

📝

Reflection Journal

Saved privately on your device

1How accurately did AI understand your design? What did it capture well? What did it miss?

0 characters

0 total characters

📝

Reflection Journal

Saved privately on your device

1What HTML elements did AI suggest that you didn't know about? (e.g., <header>, <nav>, <section>, <main>, <article>)

0 characters

0 total characters

📝

Reflection Journal

Saved privately on your device

1What would you need to describe MORE clearly for better results?

0 characters

0 total characters

💡 Key Insights from This Exercise

1. Visual → Verbal → Code

The path from idea to code goes:

Your Vision → Description → AI Understanding → Code

The clearer your description, the better the code.

2. Structure Before Style

Notice we focused on STRUCTURE (HTML), not appearance (CSS). This is the correct order:

First: What elements exist
Then: How they look

3. AI Needs Context

Just saying "make a website" gives random results. Describing specific sections, relationships, and elements gives accurate results.

4. Paper Prototyping Saves Time

10 minutes of sketching can save hours of coding in the wrong direction.

🎯 The Connection to Vibe Coding

Old Way

Vibe Coding Way

Learn HTML structure

Describe what you want

Write every tag manually

AI generates structure

Trial and error

Visual prototype → description → code

Code first, design second

Design first, code is generated

Key Takeaway

Your paper sketch IS your "prompt" — just in visual form.

📋 Completion Checklist

✅ Did You Complete Everything?

0/6

🏆 Bonus Challenge

If you have extra time:

✅ Extra Challenges:

0/3

✅ Lesson Summary

What You Practiced

Translating visual ideas into structural thinking
Communicating designs to AI
Understanding HTML structure through description
The prototype → describe → generate workflow

Key Takeaway:

Drawing your idea first makes it much easier to describe to AI — and better descriptions mean better code.