Unit 1: Designing and Planning Web Pages

Overview

This unit will give students a basic understanding of core design principles that apply to web design and development. It will help them to establish criteria for evaluating the quality of websites, introduce them to color theory and web design standards, and introduce them to the concepts of developing a site plan and storyboarding. Some of this unit can be completed without using computer.

Estimated time required: 7 to 10 hours

Learner Outcomes

Students will:

• be able to critically evaluate web sites based on purpose, design and usability.
• be able to identify the major criteria that experts use to evaluate web sites and apply those criteria to your own evaluations.
• demonstrate their ability to critically examine the quality of a web site by developing a web site evaluation tool.
• be able to communicate to others their ideas about what makes a high quality web site and explain how they would evaluate a site.
• be able to explain the basic concepts related to using color and the web.
• be able to identify and make use of color related resources online
• be able to identify accessibility concerns related to color and implement key strategies to make sites accessible to people who are color blind
• be able to identify why it is important to develop websites that comply with web standards.
• be able to describe the differences between HTML and CSS.
• be able to describe some basic differences between the earliest and latest versions of HTML.
• be able to explain principles of information architecture including the five basic steps to organizing information on a web page and the three essential structures for organizing web sites
• be able to organize web content by creating a navigation system that appropriately chunks web content and allows users to quickly, easily access important content.

Instructor Tips

On the very first day, one good way to start is by having a survey of skills related to web design. One of the main reasons for doing this is to demonstrate to students the wide range of skills that are part of the web design field. It's also helpful for you to get a sense of the strengths and weaknesses that each student brings to the class. We have provided an example survey that can be used for this purpose. The survey touches upon different aspects of web design. The connection to web design is obvious for some of the questions, but for some questions the connection might be less direct. Nonetheless, all the questions deal with skills the students will need in this course.

Note that the survey is in HTML. By default, it isn't a live interactive form but could easily be converted to one by anyone with the server-side scripting skills to process the results. Even the survey form is not interactive, students can complete it using their web browsers then print it out. Using an HTML form helps to demonstrate web design, and this particular form uses clean, simple, valid, and accessible HTML so it's a good example for advanced students who want to learn about creating forms (this topic is not otherwise covered in this course).

Using an HTMl form also provides a fully accessible means for students with disabilities to complete the survey. A printed, handwritten form that students are expected to complete by hand is not accessible to students who are unable to see or write with pen or pencil.

Modules

• Day One: Class Preparation
• Module 1: Website Evaluation and Rubric Creation
• Module 2: Color Theory
• Module 3: Web Standards and Accessible Design
• Module 4: Planning a Website

Assessment

See the Unit 1 Question Bank for sample questions, organized by module. These questions could be used as needed for quizzes and exams. See also our Recommended Assessment for the overall course.