This is a lesson designed in April 2026 for my middle school web design class.
Compare how Canada and the USA use web design to tell the story of the Artemis II mission.
Pick 10 "web design best practices" and find examples of them on space websites.
Create an interactive Venn Diagram using a Google Drawing template.
Practice embedding media and adding "alt text" to a Google Site page.
Copy the Template: Open the Venn Diagram Template and click "Make a Copy."
Explore the Sites: Visit the CSA Artemis II Page and the NASA Artemis II Page
Check their YouTube channels too.
Use Comparison Prompts: Use these ideas to help you fill out your Venn Diagram:
The Hero Image: What is the first big photo you see? Does it make you excited for the splashdown on Friday, April 10th and the mission overall?
The Crew: Look at the CSA Crew Page and the NASA Crew Page. How do they introduce the astronauts differently?
Latest News: Look for "Live" banners or news alerts. Which site makes the news easier to find?
Technical Focus: Does the CSA site talk more about Canadian astronauts and space contributions / roles? Does NASA talk more about the rocket technology?
Build Your Diagram: Choose 10 items from the "Web Design Best Practices" list below. Put them in your Venn Diagram.
Best Practices List:
Large Banner Images
High-Quality Videos
Short Text Blocks (Chunking)
Simple Menus
Mobile-Friendly
Alt Text for Photos
Bold Headings
Social Media Links
Consistent Colors
Clear Buttons
Lots of White Space
Fast Loading
Photo Captions
Live Update Banners
Bulleted Lists
Official Logos
Interactive Graphics
High Contrast Text
Multilingual Support
Clear Links
Add Links: Inside your Google Drawing, create TEXT BOXES for at least 10 (ten) of the web design best practices, then link your text to the specific page where you found that example.
Publish and Embed: Go to File > Share > Publish to web. Click "Embed" and copy the code.
Create Your Webpage: On your Google Site, make a new child page under "Projects" called "Artemis II Web Storytelling."
Add Media: Use the "Embed" tool to add your Venn Diagram as <iframe> embed. Then, add at LEAST 4 images (2 from NASA, 2 from CSA) and 2 videos (1 from each or more).
Accessibility: Click on every image and add Alt Text to describe it. Add a "Works Cited" list at the bottom using MyBib.com
AI Attribution: In your "Works Cited" indicate if and how you used AI, providing as much documentation as you can. (Include a link to your AI conversation(s) if you can.)
Submit: The Website URL (public link) for your new "Artemis II Web Storytelling" page.
How: Copy and paste the link into this Canvas assignment.
Settings: Make sure your Google Site and Google Drawing are set to "Anyone with the link can view."