Back to activities
Thinking playMaking and imagining

Design a Website on Paper

Teen sketches and plans the full layout of a website idea before ever touching code. A paper-only planning exercise targeting information architecture and layout-planning skills: breaking an idea into individual pages, sequencing them, sketching each page's layout, and mapping how the pages link together, using grid paper, index cards, and sticky notes.

Cartoon illustration of a parent and child at home: teen sketches and plans the full layout of a website idea before ever touching code.
  • Age12 to 14 years
  • Time30 to 60 minutes
  • EnergyCalm
  • CostLow cost
  • WhereIndoors
  • Prep5 min

Your teen picks a website idea and plans the whole thing on paper before ever touching a screen or code. They sketch each page's layout on grid paper, list the pages on index cards, and map how everything links together with sticky notes.

How to do it

  1. Ask your teen to pick a website idea they would actually want to build: a hobby page, a fan site for a show or game, a small shop, a portfolio of their own art or writing, anything they are into.
  2. Have them list out the pages the site would need, one page per index card (for example, a home page, an about page, a gallery or list page, a contact page). Most first plans land around 4 to 8 pages.
  3. Give them one sheet of grid paper per page and have them sketch the rough layout of each page by hand, marking where the title goes, where the main content blocks sit, and where any buttons or links go. Boxes and labels are enough: no need to draw anything realistically.
  4. Have them arrange the index cards on a table or wall in the order a visitor would move through the site, then use sticky notes and drawn arrows to map which page links to which.
  5. Walk through the whole plan out loud together. Point to the home page and ask "if I click here, where do I end up?" and follow the arrows page by page. Ask about anything that seems confusing or where a visitor might get stuck.
  6. Wrap up by asking what they would want to add, change, or plan next: there is no requirement to finish the whole site in one sitting.

What you need

  • Grid paper
  • Index cards
  • Sticky notes
  • Pencil
  • Ruler

Signs it is working

Your teen sketches at least 3 to 4 distinct page layouts, each with a different arrangement of title, content blocks, and buttons. They can point to any two pages in their plan and explain how a visitor would move from one to the other. They stay engaged through both the page-listing step and the layout-sketching step without needing a prompt for each new page

If it is not quite clicking

Teen can't think of a website idea: Offer a few starter prompts: a page for a hobby, a fan site for a favorite show or game, a shop for something they would want to sell, or a portfolio of their own art or writing. The idea of pages "linking" to each other doesn't click yet: Act it out physically. Put the home page card down, put a finger on it, then move your finger to whichever card comes next while narrating "clicking this button takes us here." Doing this once together usually makes the abstract idea concrete. They want to skip straight to a real website builder or code editor: Remind them the paper plan is what makes the real build faster later. If they finish early, use the extra time to sketch a second version of one page's layout instead of moving to a screen. Every page ends up looking almost the same: That's a normal first pass. Ask "what's the one thing that makes this page different from the others?" to nudge variety without pressure. They lose interest partway through: A partial plan: just the page list and one or two sketched layouts: is still a real, useful result. There is no requirement to finish the whole site in one sitting.

Make it yours

Younger end, 12-13 years: Cap the site at 3 to 4 pages and skip the navigation-map step if it feels like too much. The page list plus a couple of sketched layouts is a complete session on its own. Older end, or teens with more design interest: Add a short note on each sketch describing what happens when a visitor clicks each button, or plan a simple form (like a contact form) and sketch what someone would type into it. Siblings or friends: Each person plans their own site idea in parallel, then takes turns walking the other through their navigation map like a guided tour. No sticky notes on hand: Use small torn pieces of paper with tape instead, or skip physical notes entirely and draw the navigation map as a list of arrows on a single sheet.

Try this with your child.

Tell PLAI™ about your child and this moment. It shapes the activity to fit.

Try it in the app