Web Design for Clients: A Technology Project
Created byTonya Skinner
3 views0 downloads

Web Design for Clients: A Technology Project

Grade 11Technology3 days
★★★★★
5.0 (1 rating)
In this project, students take on the role of web designers to create effective and ethical websites for real-world clients. They'll translate client needs into functional designs, focusing on UI/UX principles and using HTML and CSS for structure and styling. The project emphasizes website responsiveness, accessibility, and ethical considerations, ensuring optimal user experience across various platforms.
Web DesignHTMLCSSUI/UXAccessibilityClient CommunicationEthics
Want to create your own PBL Recipe?Use our AI-powered tools to design engaging project-based learning experiences for your students.
📝

Inquiry Framework

Question Framework

Driving Question

The overarching question that guides the entire project.How can we, as web designers, create effective and ethical websites that meet the diverse needs of a real-world client while ensuring optimal user experience across various platforms?

Essential Questions

Supporting questions that break down major concepts.
  • How do you translate a client's needs into a functional website design?
  • What are the key elements of effective user interface (UI) and user experience (UX)?
  • How do HTML and CSS work together to create visually appealing and accessible websites?
  • How do you ensure a website is responsive and accessible across different devices and browsers?
  • What are the ethical considerations in web design, such as privacy and accessibility?

Standards & Learning Goals

Learning Goals

By the end of this project, students will be able to:
  • Apply web design principles to create a functional website for a client.
  • Utilize HTML and CSS to develop website structure and styling.
  • Incorporate UI/UX design principles to enhance user experience.
  • Ensure website responsiveness and accessibility across multiple devices.
  • Address ethical considerations related to web design.

Entry Events

Events that will be used to introduce the project to students

Website Rescue

Students participate in a website critique activity, evaluating existing websites (good and bad) based on UI/UX principles. They identify design flaws and propose improvements, fostering critical thinking and setting the stage for incorporating UI/UX design principles in their own projects. This entry event generates discussion around design choices and user experience.
📚

Portfolio Activities

Portfolio Activities

These activities progressively build towards your learning goals, with each submission contributing to the student's final portfolio.
Activity 1

Client Needs Assessment

Students will learn the basics of client communication and needs assessment by conducting an initial interview with their assigned client. They will document the client's requirements, preferences, and goals for the website.

Steps

Here is some basic scaffolding to help students complete the activity.
1. Schedule an initial meeting with the client to introduce yourself and the project.
2. Prepare a list of open-ended questions to understand the client's business, target audience, and website goals.
3. Actively listen and take detailed notes during the client interview.
4. Summarize the client's needs and preferences in a written brief.
5. Get client approval on the brief to ensure alignment and understanding.

Final Product

What students will submit as the final product of the activityA detailed client brief outlining the project scope, target audience, design preferences, and key functionalities.

Alignment

How this activity aligns with the learning objectives & standardsLearning Goal: Apply web design principles to create a functional website for a client.
Activity 2

Wireframe & HTML Structure

Students will create a basic website wireframe based on the client brief, outlining the structure and layout of key pages. They will then translate the wireframe into HTML, creating the basic skeleton of the website with semantic HTML tags.

Steps

Here is some basic scaffolding to help students complete the activity.
1. Review the client brief and identify the key pages and content sections required for the website.
2. Create a low-fidelity wireframe for each key page, outlining the placement of content, images, and interactive elements.
3. Use HTML to create the basic structure of each page, using semantic tags such as <header>, <nav>, <main>, <article>, and <footer>.
4. Ensure the HTML is valid and well-formatted.

Final Product

What students will submit as the final product of the activityA low-fidelity wireframe and a basic HTML structure of the website, including header, navigation, main content sections, and footer.

Alignment

How this activity aligns with the learning objectives & standardsLearning Goal: Utilize HTML and CSS to develop website structure and styling.
Activity 3

CSS Styling & Responsiveness

Students will apply CSS to style the HTML structure created in the previous activity. They will focus on basic styling such as typography, colors, layout, and responsiveness.

Steps

Here is some basic scaffolding to help students complete the activity.
1. Create an external CSS file and link it to the HTML document.
2. Use CSS selectors to target specific HTML elements and apply styles such as font-family, font-size, color, and background-color.
3. Implement a basic layout using CSS, such as a grid or flexbox layout.
4. Use media queries to make the website responsive and adapt to different screen sizes.
5. Test the website on different devices and browsers to ensure consistent styling.

Final Product

What students will submit as the final product of the activityA styled website using CSS, demonstrating an understanding of selectors, properties, and values. The website should be responsive and visually appealing.

Alignment

How this activity aligns with the learning objectives & standardsLearning Goal: Utilize HTML and CSS to develop website structure and styling.
Activity 4

Usability Testing & Iteration

Students will conduct user testing on their website prototype, gathering feedback on usability, navigation, and overall user experience. They will then iterate on their design based on the feedback received.

Steps

Here is some basic scaffolding to help students complete the activity.
1. Recruit a group of target users to test the website prototype.
2. Create a user testing script with specific tasks for users to complete.
3. Observe users as they interact with the website, taking notes on their behavior and feedback.
4. Analyze the user testing data and identify areas for improvement.
5. Implement changes to the website based on the user feedback.
6. Document the user testing process and the changes made in a report.

Final Product

What students will submit as the final product of the activityA revised website prototype incorporating user feedback, along with a report summarizing the user testing process and the changes made.

Alignment

How this activity aligns with the learning objectives & standardsLearning Goal: Incorporate UI/UX design principles to enhance user experience.
Activity 5

Accessibility Audit & Remediation

Students will conduct a comprehensive accessibility audit of their website using accessibility testing tools and guidelines (e.g., WCAG). They will identify and fix any accessibility issues, such as missing alt text, poor color contrast, or keyboard navigation problems.

Steps

Here is some basic scaffolding to help students complete the activity.
1. Use an accessibility testing tool to scan the website for accessibility issues.
2. Review the accessibility report and identify areas where the website does not meet WCAG guidelines.
3. Implement changes to the website to fix the accessibility issues, such as adding alt text to images, improving color contrast, and ensuring keyboard navigation.
4. Re-test the website to ensure that the accessibility issues have been resolved.
5. Document the accessibility testing process and the changes made in a report.

Final Product

What students will submit as the final product of the activityAn accessible website that meets WCAG guidelines, along with an accessibility report detailing the issues identified and the steps taken to resolve them.

Alignment

How this activity aligns with the learning objectives & standardsLearning Goal: Ensure website responsiveness and accessibility across multiple devices.
Activity 6

Code of Ethics

Students will research and document the ethical considerations related to web design, such as privacy, data security, and responsible use of technology. They will then write a code of ethics for their web design practice, outlining their commitment to ethical principles.

Steps

Here is some basic scaffolding to help students complete the activity.
1. Research the ethical considerations related to web design, such as privacy, data security, and accessibility.
2. Discuss the ethical implications of web design with the client.
3. Write a code of ethics for your web design practice, outlining your commitment to ethical principles.
4. Get client sign off on the code of ethics.

Final Product

What students will submit as the final product of the activityA written code of ethics for web design, addressing privacy, data security, accessibility, and responsible use of technology.

Alignment

How this activity aligns with the learning objectives & standardsLearning Goal: Address ethical considerations related to web design.
🏆

Rubric & Reflection

Portfolio Rubric

Grading criteria for assessing the overall project portfolio

Website Design Portfolio Rubric

Category 1

Client Needs Assessment

Assesses the student's ability to effectively communicate with a client and accurately document their needs in a detailed brief.
Criterion 1

Client Brief Completeness

Clarity and completeness of the client brief, including project scope, target audience, and key functionalities.

Beginning
1 Points

The client brief is incomplete and lacks essential information about the project scope, target audience, and key functionalities. Key details are missing, making it difficult to understand the client's needs.

Developing
2 Points

The client brief includes some information about the project scope, target audience, and key functionalities, but it lacks detail and clarity. Some areas may be vague or unclear.

Proficient
3 Points

The client brief is thorough and includes clear information about the project scope, target audience, and key functionalities. It provides a solid foundation for the website design.

Exemplary
4 Points

The client brief is exceptionally detailed and comprehensive, providing a deep understanding of the client's needs, target audience, and key functionalities. It demonstrates excellent communication and attention to detail.

Criterion 2

Client Communication

Effectiveness of client communication and active listening during the interview process.

Beginning
1 Points

Demonstrates poor communication skills and fails to actively listen to the client's needs. Struggles to gather relevant information.

Developing
2 Points

Demonstrates basic communication skills but struggles to actively listen to the client's needs. Gathers some relevant information.

Proficient
3 Points

Demonstrates effective communication skills and actively listens to the client's needs. Gathers relevant and useful information.

Exemplary
4 Points

Demonstrates excellent communication skills and actively listens to the client's needs. Asks insightful questions and gathers comprehensive and valuable information.

Criterion 3

Client Brief Accuracy

Accuracy and alignment of the client brief with the client's actual needs and preferences.

Beginning
1 Points

The client brief significantly misrepresents the client's needs and preferences.

Developing
2 Points

The client brief partially reflects the client's needs and preferences but contains some inaccuracies.

Proficient
3 Points

The client brief accurately reflects the client's needs and preferences.

Exemplary
4 Points

The client brief perfectly captures the client's needs and preferences, demonstrating a deep understanding of the client's vision.

Category 2

Wireframe & HTML Structure

Evaluates the student's ability to create a basic website structure using wireframes and semantic HTML.
Criterion 1

Wireframe Clarity

Clarity and organization of the wireframe, demonstrating a clear understanding of website layout and information hierarchy.

Beginning
1 Points

The wireframe is disorganized and difficult to understand, lacking a clear information hierarchy.

Developing
2 Points

The wireframe is somewhat organized but lacks clarity in some areas. The information hierarchy is not always clear.

Proficient
3 Points

The wireframe is clear and well-organized, demonstrating a good understanding of website layout and information hierarchy.

Exemplary
4 Points

The wireframe is exceptionally clear, well-organized, and intuitive, demonstrating a sophisticated understanding of website layout and information hierarchy.

Criterion 2

Semantic HTML

Correct use of semantic HTML tags to structure the website content.

Beginning
1 Points

Incorrect or missing use of semantic HTML tags.

Developing
2 Points

Some correct use of semantic HTML tags, but with errors or omissions.

Proficient
3 Points

Correct and consistent use of semantic HTML tags.

Exemplary
4 Points

Excellent and sophisticated use of semantic HTML tags to create a well-structured and accessible website.

Criterion 3

HTML Validity

Validity and well-formedness of the HTML code.

Beginning
1 Points

HTML code is invalid and poorly formed, with numerous errors.

Developing
2 Points

HTML code contains some errors and is not well-formed.

Proficient
3 Points

HTML code is valid and well-formed.

Exemplary
4 Points

HTML code is impeccably valid, well-formed, and follows best practices for readability and maintainability.

Category 3

CSS Styling & Responsiveness

Assesses the student's ability to style the website using CSS and ensure responsiveness across different devices.
Criterion 1

CSS Styling

Correct and effective use of CSS selectors, properties, and values to style the website elements.

Beginning
1 Points

Incorrect or ineffective use of CSS selectors, properties, and values.

Developing
2 Points

Some correct use of CSS selectors, properties, and values, but with errors or inconsistencies.

Proficient
3 Points

Correct and effective use of CSS selectors, properties, and values.

Exemplary
4 Points

Excellent and creative use of CSS selectors, properties, and values to create a visually appealing and engaging website.

Criterion 2

CSS Layout

Implementation of a basic layout using CSS, such as grid or flexbox.

Beginning
1 Points

No attempt to implement a layout using CSS.

Developing
2 Points

Attempt to implement a layout, but with significant errors or inconsistencies.

Proficient
3 Points

Successful implementation of a basic layout using CSS.

Exemplary
4 Points

Sophisticated and effective implementation of a layout using CSS, demonstrating a deep understanding of layout principles.

Criterion 3

Responsiveness

Responsiveness of the website across different screen sizes, achieved through media queries.

Beginning
1 Points

Website is not responsive and does not adapt to different screen sizes.

Developing
2 Points

Website is partially responsive but has significant issues on different screen sizes.

Proficient
3 Points

Website is responsive and adapts well to different screen sizes.

Exemplary
4 Points

Website is exceptionally responsive and provides an optimal user experience across a wide range of devices and screen sizes.

Category 4

Usability Testing & Iteration

Evaluates the student's ability to conduct user testing, analyze feedback, and iterate on their design based on the feedback received.
Criterion 1

User Testing Thoroughness

Thoroughness of user testing, including recruitment of target users and creation of a user testing script.

Beginning
1 Points

User testing was not conducted or was incomplete.

Developing
2 Points

User testing was conducted but lacked thoroughness in user recruitment or script creation.

Proficient
3 Points

User testing was conducted with a reasonable number of target users and a well-defined script.

Exemplary
4 Points

User testing was exceptionally thorough, with a diverse group of target users and a comprehensive user testing script.

Criterion 2

Feedback Analysis

Effectiveness of user feedback analysis and identification of areas for improvement.

Beginning
1 Points

Fails to analyze user feedback effectively and identify areas for improvement.

Developing
2 Points

Analyzes user feedback superficially and identifies few areas for improvement.

Proficient
3 Points

Analyzes user feedback effectively and identifies key areas for improvement.

Exemplary
4 Points

Analyzes user feedback with exceptional insight and identifies innovative areas for improvement.

Criterion 3

Revision Quality

Quality of the website revisions based on user feedback.

Beginning
1 Points

Website revisions do not address the user feedback or make the website worse.

Developing
2 Points

Website revisions partially address the user feedback but have limited impact.

Proficient
3 Points

Website revisions effectively address the user feedback and improve the user experience.

Exemplary
4 Points

Website revisions demonstrate a deep understanding of user needs and result in a significantly improved user experience.

Category 5

Accessibility Audit & Remediation

Assesses the student's ability to conduct an accessibility audit and remediate any issues to meet WCAG guidelines.
Criterion 1

Accessibility Testing

Use of accessibility testing tools to identify accessibility issues.

Beginning
1 Points

Accessibility testing tools were not used.

Developing
2 Points

Accessibility testing tools were used, but the report was not reviewed thoroughly.

Proficient
3 Points

Accessibility testing tools were used and the report was reviewed to identify accessibility issues.

Exemplary
4 Points

Accessibility testing tools were used comprehensively and the report was analyzed with exceptional attention to detail.

Criterion 2

Accessibility Remediation

Implementation of changes to fix accessibility issues and meet WCAG guidelines.

Beginning
1 Points

No changes were made to address accessibility issues.

Developing
2 Points

Some changes were made, but they did not effectively address the accessibility issues.

Proficient
3 Points

Changes were implemented to effectively address the accessibility issues and meet WCAG guidelines.

Exemplary
4 Points

Changes were implemented with exceptional skill and attention to detail, resulting in a highly accessible website that exceeds WCAG guidelines.

Criterion 3

Accessibility Report

Completeness and accuracy of the accessibility report, detailing the issues identified and the steps taken to resolve them.

Beginning
1 Points

The accessibility report is missing or incomplete.

Developing
2 Points

The accessibility report is partially complete but lacks detail or accuracy.

Proficient
3 Points

The accessibility report is complete and accurately details the issues identified and the steps taken to resolve them.

Exemplary
4 Points

The accessibility report is exceptionally detailed, insightful, and provides a comprehensive overview of the accessibility testing and remediation process.

Category 6

Code of Ethics

Evaluates the student's ability to research, document, and apply ethical considerations to web design.
Criterion 1

Ethical Research

Depth of research into ethical considerations related to web design, such as privacy, data security, and accessibility.

Beginning
1 Points

Little to no research into ethical considerations.

Developing
2 Points

Superficial research into ethical considerations.

Proficient
3 Points

Thorough research into ethical considerations.

Exemplary
4 Points

Extensive and insightful research into ethical considerations.

Criterion 2

Code of Ethics

Clarity and comprehensiveness of the code of ethics, addressing privacy, data security, accessibility, and responsible use of technology.

Beginning
1 Points

The code of ethics is unclear, incomplete, and does not address key ethical considerations.

Developing
2 Points

The code of ethics is somewhat clear and addresses some ethical considerations, but it lacks detail.

Proficient
3 Points

The code of ethics is clear, comprehensive, and addresses all key ethical considerations.

Exemplary
4 Points

The code of ethics is exceptionally clear, comprehensive, and demonstrates a deep understanding of ethical principles and their application to web design.

Criterion 3

Ethical Discussion

Engagement and depth of discussion with the client regarding ethical implications.

Beginning
1 Points

No discussion with the client regarding ethical implications.

Developing
2 Points

Superficial discussion with the client regarding ethical implications.

Proficient
3 Points

Meaningful discussion with the client regarding ethical implications.

Exemplary
4 Points

In-depth and insightful discussion with the client regarding ethical implications, demonstrating a strong commitment to ethical practices.

Reflection Prompts

End-of-project reflection questions to get students to think about their learning
Question 1

Reflecting on the entire website design process for your client, what was the most significant challenge you faced and how did you overcome it?

Text
Required
Question 2

Which aspect of your website (e.g., UI/UX design, HTML structure, CSS styling, accessibility) are you most proud of, and why?

Text
Required
Question 3

To what extent do you believe your final website effectively meets the client's initial needs and goals?

Scale
Required
Question 4

If you had the opportunity to redesign this website from scratch, what is one key thing you would do differently, and why?

Text
Required
Question 5

How has this project changed your understanding of web design, and what new skills or knowledge have you gained?

Text
Required
Question 6

To what extent has your understanding of the ethical considerations within web design evolved throughout this project?

Scale
Required
Question 7

Which of the following best describes your confidence in tackling future web design projects?

Multiple choice
Required
Options
Not confident
Slightly confident
Moderately confident
Very confident
Extremely confident