The document outlines a web design curriculum aimed at high school students, focusing on transforming them from website consumers to content creators while enhancing 21st-century skills such as critical thinking and collaboration. It details project ideas like digital portfolios, community events, and unit reviews, with a structured timeline for submissions and opportunities for peer critique. The curriculum emphasizes engaging students through hands-on experience and teamwork, culminating in a website launch for educators in summer 2018.

1. IntegratingWeb Design
Matthew Waynee
MSA National MagnetTeacher of theYear
HS Cinematic ArtsTeacher – LAUSD
mjw2416@lausd.net

2. Overview
• Web Entanglement
• 21st Century Skills
• Basics ofWeb Design
• FreeWebsite-CreatingWebsites
• StudentWebsite Projects
• Let’s Launch!

3. Web Entanglement

4. Web Entanglement
• Teens spend nearly 9 hrs a day online
• 8-12 year olds nearly 6 hrs
• Washington Post: Nov 3, 2015

5. Web Entanglement
So let’s inspire our students to transform
from website consumers to content creators.

7. 21st Century Skills

8. 21st Century Skills
CriticalThinking
CreativeThinking
Collaborating
Communicating

9. 21st Century Skills
Information Literacy
Media Literacy
Technology Literacy
Photography
Writing
DesignTechniques

10. Basics ofWeb Design

11. Basics ofWeb Design
• Website Design Projects are Student-Centered
• Teamwork is Essential
• Communication
• Base it around a PBL with real world problem

12. Basics ofWeb Design
• Content: essential vs excessive
• Layout: Easy to read? Too sparse? Cramped?
• Easy to Navigate: structure and organization
• Color Scheme: what emotional effect wanted?
• Typography: readable vs decorative

13. Website-CreatingWebsites

14. Website-CreatingWebsites

15. Website-CreatingWebsites
Free*
($40 for 40 accounts)
User friendly
Dozens of Ready to UseTemplates

16. Four Major Projects
• Digital Portfolio
• Campus-wide Event
• Unit Review
• Class Activities

17. Digital Portfolio

18. Digital Portfolio
• Home Page: Short Bio & Professional Pix
• Resume Page
• Work Sample Page
• Community Service Page
• Letters of Rec / Personal Statement Page*
• Contact Page

19. Digital Portfolio Extras
• Awards Page
• Educational FieldTrips Page
• Goals Page
• Work Experience Page
• Internship Page

20. Digital Portfolio
Student Sample Digital Portfolio

21. Digital Portfolio
TIME FRAME
• Introduce Project on Day 2 (Mid-August)
• DUE right after Labor Day: Home Page
• Due October 1: Resume & Contact Pages
• Due November 1: Work Sample Page (3 Items)
• Due December 1: Community Service Page

22. Digital Portfolio
LOGISTICS
• One class day a month to work on new page
• Majority of work on their own time
• Twice a semester: Peer Critique & GalleryWalk
• End of Spring semester: Update your Portfolio
• SubsequentYears: Update your Portfolio

23. Digital Portfolio
BENEFITS
• Start thinking of themselves as professionals
• Major Projects take on a bigger importance
• Document their accomplishments
• Gets them thinking & planning for future
• “You’re done with all your work?”
• “You don’t have anything to do?”

24. Community Event

25. Community Event
• WHO: our school’s Girls Build L.A.Team (10 girls)
• OBJECTIVE: Identify positive local non-profit
organizations that help girls and promote them with 6
documentaries, culminating in a film festival / open house
where new teens can join these organizations.
• GOAL: Top three teams win scholarships
• KEY COMPONENT: design a website to promote event

26. Community Event
USC MAE Girls Build LA
EventWebsite

27. Community Event
My girls were able to excel at this because
they already had experience making
their own digital portfolios.

28. Unit ReviewWebsite

29. Unit ReviewWebsite
• As students prepare for finals, have different small
groups create study guides for whole class to share
• Each team is an expert, and all teams can review
together
• Best of all, you can have these as resources for future
classes.

30. Unit ReviewWebsite
Systems of Body
Website

31. Classroom Activities

32. Class ActivitiesWebsite
PE Activities
Website

33. OtherWebsite Projects
• Promote Author/Artist
• Historical Biography
• Travel toAncient Country
• Start a Business
• School Club /Team
• Fix Community Problem
• Research a College
• FamilyTree
• Science Lab Report
• Class RecipeWebsite
• Promote a Zoo
• Key Events of a Decade
• Mini MathTutorials
• Any PowerPoint Assn

34. Let’s Make SomeWebsites!

35. MakingWebsites
• Start with simple assignments; web design is the
rigorous part
• DevelopingTechnical & Collaborating Skills
• Learning Basic Design Elements
• Bonding with classmates through teamwork
• Becoming active community citizens!

36. Launching NewWebsite
for educators on Summer 2018
Media,Video Prod, Web Design, DigitalArts
Lessons • PBL Units • Webinars • Articles
Sign up today for a free monthly newsletter
with resources and tips

37. Thanks for Attending
If you have any questions
want the links to these websites
or copy of this PowerPoint
contact me:
MatthewWaynee
mjw2416@lausd.net