Skip to content

Day 3: Website Design (Part 2) — Wireframe + Job Applications

Lesson Overview
Time 50 minutes
Objectives Wireframe 3 pages of the website plan from Day 2; describe website functionality; complete the H&L "Job Applications" practice form
TEKS d(1)(C), d(7)(C)
Deliverable 3 completed wireframes (Ch 12, p. 204) + functionality description (Ch 12, p. 205) + completed Job Application (Ch 12, pp. 196-198)
Materials H&L Workbook Ch 12 (pp. 196-198, 200, 204-205), plain paper or pre-printed wireframe templates, pencils, projector

Warm-Up (5 min)

WARM-UP: Look at the website you visit most often (YouTube, TikTok, a game, a school site). Where is the menu? Where are the buttons? Where do your eyes go FIRST?

Quick share. Bridge: "Today you make those same decisions for YOUR website. The job is called wireframing. It is the blueprint that comes before any code."

Activity 1: Wireframe 3 Pages (25 min)

Source: H&L Workbook Ch 12, p. 204, "Step 4: Wireframe and Design"

Open the workbook to page 204. Read the definition together: a wireframe is a simple sketch that shows where text, images, buttons, and links will go on each page of a website. It is the blueprint, NOT the final design. Wireframes use boxes and labels, no colors, no real images.

Project a sample wireframe on the screen so students see what one looks like:

  • A box at the top labeled "LOGO" + "NAVIGATION MENU"
  • A large box in the middle labeled "Hero Image" or "Main Content"
  • Smaller boxes below labeled "Card 1," "Card 2," "Card 3"
  • A box at the bottom labeled "Footer / Contact Info"

Student task: Students wireframe the 3 pages they planned yesterday using either:

  • The blank wireframe boxes in the workbook (Ch 12, p. 204)
  • Plain paper (1 page per sheet)
  • A pre-printed wireframe template

For each page, they must label:

  • Header (logo + navigation)
  • Main content area (what is the most important thing on this page?)
  • Sidebar or secondary content (if any)
  • Footer (contact, copyright, links)

Tell students: "If you were handing this to a developer to build, would they understand exactly what goes where? Be specific."

Facilitation Tip

Some students will try to draw beautiful illustrations instead of wireframe boxes. Remind them: "Wireframes are LABELED BOXES. The point is to plan the structure, not to make art. You'll add visuals later, in real life."

Activity 2: Step 5 — Describe the Functionality (10 min)

Source: H&L Workbook Ch 12, p. 205, "Step 5: Describe the Functionality"

Open the workbook to page 205. Students write a short paragraph (3-5 sentences) explaining how users will interact with their website. The workbook describes this as "an instruction manual for your users on how to navigate your website."

Sentence stems to provide:

  • "When users first land on my homepage, they will see _____."
  • "To buy a product / read a post / find more info, users click _____."
  • "The menu allows users to navigate to _, , and __."
  • "On mobile, the navigation _____."

Walk the room and check that students are writing about their OWN website, not generic.

Activity 3: H&L "Job Applications" Practice (10 min)

Source: H&L Workbook Ch 12, pp. 196-198, "Job Applications"

Open the workbook to page 196. Read the introduction together: even if you have a resume, many employers still require a standard job application. Applications give employers the same info from every applicant. Filling them out accurately and neatly is part of the hiring process.

Privacy note before you start: For the real-world Personal Information fields (phone, email, address), students may either write their real info or substitute a sample identity (e.g., fictional "Alex Martinez, 123 Main St, Irving, TX"). Collect and shred all completed forms at the end of class, do not send them home, leave them on desks, or include them in the grading stack overnight.

Students fill out the practice job application for the fictional company Future Work, Inc. (Ch 12, pp. 196-198). The form fields:

  • Applicant Information: Full Name, Preferred Name, Phone, Email
  • Position Desired: Position type, Date Available, Availability (Full-Time / Part-Time / Seasonal)
  • Education: Current school, Location, Highest grade completed
  • Employment History: Most recent employer, position, dates, reason for leaving, duties (most 7th graders will write "babysitter," "lawn care," or "n/a")
  • Skills and Qualifications: Any relevant skills, certifications, or training
  • References: 2 references (name, relationship, phone/email)
  • Additional Information
  • Signature + Date

Tell students the form matches the one they will fill out when applying for their first real job at 16.

After students finish, lead a brief discussion using the workbook prompts (Ch 12, p. 198):

  • How can you show employers your best skills using few words?
  • Why fill out an application even if you have a resume?
  • What might make someone's application stand out?

DOK 2: How would you describe the difference between filling out a job application messily and filling it out professionally? What does each say about the applicant?

Exit Ticket (Deliverable-only day, no formal ticket)

Day 3 is a rich-submission day: a wireframe packet + Job Application form already function as the mastery evidence. No additional 3-min exit ticket.

Submission: Students submit (1) their 3 wireframe pages and (2) their functionality description as a packet at the end of class. The completed Job Application is verified in-class by the teacher and shredded at end of class per the privacy note above; it is not included in the grading packet.

Mastery evidence: wireframes demonstrate d(1)(C) Web Developer role work; the Job Application form completion demonstrates d(7)(C) sample-job-application skill. Tie the Job Application verification to the H&L rubric fields (accurate, legible, professional) rather than content correctness. (d(1)(C), d(7)(C))

Differentiation

  • Support: Pre-printed wireframe templates with the header and footer pre-drawn. Pre-printed Job Application with the easier fields (Name, School) marked clearly.
  • Extension: Students who finish early use the workbook's "Extra Time?" prompt (Ch 12, p. 205): create a mock homepage using a free online website builder like Google Sites or Wix.
  • ELL: Bilingual Job Application with Spanish field labels. Allow ELL students to write the website functionality description in Spanish.