Sketch, Spec, Swap

A Paper Primer on Website Decomposition

Scene Schedule (Quick Reference)

Beat	Minutes	What students do	What teacher does
1. Settle	0-1	Find group station, glance at assignment card	Deliver 60-second framing (script in Beat 1)
2. Observe	1-6	Group observation of assigned website on shared device - no notes, no photos	Time-keep; signal at minute 5; devices go away
3. Sketch	6-14	Individually sketch the page from short-term memory	Circulate; support without prescribing
4. Spec	14-29	Complete the four-section spec template	Circulate; help with rough-notes use
5. Swap & Reconstruct	29-43	Hand spec stack to paired group; reconstruct a stranger's spec, knowing nothing about their site	Coordinate the exchange; enforce "no contact with the spec's author"
6. Compare & Close	43-50	Reconstructions return home; reopen own website; compare sketch / outsider's reconstruction / live site; write reflection; post one sentence on wall	Cluster posted sentences into 4 gap-types; deliver bridging statement

Materials Checklist (Day-Of)

Run through this list before students arrive:

Procedures

Timed for a 50-minute scene. All times below are minutes elapsed from the start of class. If you are on a longer block, keep the beat order and stretch each beat proportionally.

Beat 1 - Settle & Frame (0-1 min)

What to do:

As students enter, direct each to their group's station. The assignment card on each desk names their URL; the shared device is already on that page.
Once everyone is seated, deliver the 60-second framing aloud (see Script).
Start the Beat 2 timer (5 minutes).

Script (teacher, 60 seconds):

"Each of your groups has been assigned a different website. In five minutes, you're going to look at it together - no notes, no photographs. Look at it the way a person who is going to have to describe it from memory should look at it. After five minutes I'll say stop, and the devices go away for the rest of class."

Beat 2 - Group Observation (1-6 min)

What to do:

Each group of three sits around its shared device on the URL printed on its assignment card.
Students may scroll the page and hover over elements, but they may not navigate beyond the homepage, take photographs, or write anything down during this beat.
Conversation within the group is permitted and actively encouraged.
At minute 5, signal time aloud. Chromebooks are closed (lids shut) and pushed to the side of the station, out of view for the rest of the scene - until Beat 6.

Beat 3 - Sketch from Short-Term Memory (6-14 min)

What to do:

Pass out one sheet of lightly-ruled graph paper (~5mm grid) per student.
Each student sketches the homepage of their group's assigned website from memory, top to bottom.
Deliver the sketching framing aloud (see Script).
Pencil only. Students must be able to revise.

Script (teacher, before sketching begins):

"This is not an art class. Show me where things sit and roughly how big they are - let the grid help you keep your proportions honest. Label anything the sketch can't show on its own - search field, button, video embed, sign-in form. Labels in block print, please."

Beat 4 - Translate Sketch into a Written Specification (14-29 min)

What to do:

Pass out the printed four-section spec template (on standard lined paper), one per student. Also pass out one "rough notes - not assessed" scratchpad sheet per student.
Deliver the block-print framing aloud (see Script).
Each student translates their sketch into language, completing each section in full sentences:
- Project - What is this website for, and who visits it? Two to three sentences.
- Structure - What's on the page, top to bottom? A numbered list.
- Style - Colors, type, density, mood. Three to five sentences.
- Behavior - What's clickable, what moves, what changes when a user interacts? Three to five sentences.
Students may refer to their own sketch but not their peers' sketches. The specification has to stand on its own.
The rough-notes sheet is for drafting only - final, polished language goes on the formal template. Tell students they can scribble anything on the rough sheet without it counting against them.
Scribe option (available to any student). Within each group, students may decide among themselves to pair as author + scribe - one student dictates their spec aloud, the other writes it down on the dictator's template. The cognitive authorship of the spec (deciding what it says) stays with the dictator; the scribe transcribes only what they hear, without paraphrase. Pairings are chosen by the students, not assigned by the teacher. A student who wants their work to be in their own hand simply writes it themselves; a student who would benefit from delegating the writing act asks a groupmate to scribe.
Circulate. Support, do not prescribe. If a student is stuck, ask "What did you see?" rather than telling them what to write.

Script (teacher, after templates are out):

"Write your spec in block print - the same writing convention engineers used on paper specifications before there were computers to do it for them. Recommended for the in-class spec, required for the take-home version."

Beat 5 - Cross-Group Swap & Reconstruct (29-43 min)

What to do:

Each group of three stacks its three specs together and hands the stack to its paired group (Group A → Group B, Group B → Group A). The exchange happens simultaneously and physically - students walk specs to the paired group's station, no digital transfer.
Within the receiving group, distribute the three incoming specs among the three students (one spec per student). Every student now holds a stranger's spec describing a website they have never seen.
The receiving group's shared Chromebook stays closed. The originating group's shared Chromebook also stays closed. No student in the room can see the source artifact during this beat.
Each student reconstructs the page on a fresh sheet of lightly-ruled graph paper, drawing only from what the spec says. Labels in block print (same drafting convention as Beat 3).
No contact with the spec's author. Deliver the developer-framing aloud (see Script).
At the end of the beat, each group stacks its three reconstructions together and walks the stack back to the originating group. Group A now has Group B's reconstructions of Group A's specs (and vice versa). Both groups carry both their original sketches and their outsider-produced reconstructions into Beat 6.

Script (teacher, as the swap begins):

"You're playing the role of the developer who receives the spec. You don't know the source. You can't ask the author what they meant. Draw only what's written. If something feels ambiguous, that's the data we're collecting - interpret it and move on."

Beat 6 - Three-Way Comparison, Reflection & Close (43-50 min)

What to do:

Reopen the originating group's shared Chromebook. Return to the URL on the assignment card. The live website is now visible again, for the first time since minute 6.
Each group lays out seven items on the desk: 3 original sketches (their own), 3 reconstructions returned from the paired group, and the live website on the screen.
Each student walks through their own triplet - their original sketch ↔ the outsider's reconstruction of their spec ↔ the live site - and asks two questions aloud to their groupmates:
- What in my spec produced the gap between my sketch and a stranger's reconstruction of it?
- What did I miss about the live site even when I was looking at it?
Each student writes a one-paragraph reflection on the back of their original spec: "The words I would add to my spec to close those gaps." The same scribe option from Beat 4 remains available - a student who chose dictation earlier may continue with the same pairing for the reflection.
With 3 minutes remaining, one spokesperson per group writes a single sentence on the designated wall area: "The gap that surprised us most was - [completion]."
Once all groups have posted, read the sentences aloud and cluster them into four named gap-types: ambiguity, omission, implicit assumption, observational error.
Close with the bridging statement aloud (see Script).

Script (teacher, closing):

"When we work with the AI tool next week, you'll see the AI produce these same gap-types - faster and more visibly. The work we did on paper today is the durable work. The tool is the test apparatus that surfaces, in real time, what we already learned to look for here."

Independent Practice (Take-Home)

Assign each student: pick a different familiar website than the one your group used in class, and produce a fresh four-section spec on a clean template - this time with the page held open in front of you on a device rather than from memory. The take-home spec is written in block print throughout (not recommended this time - required). Bring it to the next class.

Contingencies - What to do if...

Situation	What to do
A group's website won't load.	Swap to a backup URL from the teacher's desk list. Don't spend more than 30 seconds troubleshooting; the scene is paper-based and any clean homepage works as the source.
A group finishes early.	See Section VI (Extensions). Direct early finishers to write a second spec for a different familiar website with a deliberately planted ambiguity - they predict on the back where the ambiguity will produce a reconstructor error.
A student is absent and a group is down to two.	The two-student group still produces two specs; both specs go to the paired group. The paired group has three reconstructors but only two incoming specs, so one student in the paired group doubles up with one of the other two (reads the same spec and produces an independent reconstruction). This yields a small bonus - two reconstructions of the same spec - which is itself informative data about how different readers diverge on the same words.
A student does not want to share their sketch.	The sketch never leaves the originating group; only the spec travels to the paired group. So the student's spec gets reconstructed by a stranger but their sketch stays with them. This actually lowers the social cost of the scene - the artifact being evaluated by outsiders is the words, not the drawing. Encourage participation.
A paired group falls behind and reconstructions don't return in time for Beat 6.	The originating group can still run a partial Beat 6 with the materials they have - their original sketches and the live website - and the missing reconstructions can be slid in during the next class's warm-up. Don't let the missing piece block the rest of the closure.
Tech failure across the room (no devices working).	Pre-printed screenshot packets of each assigned website serve as the fallback source. Students get 5 minutes with the packet during Beat 2 instead of the live device. Keep one packet per assigned URL in your file drawer.
Pacing is running behind.	Protect Beat 5 (swap & reconstruct) at all costs - it is the scene's lever. Trim Beat 6 first; if needed, push the reflection writing to the take-home assignment.
A student becomes overwhelmed by Beat 5 (rare).	Walk them through the stranger's spec aloud, helping them parse what it says without telling them what to draw. The cognitive act of interpreting the spec remains theirs.

Reference Appendix

From here on: differentiation, assessment, and extensions. Print if you need them; skip if you’re just running the scene.

Differentiation & Modifications

1. Dyslexia

Accommodation 1: Dyslexia-Supportive Print Format of the Spec Template
- The Strategy: The student receives the same four-section spec template as the rest of the class, printed in a dyslexia-supportive format - OpenDyslexic or Lexend font face, 14-point body type, increased letter- and line-spacing, left-aligned text rather than justified, and off-white (cream) paper to reduce visual contrast strain.
Accommodation 2: Flexible Drafting Workspace ("Rough Notes" Scratchpad)
- The Strategy: A separate sheet of plain paper, marked rough notes - not assessed, sits beside the formal spec template during Beat 4. The student may draft sentence fragments, exploratory phrasing, and false starts on this sheet before transcribing finalized language into the four-section template. The separation lets the student focus first on the cognitive act of expressing what they want to say, and only second on placing it within the assessed section structure. This is the paper analogue of a digital scratchpad: it isolates gist composition from form composition, which research suggests reduces overall cognitive load for dyslexic writers.
Modification: Reduced Spec Scope (Two-Section Specification)
- The Strategy: If the cumulative writing load across all four spec sections exceeds the student's capacity within the scene's window, the assigned scope is reduced from four sections to two. The student selects, in consultation with the teacher, the two sections they will complete in full - typically Structure plus one of the remaining three. The reduction is in breadth rather than depth: each completed section must meet the same precision standard the full-scope rubric demands of that section. The scope reduction is documented explicitly in the assignment record so the student and any reviewer know what was produced and what was scoped out.

2. Asperger's Syndrome

Accommodation 1: Explicit Written Assignment Specification
- The Strategy: The assignment card placed at each group's station is structured into named, unambiguous sections - Goal (what we are producing today), Required Components (the four-artifact packet: sketch, spec, reconstruction, reflection), Acceptance Criteria (the rubric, attached), Examples of Strong Work (one annotated sample packet from a prior cohort, if available), and Common Pitfalls (the four named gap-types and what they look like). The student who reads the assignment card has the same information as the student who relies on verbal aside, classroom Q&A, or hallway clarification.
Accommodation 2: Section-Header Prompt Scaffolds on the Spec Template
- The Strategy: The student's printed spec template includes a small bordered prompt card under each of the four section headers identifying the kind of content that belongs there - "Project: who visits and what they came for"; "Structure: top-to-bottom list of every named element on the page"; "Style: colors, type, density, mood - name them"; "Behavior: what is clickable, what moves, what changes when a user interacts."
Modification 1: Acceptance of Direct, Unhedged Technical Prose
- The Strategy: The rubric does not penalize the student for spec language that reads as blunt, technical, or unconventionally direct in tone, provided the language remains precise and unambiguous. A student who writes "the search field at the top of the page is approximately 480 pixels wide and aligned to the left edge of the header" meets the precision standard at least as well as a student who writes the same observation in softer or more conversational language. What the rubric drops, for this student, is the cultural expectation of conversational warmth in technical writing - a neurotypical default rather than a property of effective specifications.

3. Visual Impairment (Computer Lab Focus)

Accommodation 1: Specification Handout in Braille
- The Strategy: The same four-section spec template, produced in advance of the scene on the campus braille embosser in coordination with the school accessibility coordinator. A refreshable braille display may be substituted if the student's IEP designates one as their working medium. Production lead time is one school week to accommodate embosser scheduling.
Accommodation 2: Screen-Reader Audio Observation in Beat 2 (group-shared)
- The Strategy: The student's group's shared device is configured in advance with a screen reader (VoiceOver, NVDA, or JAWS depending on platform and IEP designation), and the group's assigned website is verified by the teacher to be accessible - heading structure intact, alt text present, no inaccessible interactive elements. During Beat 2, the group's five-minute observation is conducted primarily through audio: the screen reader narrates the page through a small speaker or shared headphone splitter, and the sighted students in the group experience the website's structure the way a screen-reader user does. The visually impaired student leads the group's navigation by directing which heading or landmark to read next. Sighted group members may also glance at the visual layout, but the primary cognitive channel for the group is the audio narration.
Modification: Structural Inventory in Lieu of Visual Sketch (Beat 3)
- The Strategy: If a student cannot produce the visual sketch (Beat 3), they make a numbered list instead of a drawing. The list describes the page from top to bottom: what sections are there, what headings appear, what buttons or search fields or sign-in forms exist, and in what order a user would encounter them. Same rules as the sketch - done from memory after the device is closed at minute 5, pencil so they can revise, labels in block print, no looking at the live site. They can dictate the list to a groupmate using the scribe option from Beat 4 if they prefer. The list stays with the student through Beat 4 the same way a sketch would - they use it to help write their spec, but it does not get handed to the paired group in Beat 5. In Beat 6, lay out the seven items as usual: their list counts as the "original sketch," the reconstruction comes back from the paired group as a drawing, and the live site reopens for comparison. The student answers the same two reflection questions as everyone else. Note: review the student's IEP (or consult with the team) for the production format the student has demonstrated the most success with for "written work" - handwritten, brailled, typed, or dictated.

Rubric

A handout you can keep - what you'll be graded on, and what each level looks like.

You'll be graded on four things. Each is scored 1 (does not meet), 2 (meets), or 3 (exceeds). Rows are weighted equally. Max score: 12.

What we're looking for	1 - Does not meet	2 - Meets	3 - Exceeds
1. All four sections filled in. Your spec covers Project (what & who), Structure (top-to-bottom list), Style (colors / type / mood), Behavior (what's clickable, what moves). Each section gets content that fits there.	A section is empty, mislabeled, or filled with content that belongs in a different section.	All four sections are present and filled in with content appropriate to each.	Sections tightly distinguish their content from each other - no overlap, no leakage.
2. Precise enough to reproduce. A peer who has never seen your website should be able to redraw it from your spec alone.	Reconstructor produced a page that does not recognizably match the source.	Reconstructor produced a recognizable version of the source page.	Reconstructor produced a page that closely matches the source - proportions, layout, named elements.
3. Faithful reconstruction. When you draw a peer's spec, you draw only what their words say - no extra details from your imagination.	Your reconstruction adds details the spec did not specify.	Your reconstruction stays true to what the spec actually says.	Your reconstruction is precise to the spec and surfaces gaps without filling them in.
4. Specific reflection. Your closing paragraph names the exact words, phrases, or omissions that made a reconstructor go wrong.	Reflection is generic ("I should have written more").	Reflection names specific spec language that produced specific divergences.	Reflection diagnoses the gap-type (ambiguity, omission, implicit assumption, observational error) and proposes the words that would close it.

Extensions & Connections

Adaptations: See Section V.
Extensions (Gifted Students / Early Finishers): A student who completes the four-artifact packet ahead of their group may compose a second specification - this time for a different familiar website, and deliberately written with a single planted ambiguity in one specific section. The student writes, on the back of the second template, a sealed prediction identifying where the ambiguity lives and what specific divergence they expect a reconstructor to produce. This extension invites the student to use the specification format generatively - to probe and exploit the limits of language rather than merely to describe - and produces a self-designed test case in the H.AP.4B sense. The sealed predictions can be opened and verified as a warm-up at the start of the next class.
Possible Connections:
- Immediate next scene (Course-internal): The take-home specification produced in Independent Practice becomes the entry artifact for the Website Observation and Description Activity. The transition is from working from short-term memory after a brief group observation (this scene) to sustained, individual observation of a live artifact with a defined protocol (next scene). The four named gap-types surfaced in this scene's closure (ambiguity, omission, implicit assumption, observational error) become the rubric vocabulary the next scene uses.
- Course arc: This is the founding paper-scene of the course. Every digital scene that follows - the introduction to the build tool, the spec-revise loop, the commenting-practice unit - refers back to the four-section format students learned to write here, on paper, in their own handwriting.
- English / Technical Writing: The four-section specification is a genre of technical writing. The scene parallels English composition's instruction on precision and audience awareness, and can be paired with a cross-curricular reflection if the school offers integrated humanities programming.
- Industry connection: Software engineers and product designers compose specifications professionally - variously called Product Requirements Documents (PRDs), design briefs, or technical specifications. The cognitive work of this scene is the cognitive work of those professional documents, scaled to a single page of paper.
- The transferable claim: This scene is the first opportunity to make explicit, in language students can hold in their hands, the curriculum's central claim - expressing intent precisely enough that another reader (a person, a model, or future-you) can produce the right artifact from it is the most transferable AI-coding skill, and it operates the same way whether the reader is a peer, a small local language model, or a frontier system. Pencil and paper are the appropriate medium for the first encounter with that claim.