10 Multimedia · 2026
Week 3 · Lesson 06

Wireframing with Paper and Figma

Week 3 · 75 minutes · Year 10 Industrial Technology — Multimedia

IND5-2IND5-5IND5-6IND5-8

Learning intentions

  • I can explain why we wireframe BEFORE we design visuals.
  • I can sketch a low-fidelity wireframe of a webpage.
  • I can annotate my wireframe to show navigation and intent.

Success criteria

  • I have 5 paper wireframes for my portfolio pages.
  • Each wireframe shows layout zones (header, nav, content, footer).
  • I have annotated at least one interaction (button click, link destination).

Do Now · 5 min

From Term 1 we know the elements and principles of design. Today we use them in a new way: to plan LAYOUT, not style.

Look at 3 websites (apple.com, pinterest.com, your school site). On paper, sketch JUST the boxes — no words, no colours, no images. How does each site lay out its content?

I Do · ~10 min Teacher demonstration

Teacher demonstrates wireframing on paper, with a narration:

  1. Draw a rectangle the shape of a phone screen (roughly 3:7)
  2. At the top: a thin rectangle for the header/nav
  3. Under that: a big rectangle for the hero section (with an X for where an image goes)
  4. Under that: 3 smaller rectangles in a row for "features" cards
  5. At the bottom: a wide rectangle for the footer
Rules of low-fidelity wireframing:
  • Use boxes, lines, and X marks (X = image placeholder).
  • Write only headings, not full text. "Hero headline here" is enough.
  • Use only black pen/pencil. NO colours or styling. The point is layout.
  • Annotate arrows for interactions: "clicks → opens project page".

We Do · ~15 min Guided build

Together, wireframe a portfolio About page. It needs:

Class debates: should the photo be left or right of the text? How big? Does the CTA go top or bottom? What reads first?

You Do · ~35 min Independent practice

Wireframe all 5 of your portfolio pages on paper. One page per A4 sheet. For each wireframe:

  1. Draw the page shape (landscape rectangle for desktop view)
  2. Sketch header, nav, main content zones, footer
  3. Show rough positions of images (X marks) and text blocks (horizontal lines)
  4. Annotate at least ONE interaction on each page (what happens when user clicks a button or link)

Take clear photos and upload all 5 to Classroom before the end of the lesson.

Differentiation

Support

Pre-printed wireframe template with dotted lines for the page boundary and suggested zones. Student adds content placeholders only.

Core

Freehand 5 wireframes on blank paper as described.

Extension

Also draw a mobile version of the home page (same content, narrower screen). Decide what changes (e.g. nav collapses into a menu button).

Exit Ticket · 5 min

Exit ticket

Upload photos of 5 wireframes to Google Classroom.

Why do designers wireframe BEFORE visual design? Answer in one sentence:

____________________________________________________

Resources for this lesson

📚 Deeper Reading

External references drawn from Shay Howe's "Learn to Code HTML & CSS" and University of Michigan's "Web Design for Everybody" Coursera specialization. All credit to original authors.