Storyboards and Wireframes
Computer Science Fundamentals Grades 9–12 3-day lesson 25 deliverables In this web design lesson, students learn to plan a website's pages with a storyboard and a wireframe before anyone builds them. They find and fix problems in a storyboard for a made-up animal shelter's website, then draw wireframes of its Home, Adopt and Volunteer pages.
● Instant download · Lifetime access · Editable & print-ready
Print + digitalPDF, PowerPoint, Word & Google
Answer keysA key for every page
Built-in assessmentExit tickets + lesson quiz
45-minute daysEvery day planned and timed
What does this lesson cover?
Students often start building a site before they know what it needs. This lesson teaches them to plan the pages first, on paper, so every choice comes from the owner's needs. Nobody opens a real website or puts a site online.
Wireframe Three Pages
Students draw wireframes of three pages of an animal shelter's website, with labeled boxes and the menu on each page.
Everything that's included
00 Start Here
- READ FIRST: every file in the lesson and when you use it
- Teacher guide and pacing: the plan for each day, what to print and how to grade
- Skills map: which standards each day teaches
01 Present
- One editable PowerPoint deck for all three days, 29 slides, with speaker notes
- Slide script: the speaker notes, printed
- Bell ringers: a short warm-up for each day
02 Student Handouts
- Guided notes for all three days, in PDF and editable Word, with the word bank on the page
- Vocab slip: the lesson's words and what they mean, on one page
04 Activities
- Storyboard Check: find and fix three problems in a storyboard for an animal shelter's website, then describe the purpose of storyboarding
- Wireframe Three Pages: draw wireframes of three pages of the shelter's website, with labeled boxes and the menu on each page
- Check the Plan: check a two-page plan for a school's science fair website on paper
05 Assessment
- Exit tickets, one per day: quick questions that show who needs more help
- Lesson quiz: 10 multiple-choice questions and 2 written answers about all three days
06 Answer Keys
- 5 answer key files: a key for each day (its bell ringer, notes and exit ticket) and the activity keys, plus the quiz key
Digital: Google Forms™ + Google Slides™
- 4 Google Forms™ of the exit tickets and the quiz, ready to copy into your Drive
- The multiple choice grades itself, and you grade the written answers
- A Google Slides™ copy of the deck, with the same slides and speaker notes, for Google Classroom™
Why teachers love this lesson
Students find problems before anyone builds the siteStudents check each plan against the owner's needs and fix it, and they describe why a team plans a website's pages first.
Wireframes use plain boxesA wireframe uses a plain labeled box for each part of a page. Students plan the layout without searching for, copying or downloading a real picture.
Print and digitalEvery page is a print-ready PDF, and the Google Forms™ and Google Slides™ let you teach the same lesson in Google Classroom™.
A key for every pageEvery day has its own answer key, and every written question has a sample answer and what to look for.
Every day fits a 45-minute classEach day's plan is timed activity by activity against real reading and writing speeds.
Written for your studentsEvery student page is checked for reading level, with plain words and complete sentences.
What Teachers Say
Be the first to review this
Reviews help me a lot, and they help other teachers pick the right resources for their classes. It takes about a minute.
Leave a reviewQuestions teachers ask
How do I get the files after I buy?
Instant download right after checkout: PowerPoint and Word files you can edit, print-ready PDFs, and links that copy the Google Forms™ and Google Slides™ into your Drive.
Can I buy the whole unit or course instead?
Yes. This lesson is part of the Unit 6 bundle and the complete Computer Science Fundamentals course. Both cost less than buying the lessons one at a time.
Is this AP Computer Science?
No. It is a full-year, non-AP intro course for grades 9 to 12. For AP, see AP Computer Science Principles and AP Computer Science A.
What formats are the files in?
Every page is a print-ready PDF. The slides are an editable PowerPoint and the guided notes an editable Word file. The exit tickets and the quiz also come as Google Forms™, and the deck as Google Slides™.
Which standards does it cover?
Written for Florida's Advanced Information Technology course (9007610). The skills map in the lesson shows which standards each day teaches.