Web Design: Before the Click - Teacher Script

Warm Up: Your Favorite Website (5 minutes)

(Display Slide 3: "Warm Up: Your Favorite Website")

"Good morning, class! I'm really excited to dive into a topic that touches almost every part of our lives: web design. Before we get into the nitty-gritty, I want us to think about our own experiences online.

Look at the prompt on the screen. I want you to silently think about a website you absolutely love to visit. What makes it great? Is it how it looks, how easy it is to use, or maybe how it makes you feel? Take a few minutes to jot down your thoughts. We'll share some of these in a moment."

(Allow 2-3 minutes for students to write. Then, solicit a few student responses.)

"Anyone want to share a website they enjoy and what makes it stand out? Don't be shy!"

Introduction to Web Design & History (10 minutes)

(Display Slide 4: "What is Web Design?")

"Fantastic responses! You've already started thinking like web designers! So, what exactly is web design? At its core, it's the art and science of creating websites. It's about combining visual aesthetics – how things look with colors, fonts, and images – with functionality – how things work with buttons and navigation. And most importantly, it's about the User Experience, or UX, which is how easy and enjoyable a website is to use."

(Display Slide 5: "Web Design: The Analog Era")

"Now, here's a mind-bender: imagine designing a website without a computer. How do you think people did it before digital tools were common? Take a moment to think about it."

(Pause for student input, guide towards physical planning.)

"That's right! In the early days, before we had fancy software, web designers often used very analog methods. They would storyboard pages like a comic book, drawing out each screen. They'd create 'wireframes,' which are simple sketches of page layouts, like a blueprint. And they even made 'paper prototypes,' which were hand-drawn versions of user interfaces that they could physically interact with to test ideas. It was a very hands-on, tangible process!"

(Transition to Web Design Discussion Prompts after this section)

Key Terminology (Part 1) (3 minutes)

(Display Slide 6: "Key Web Design Terms")

"Before we go further, let's learn some crucial terminology. These are words you'll hear often in the world of web design. First up:

• HTML, or HyperText Markup Language. This is the skeleton of a webpage. It gives the page its structure and content.
• CSS, or Cascading Style Sheets. If HTML is the skeleton, CSS is the skin and clothes. It dictates the style and appearance – colors, fonts, spacing, layout.
• URL, Uniform Resource Locator. This is simply a website's address, like an address for a house.
• Domain Name: This is the memorable name of a website, like 'google.com' or 'youtube.com'. It's easier to remember than a string of numbers.
• Web Server: Think of this as a digital storage unit, a powerful computer that stores all the files for websites and delivers them to your browser when you request them."

Key Terminology (Part 2) (3 minutes)

(Display Slide 7: "More Key Terms!")

"Let's continue with a few more essential terms:

• A Browser is the software you use to view websites, like Chrome, Firefox, or Safari.
• User Interface, or UI, refers to the visual parts of a website you interact with – buttons, menus, text fields. It's what you see.
• User Experience, or UX, is how a person feels when using a website. Is it intuitive? Is it frustrating? Good UX makes a user's journey smooth and enjoyable.
• Front-end development is everything you see and interact with on a website – the HTML, CSS, and interactive elements. It's the client-side.
• Back-end development is the engine behind the scenes – the servers, databases, and applications that make the front-end work. You don't see it, but it's crucial."

Dreamweaver: A Digital Revolution (4 minutes)

(Display Slide 8: "Dreamweaver: A Digital Revolution")

"For a long time, creating websites meant writing a lot of code by hand. But then, tools emerged to make it easier. One of the most famous and impactful early tools was Macromedia Dreamweaver, which was later acquired by Adobe.

Dreamweaver was revolutionary because it was a WYSIWYG editor. That stands for 'What You See Is What You Get.' This meant designers could drag and drop elements, see what their page would look like in real-time, and Dreamweaver would write a lot of the code for them in the background. It was a game-changer!"

(Display Slide 9: "Dreamweaver's Impact")

"Dreamweaver had a huge impact. It democratized web design, meaning more people could create websites without being expert coders. It made development much faster, and it allowed designers to focus on the visual aspects and user experience, rather than just lines of code."

Terminology and Worksheet Activity (8 minutes)

(Display Slide 10: "Time to Practice!")

"Alright, let's put some of this new vocabulary to use! I'm going to hand out the Web Design Terminology Worksheet. You can work individually or with a partner next to you. Your goal is to match the terms with their definitions and answer the short questions. We'll go over the answers together afterward, so don't worry if you're not sure about everything."

(Distribute worksheets. Circulate and assist students. After 5-6 minutes, bring the class back together and use the Web Design Answer Key to review.)

"Let's quickly go through these. What did you put for number one? Excellent!"

Analog Web Design Activity & Game (5 minutes)

(Display Slide 11: "Activity: Analog Web Design!")

"Before we wrap up, let's try a quick activity that takes us back to the analog days. Imagine you're designing a very simple website for your favorite hobby – maybe it's about collecting sneakers, or playing a certain video game, or a sport. But it's 1995, and you only have paper and pens.

In small groups, I want you to quickly sketch out a homepage wireframe – a basic layout of where things would go – and a simple user flow, showing how someone might navigate from your homepage to another page. Focus on the layout and what the user would experience.

(Allow 3 minutes for this quick sketch activity. Then, transition to the game.)

(Display Slide 12: "Game Time: Web Design History Whiz!")

"Alright, let's have a quick round of 'Web Design History Whiz'! I'll ask a question related to what we've covered, and the first team to give the correct answer gets a point. Ready?"

(Ask questions from the Web Design History Game for 2 minutes.)

Cool Down & Wrap Up (2 minutes)

(Display Slide 13: "Cool Down & Next Steps")

"Great energy, everyone! To bring us to a close, please take a moment for our Web Design Cool Down. Just one quick reflection: what is one new thing you learned today about web design? And how do you think this knowledge will help you better understand the internet you use every day?"

"As you finish up, I also want to give you a heads-up about an exciting upcoming project. We'll be using the Web Design Project Guide and Web Design Project Rubric to explore these design principles further. More details to come soon!

Thanks for a great discussion and a great start to our web design unit! You're dismissed!"

Your Favorite Website

Think about a website you visit frequently or really enjoy using.

1. What is the name of the website?
   
   
   

2. What do you like most about its design or how it works? (Think about its appearance, how easy it is to navigate, or how it makes you feel when you use it.)
   
   
   
   
   
   

3. Is there anything you would change or improve about its design? Why?
   
   
   
   
   
   

The Web Before the Wires: A Look at Early Web Design

Have you ever wondered what the internet looked like before sleek designs and instant loading pages? For many, the idea of designing a website without a computer seems impossible. Yet, the foundations of web design were laid long before the digital age truly took hold.

Designing in the Analog World

In the very early days, even before the World Wide Web became widely accessible, the concept of organizing information and creating user-friendly interfaces was crucial. Imagine a time when designers didn't have Photoshop or sophisticated coding environments. How did they plan what a website would look like and how it would function?

They used methods surprisingly similar to architects planning a building or filmmakers storyboarding a movie:

• Storyboarding: Designers would literally draw out each "page" or screen of a website, showing the flow and content. This helped visualize the user's journey.
• Wireframing: These were simple, hand-drawn sketches that represented the layout of a page. They focused on where elements like headers, text blocks, and images would go, without worrying about colors or specific fonts.
• Paper Prototypes: Sometimes, designers would create more detailed paper versions of interfaces, cutting out elements and moving them around to simulate user interaction. This allowed them to test usability before writing a single line of code.

This analog approach emphasized planning, user experience, and information architecture – all principles that are still critical in modern web design.

Key Terminology: The Language of the Web

To understand web design, it's important to know the language. Here are some fundamental terms:

• HTML (HyperText Markup Language): This is the standard language for creating web pages. It provides the structure and content of a webpage, using "tags" to define elements like headings, paragraphs, and links.
• CSS (Cascading Style Sheets): This language describes the presentation of a web page. It controls the visual style – colors, fonts, spacing, layout – separating the content from its design.
• URL (Uniform Resource Locator): This is the unique address that identifies a resource on the internet, essentially a website's address (e.g., https://www.example.com).
• Domain Name: This is the human-readable name for a website (e.g., google.com). It's much easier to remember than an IP address.
• Web Server: A computer program that stores website files and delivers web pages to users upon request.
• Browser: Software applications like Chrome, Firefox, or Safari that allow users to access and view websites.
• User Interface (UI): The visual elements of a website that a user interacts with, such as buttons, menus, text fields, and images.
• User Experience (UX): This refers to a person's emotions and attitudes about using a particular product, system, or service. In web design, good UX means a website is easy, efficient, and pleasant to use.
• Front-end: Refers to everything that users see and interact with directly on a website. It involves the coding of HTML, CSS, and JavaScript.
• Back-end: The server-side of a website, including the server, application, and database. It works behind the scenes to power the front-end.

Dreamweaver: A Bridge to Digital Design

As the internet grew, the need for more efficient ways to build websites became clear. Writing every line of HTML and CSS by hand was time-consuming and required specialized coding knowledge. This led to the development of tools that made web design more accessible.

One of the most influential early tools was Macromedia Dreamweaver (which later became Adobe Dreamweaver). Launched in 1997, Dreamweaver revolutionized web design by introducing a WYSIWYG (What You See Is What You Get) editor. This meant designers could create web pages visually, dragging and dropping elements and seeing the results immediately, much like using a word processor or a desktop publishing program. Dreamweaver would then automatically generate the underlying HTML and CSS code.

Dreamweaver's impact was significant:

• Democratized Web Design: It allowed designers with less coding expertise to create professional-looking websites, opening up the field to a wider range of creatives.
• Increased Efficiency: It significantly sped up the development process, as designers didn't have to manually code every element.
• Visual Workflow: It provided a visual interface that aligned with traditional graphic design principles, making the transition to web design smoother for many.

While modern web development often involves more direct coding and specialized frameworks, Dreamweaver played a crucial role in the evolution of web design, bridging the gap between purely manual coding and the sophisticated tools we use today. It helped establish the idea that web creation could be both technical and visually driven.

Web Design Terminology Challenge

Part 1: Match the Term to its Definition

Draw a line connecting each web design term in Column A to its correct definition in Column B.

Column A

1. HTML
2. CSS
3. URL
4. Domain Name
5. Web Server
6. Browser
7. UI
8. UX
9. Front-end
10. Back-end
11. WYSIWYG

Column B
a. The unique address for a resource on the internet.
b. The structure and content of a webpage.
c. The visual elements a user interacts with on a website.
d. The server-side of a website, including the database and application.
e. Software used to view websites.
f. Describes the presentation and style of a webpage.
g. "What You See Is What You Get" - an editor that displays content similar to how it will appear.
h. The human-readable name for a website (e.g., example.com).
i. Everything users see and interact with directly on a website.
j. A computer program that stores and delivers website files.
k. A person's emotions and attitudes about using a product or service.

Part 2: Short Answer Questions

1. Before digital tools, how did designers plan the layout of a website? Name two methods.
   
   
   
   
   
   
   

2. What was a significant impact of early software like Dreamweaver on web design?
   
   
   
   
   
   
   

3. Why is a good User Experience (UX) important for a website?
   
   
   
   
   
   
   

Web Design: Unpacking the Basics

Use these prompts to guide a class discussion after introducing the initial concepts of web design, its history, and key terminology.

Discussion Questions:

1. Connecting to the Past: We talked about how web design was done before computers, using storyboards and wireframes. How do these analog methods still inform or relate to how digital web designers work today?
   
   
   
   

2. The Power of Language: Which of the web design terms (HTML, CSS, URL, UI, UX, etc.) do you think is the most important for someone to understand if they want to build a website, and why?
   
   
   
   

3. WYSIWYG Impact: Dreamweaver introduced the "What You See Is What You Get" (WYSIWYG) concept. How do you think this changed who could create websites and the overall quality or creativity of early websites?
   
   
   
   

4. User Experience in Action: Think back to the websites you mentioned in the warm-up. How do the concepts of User Interface (UI) and User Experience (UX) play a role in making those websites good or bad? Can a website have great UI but bad UX? Explain.
   
   
   
   

5. Evolution of Tools: If Dreamweaver was a revolution for its time, what kind of tools or features do you think modern web designers need or use that are revolutionary today? (Even if you don't know specific names, describe what they might do.)
   
   
   
   

Analog Web Design Challenge: Design Your Hobby Page (1995 Edition!)

Objective: To understand the fundamental principles of web design, like layout and user flow, using pre-digital, analog methods.

Scenario: It's 1995. The internet is new and exciting, but advanced design software isn't readily available. You want to create a simple website about your favorite hobby (e.g., collecting comic books, playing a sport, a specific video game, painting, cooking, etc.). You need to plan its layout and how users will navigate it, using only paper and basic drawing tools.

Materials:

• Blank paper (or index cards for multiple pages)
• Pens, pencils, markers
• Optional: sticky notes, scissors

Instructions (Work in small groups or individually):

1. Choose Your Hobby: Decide on a favorite hobby that you'll create a website for.

2. Homepage Wireframe (5 minutes):

   • On a piece of paper, sketch out your website's homepage. This is called a wireframe.
   • Don't worry about artistic details or specific colors. Focus on the layout and where information will go.
   • Include boxes for things like: a title/logo, main navigation links (e.g., "About," "Gallery," "Contact"), a main content area, a place for an image, and a footer.
   • Label each box with its purpose (e.g., "Logo," "Main Nav," "Hero Image," "About Section").

3. User Flow Sketch (3 minutes):

   • On another piece of paper (or simply draw arrows on your homepage wireframe), sketch out a simple user flow.
   • Show how a user would click from your homepage to at least one other page (e.g., from "Homepage" to "Gallery" to a "Specific Item").
   • Use arrows to indicate the path a user would take.

4. Share & Reflect (Optional):

   • If time permits, share your analog designs with another group or the class.
   • Discuss: What challenges did you face when designing without digital tools? How did focusing on layout and flow help you think about the user experience?

Web Design History Whiz! - Quick Game

Objective: Quickly review key facts and terminology from the history of web design.

Instructions:

• Divide the class into 2-3 teams.
• The teacher will read a question. The first team to raise their hand and provide the correct answer gets a point.
• If a team answers incorrectly, another team can try to steal the point.
• The team with the most points at the end wins bragging rights!

Game Questions:

1. Question: What does HTML stand for?

   • Answer: HyperText Markup Language

2. Question: What is the primary purpose of CSS in web design?

   • Answer: To control the style and appearance of a webpage (colors, fonts, layout).

3. Question: Before digital tools, what was one way designers would sketch out the layout of a webpage?

   • Answer: Wireframing or Storyboarding or Paper Prototypes

4. Question: What does the acronym URL represent?

   • Answer: Uniform Resource Locator

5. Question: Which early web design software was famous for its WYSIWYG editor?

   • Answer: Macromedia Dreamweaver (or Adobe Dreamweaver)

6. Question: What does WYSIWYG stand for?

   • Answer: What You See Is What You Get

7. Question: Is a website's domain name its unique address or its memorable name?

   • Answer: Its memorable name.

8. Question: What is the difference between UI (User Interface) and UX (User Experience)?

   • Answer: UI is what users see and interact with (buttons, visuals), while UX is how they feel when using the website (easy, frustrating).

9. Question: What is a Web Server?

   • Answer: A computer that stores website files and delivers them to browsers.

10. Question: What part of web development deals with everything users don't see, like databases and server logic?

    • Answer: Back-end

Web Design Answer Key

This answer key provides solutions for the Web Design Terminology Worksheet and the Web Design Quiz.

Web Design Terminology Worksheet - Answer Key

Part 1: Match the Term to its Definition

1. HTML -> b. The structure and content of a webpage.
2. CSS -> f. Describes the presentation and style of a webpage.
3. URL -> a. The unique address for a resource on the internet.
4. Domain Name -> h. The memorable name for a website (e.g., example.com).
5. Web Server -> j. A computer program that stores and delivers website files.
6. Browser -> e. Software used to view websites.
7. UI -> c. The visual elements a user interacts with on a website.
8. UX -> k. A person's emotions and attitudes about using a product or service.
9. Front-end -> i. Everything users see and interact with directly on a website.
10. Back-end -> d. The server-side of a website, including the database and application.
11. WYSIWYG -> g. "What You See Is What You Get" - an editor that displays content similar to how it will appear.

Part 2: Short Answer Questions

1. Before digital tools, how did designers plan the layout of a website? Name two methods.

   • Thought Process: The lesson discussed analog methods like storyboarding, wireframing, and paper prototypes. Any two of these are acceptable.
   • Answer: Designers used methods like wireframing (simple sketches of page layouts) and storyboarding (drawing out each page like a comic book) to plan websites before advanced digital tools.

2. What was a significant impact of early software like Dreamweaver on web design?

   • Thought Process: Dreamweaver's key innovation was WYSIWYG editing, which made web design more accessible and efficient. Focus on these aspects.
   • Answer: Dreamweaver made web design more accessible to non-coders by providing a WYSIWYG editor, allowing designers to create websites visually. This democratized web design and sped up development.

3. Why is a good User Experience (UX) important for a website?

   • Thought Process: Good UX leads to user satisfaction, ease of use, and effective interaction with the website. Conversely, bad UX leads to frustration.
   • Answer: A good User Experience (UX) is important because it ensures a website is easy, efficient, and pleasant for users to navigate and interact with. This leads to user satisfaction, encouraging them to stay on the site and achieve their goals without frustration.

Web Design Quiz - Answer Key

1. Which term describes the structure and content of a webpage?

   • Correct Answer: HTML
   • Thought Process: HTML is foundational for content and structure, while CSS handles style, URL is the address, and UX is the experience.

2. What does WYSIWYG stand for, in the context of web design software like Dreamweaver?

   • Correct Answer: What You See Is What You Get
   • Thought Process: WYSIWYG is a direct acronym describing visual editors.

3. Name two methods designers used to plan websites before advanced digital tools were available.

   • Correct Answer: Wireframing, Storyboarding, Paper Prototypes (any two)
   • Thought Process: Recall the analog methods discussed in the reading and slides.

4. Which of the following primarily controls the style and appearance (colors, fonts) of a webpage?

   • Correct Answer: CSS
   • Thought Process: CSS is specifically for styling; HTML is for structure.

5. Briefly explain the difference between User Interface (UI) and User Experience (UX).

   • Correct Answer: UI is the visual elements a user interacts with (what it looks like), while UX is how a user feels when using the website (how it feels to use).
   • Thought Process: Emphasize UI as visual/interaction points and UX as the emotional/usability aspect.

6. What is the role of a Web Server?

   • Correct Answer: To store website files and deliver them to users.
   • Thought Process: A web server hosts the website and serves it upon request.

7. Macromedia Dreamweaver was significant because it:

   • Correct Answer: Allowed visual web design without extensive manual coding.
   • Thought Process: Its WYSIWYG nature was its primary innovation and impact.

8. Why is a good User Experience (UX) considered important for a website?

   • Correct Answer: A good UX makes a website easy, efficient, and enjoyable to use, leading to user satisfaction and successful interaction.
   • Thought Process: Focus on the benefits of good UX for the user and the website's goals.

My First Website: Analog to Digital Planning Project

Objective: To design the conceptual framework for a simple website, applying foundational web design principles and understanding the progression from analog planning to digital implementation.

Scenario: You are a budding web designer tasked with creating a basic website for a local community event, a small business, or a personal passion project (e.g., a local charity bake sale, a neighborhood dog walking service, or a fan page for your favorite band). You need to plan the website from the ground up, just like designers did in the early days, but with an eye towards modern digital execution.

Project Goal: To create a detailed planning document that includes analog sketches and a clear outline of the website's structure, content, and user experience, incorporating the terminology learned in class.

Deliverables:

1. Project Proposal (Short Answer - ~100 words):

   • What is the purpose of your website? (What problem does it solve or what information does it provide?)
   • Who is your target audience?
   • What is the primary goal you want users to achieve on your site?
     
     
     
     
     
     
     

2. Analog Wireframes (2-3 sketches):

   • Homepage Wireframe: A hand-drawn sketch (on paper) showing the main layout of your homepage. Include clear boxes for elements like: Logo/Site Title, Main Navigation (links to other pages), Hero Image/Banner, Main Content Area, and Footer.
   • Sub-page Wireframe(s): At least one additional hand-drawn sketch for a key sub-page (e.g., an 'About Us' page, a 'Services' page, or a 'Gallery' page). Show how its layout differs from the homepage and what specific content it will hold.
   • Annotation: For each wireframe, briefly label key elements with appropriate web design terminology (e.g., "Header," "Navigation (UI)," "Main Content," "Footer," "Call to Action Button").

3. User Flow Diagram (Simple Sketch):

   • A simple hand-drawn diagram showing how a user would navigate through your site from the homepage to the sub-page(s) you designed. Use arrows to indicate clicks and movement between pages.
   • Briefly explain the intended User Experience (UX) for this flow (e.g., "User clicks 'About' to learn more about the service, which is a smooth and intuitive process").
     
     
     
     
     
     
     

4. Key Terminology Application (Short Answer - ~150 words):

   • Identify at least three web design terms from our lesson (e.g., HTML, CSS, URL, Domain Name, Web Server, UI, UX, Front-end, Back-end, WYSIWYG).
   • For each term, explain how it would apply to your specific website project if you were to build it digitally. For example, what would be your website's Domain Name? What elements on your homepage would be part of the UI? How would you consider UX when designing your navigation?
     
     
     
     
     
     
     
     
     
     
     
     

Assessment: Your project will be assessed based on the completeness of your deliverables, the clarity and thought put into your designs, and your correct application of web design terminology. Refer to the Web Design Project Rubric for detailed criteria.

Web Design Project Rubric: My First Website

Project Name: My First Website: Analog to Digital Planning Project
Student Name: ___________________________

Total Score: ________ / 20

Web Design: What Stuck With You?

Name: ___________________________

1. What is one new thing you learned about web design or its history today?
   
   
   
   
   
   
   

2. How do you think understanding the basics of web design (like UI/UX or historical context) might change how you look at websites you visit in the future?