Module 2: Color Theory and Basic Design Concepts

Overview:

*Teachers Note:

Module 2: List of lessons: It is important that students have begun

• Lesson 1: Color Theory in Web Design (Lesson length 60 - 90 minutes)
  • Description: Students are now ready to explore the use of color theory in web design. This lesson should be done following the the "Personal Web Page" created in Unit Two.
  • Learner Outcome: At the end of this lesson students will recognize terminology, principles and elements of the effective use of color in web page design. Students will also create examples of using specific color schemes in web page layout.
  • Activity:
    • Begin by having students open the link to the Lesson 2-1assignment page in unit 1.
    • They will then view the online slide presentation on Color Theory in Web Design (Lesson 2-1a)
    • Individually, using markers and other color art supplies, students will design full color rough sketches on paper of two web sites, modeling them after the example sites and basing them on two of the following four color schemes:
      • Monogamous
      • Complimentary
      • Triadic
      • Analogous
    • Using what they know of HTML coding for background colors, text colors and images, they will create two pages following the color scheme sketches as closely as possible. The pages should be labeled with the color scheme you were using, but otherwise the subject matter is up to you. Link these pages to the personal page you began in Unit 2. (This may involve basic Photoshop use for those that have been introduced to the program. Searching the web for images can be time consuming, therefore you may want to save a number of monochromatic images in a folder for them to use for this assignment.)
  • Resources Needed:
    • Internet access
    • Images for page creation.
    • Color markers and paper for color theory page storyboards
  • Suggested Assessment:
    • Discussion following the assignment.
    • This assignment may be assessed separately from the module as one aspect of the personal page, or the storyboard sketches may be evaluated separately.

     

• Lesson 2: Basic Design Concepts in Building Effective Web Pages (Lesson length 60 - 90 minutes)
  • Description: This lesson helps students understand some of the particular aspects of page layout design that help to make a web page effective. The acitivities in this lesson reinforce the aspects of "good" web page design that were explored in module one, while focusing on the specific skills and tricks that help a page achieve effectiveness in the areas of the rubric exercise.
  • Learner Outcomes: Students will recognize basic elements of effective page layout design (reinforcing and building on the activities in Lesson 1-1-3. They will find examples of effective (and ineffective) page layout .
  • Activities: Have students open the link to the Lesson 2-2 assignment page in unit 1. In this lesson they will browse a list of CNET's web design tips, paying special attention to design, layout and navigation tips including the following:
  • Above the fold design
  • Multiple navigation options
  • Narrow column type
  • Avoid scrolling text
  • Locate logos consistently

  Students will choose three tips for effective page design from this site that they understand and agree with and return to the school sites that we explored in lesson one (linked below). Find at least three sites that either effectively follow one or more of your three tips, or sites that run afoul of the principles you chose. Try to cover all three design tips. Students then create a simple text-based web page describing the three sites they found and include the following:

  • Student name and a title
  • The name and a short description of each of the three design tips.
  • For each site: the name (linked to the site) and a one paragraph description of how this site either effectively follows one of your design tips, or is ineffective because it does not follow the tip.
  • Students should try to follow as many of the design tips as possible when designing their own pages.
  • Finally they will link this to the main page of your personal site begun in Unit 2

   

  *Teachers Note: You may teach this lesson without the web page construction component by simply having them create a word processing document with the same information.

  • If students have extra time they may take a look at these other site design resources for more examples of good and poor design:
    • Thoughts on Web Design
    • Sites That Bite
    • CoolHomePages.com

      * Teachers Note: CoolHomePages is an excellent example site, but it changes examples periodically. You may want to preview the current lineup before sending your students to it for examples.

  • Handout/Resources Needed:
    • Internet connection
    • Text resources on web design (ex: Great Web Architecture)

   

  • Suggested Assessment:
  • Students may share their findings in small groups and finally come together for full class discussion on their findings. The instructor may evaluate the web page product separately or as a component of the personal page. If done on paper the instructor may collect it and assess separately.