Skip to content

Day 2: Website Design (Part 1) — Read, Plan, Choose

Lesson Overview
Time 50 minutes
Objectives Read the H&L "Do's and Don'ts of Designing a Great Website" article; choose a website type; plan website content (3 pages, color scheme, theme)
TEKS d(1)(C)
Deliverable Website concept written + 3 pages chosen + color scheme decided (Ch 12, p. 203)
Materials H&L Workbook Ch 12 (pp. 200-203), Chromebooks, projector, examples of well-designed websites for inspiration

Warm-Up (5 min)

WARM-UP: Pick the BEST website you have ever used and the WORST website you have ever used. What made the good one good? What made the bad one bad?

Quick share. Listen for: easy to find things, looks nice, fast loading, works on phone (good); cluttered, confusing, slow, broken links (bad). Bridge: "Today YOU become the web developer. The decisions you make are the same ones professionals make every day."

Activity 1: Read "The Do's and Don'ts of Designing a Great Website" Article (15 min)

Source: H&L Workbook Ch 12, pp. 200-202, "The Do's and Don'ts of Designing a Great Website: Focus on Wireframing and Layout" by Margie Vane

Open the workbook to page 200. Read the "Project Overview" together: students take on the role of a Web Developer and design their own website. They will not actually code it; they will create a detailed wireframe and plan that COULD be used to build a real website later.

Then read the article (Ch 12, pp. 200-202) together. The article covers 5 key principles:

  1. Do: Start with a Clear Hierarchy. Help users quickly understand the most important information.
  2. Do: Keep Navigation Consistent. A clear, consistent menu so users know where to go.
  3. Do: Prioritize User Flow. Map the path visitors take through your site.
  4. Don't: Overcrowd Your Layout with Too Many Elements. Use whitespace; remove distractions.
  5. Don't: Use Complicated Layouts. Stick to 1-2 primary content columns.
  6. Don't: Skip Mobile Considerations. Plan for desktop AND mobile from the start.

After reading, ask 3-4 students to name ONE Do and ONE Don't. Then show 2 example websites on the projector: one well-designed (Apple, Wikipedia, Khan Academy) and one cluttered (a busy news site). Have students apply the article's principles to critique each.

Facilitation Tip

Show real examples of bad websites for fun. Students love finding broken or cluttered sites. The contrast makes the article's principles stick.

Activity 2: Choose Your Website Type and Plan (25 min)

Source: H&L Workbook Ch 12, pp. 203, "Step 2: Choose Your Website Type" + "Step 3: Plan Your Website"

Open the workbook to page 203. The workbook gives students 5 starter ideas (they can also pick anything that excites them):

  • Online Store
  • Blog
  • Community News Site
  • Business Site
  • Entrepreneur (photographer, writer, personal chef)

Tell students to pick something they actually CARE about. If they love sports, build a sports blog. If they love art, build an art portfolio. If they want to start a business someday, build a business site for it. The point is to do something personal, not generic.

Step 3 task (workbook p. 203): Students complete the planning section in their workbook:

  1. Describe your website in one sentence. Example: "A website for kids who love drawing manga, with tutorials and a place to share their art."
  2. Choose at least 3 pages (Home, About, Contact, Shop, Gallery, Tutorials, Reviews, etc.).
  3. Pick a color scheme. What 2-3 colors will dominate? Why do those colors fit your topic?
  4. Decide on the overall theme. Cartoon? Minimalist? Professional? Vintage?

Walk the room. Confirm every student has answered all 4 prompts in writing before moving on. Stop students who are still browsing and not writing.

DOK 3: What conclusions can you draw about why a single sentence describing your website is harder to write than it sounds? What does writing this sentence force you to decide?

Exit Ticket (5 min)

EXIT TICKET (Mini-Case / Scenario Application) · Printable PDF:

Scenario: Rosa is a 16-year-old who just opened a small tutoring business. Rosa wants a simple website that will help her sign up new students from her neighborhood. Rosa does NOT need to sell products online.

  1. Which website type from today (Online Store, Blog, Community News Site, Business Site, or Entrepreneur) would you recommend for Rosa?

My pick: _____

  1. What 3 pages should Rosa's website have to sign up new students? (Use today's content.)

Page 1: _____

Page 2: _____

Page 3: _____

  1. Which page is the MOST important for getting new students to sign up, and why? One sentence. (d(1)(C))

Differentiation

  • Support: Pre-print a website planning template with the 4 fields (description, 3 pages, color scheme, theme) clearly separated. Provide example sentences for each.
  • Extension: Students who finish early add a 4th and 5th page (Contact Form, Search results, Login page) and start thinking about how those would work.
  • ELL: Bilingual website type vocabulary: Tienda en línea = Online Store, Blog = Blog, Sitio de noticias = News site, Negocio = Business, Empresario = Entrepreneur. Allow ELL students to write the website description in Spanish.