Catalog Description

Prerequisite: Completion of AAD 85 with grade of "C" or better
Hours: 90 (36 lecture, 54 laboratory)
Description: Intermediate course in front-end web design. Current topics in website creation covered as they relate to visual design and user interfaces such as strategies for combining layout, graphics, text, typography, and interactivity in fully functioning websites. Special topics include coverage of industry standards and current technologies. (CSU)

Course Student Learning Outcomes

  • CSLO #1: Prepare and develop an effective workflow for creating websites including site management, designing comps, and application in code.
  • CSLO #2: Synthesize various media elements into a cohesive website, including the use of graphics and images, interactive elements, CSS and code.
  • CSLO #3: Manipulate technologies for enhanced usability, accessibility, and Search Engine Optimization for access by broad populations.

Effective Term

Spring 2021

Course Type

Credit - Degree-applicable

Contact Hours

90

Outside of Class Hours

72

Total Student Learning Hours

162

Course Objectives

Lecture Objectives
1. Demonstrate understanding of current languages, standards, technologies in a written test;
2. Describe planning goals and processes when designing new websites;
3. Distinguish between the uses of foreground and background images;
4. Compare and contrast various methods of CSS-based layout;
5. Compare and contrast various interactive and multimedia technologies for the web;
6. Articulate methods for increasing web accessibility for persons with disabilities;
7. Demonstrate increased knowledge, skill and ability through the creation of more complex web design projects.
Laboratory Objectives:
1. Generate design wireframes and sitemaps for a new website;
2. Design graphics and images for a website;
3. Optimize graphics and images for a website;
4. Generate tiling graphics for a website;
5. Employ image galleries and slideshows for a website;
6. Craft CSS-based layouts using floats and positioning;
7. Craft typographic elements for the web using CSS;
8. Design background images for a website;
9. Generate CSS for various media outputs including print and devices;
10. Employ the use of Javascript to add interactivity to websites;
11. Incorporate animation and video into websites;
12. Configure websites for search engine optimization using various strategies;
13. Incorporate accessibility features in websites and test.

General Education Information

  • Approved College Associate Degree GE Applicability
    • CSU GE Applicability (Recommended-requires CSU approval)
      • Cal-GETC Applicability (Recommended - Requires External Approval)
        • IGETC Applicability (Recommended-requires CSU/UC approval)

          Articulation Information

          • CSU Transferable

          Methods of Evaluation

          • Projects
            • Example: Students are assigned a website project drafting a proposal, creating the desired design elements including graphics and images, constructing the layout, adding the content, controlling consistent presentation throughout using CSS and applying methods for increasing accessibility, usability and search engine optimization, and finally uploading the website via FTP to a remote server. Rubric Graded
          • Skill Demonstrations
            • Example: Students are assigned websites to compare and contrast various methods of CSS-based layout incorporating various interactive and multimedia technologies for the web. Rubric Graded.

          Repeatable

          No

          Methods of Instruction

          • Laboratory
          • Lecture/Discussion
          • Distance Learning

          Lab:

          1. The instructor will lecture and demonstrate on constructing a simple text-based navigation bar using an Unordered List, which is standards compliant and accessible. The instructor will demonstrate and then lead the students in implementing the Image Replacement technique so that the graphics they created are visible on their webpage.

          Lecture:

          1. The instructor will present a lecture on the CSS technique of Image Replacement as a way to use graphics and images in a website without impacting accessibility to text content for users with disabilities. Students are expected to actively participate in the lecture.

          Distance Learning

          1. The instructor will provide a lecture presentation and accompanying tutorial on responsive design techniques, including an introduction to modules such as Flexbox and CSS Grids. Students will then be asked to follow the tutorial on creating a responsive design and applying it to a Website. Students will update their website with the modifications completed and provide a link via the LMS. In addition, students will then respond to prompts with written submissions to share where they succeeded and where there is room for growth in their practice.

          Typical Out of Class Assignments

          Reading Assignments

          1. Read Chapter on Web Fonts in "The Book of CSS" and complete the online Learning Guide accompanying the chapter. 2. Read Chapter on Spry: Creating Interactive Web Pages, in "Dreamweaver CS5.5, The Missing Manual" and be prepared to apply Spry to your webpage in class.

          Writing, Problem Solving or Performance

          1. Prepare an alternate Cascading Style Sheet for your website, which is intended to modify your design for print media. 2. Critique three existing websites based on the handout "Web Design Rules". Identify both good and bad design elements for each site and craft solutions for improvement. Present one site critique in class.

          Other (Term projects, research papers, portfolios, etc.)

          Read chapters on Optimizing Graphics for the Web and Image Ready Slicing. Follow the tutorials for optimizing graphics and slicing. Assignment: Design a single web page layout using files with 3-5 different compression settings. Select images to use based on design fundamentals and target audience. Consider size, color, interest, textures, focus and compositional direction in determining which images will work together on the page. Design the page layout, using pencil and paper. Consider balance, emphasis, repetition, and web page proportions. Set up the design on the computer, fine tuning the placement etc. Determine which compression formats and settings to use for the slices. Include at least one GIF compression and one JPG compression. Evaluation: The assignment will be graded on technical steps of image preparation; appropriateness of compression formats and settings used; file sizes; compositional arrangement; relationship of images to each other; relationship of images to target audience; slicing, and overall impact of page.

          Required Materials

          • CSS: The Missing Manual
            • Author: David Sawyer McFarland
            • Publisher: O’Reilly Media
            • Publication Date: 2015
            • Text Edition:
            • Classic Textbook?: No
            • OER Link:
            • OER:
          • CSS Mastery
            • Author: Budd & Bjorklund
            • Publisher: No Starch PressApress
            • Publication Date: 2013
            • Text Edition: 3rd
            • Classic Textbook?: No
            • OER Link:
            • OER:
          • Adobe Dreamweaver: Classroom in a Book
            • Author: Jim Malvaid
            • Publisher: Adobe Press
            • Publication Date: 2016
            • Text Edition:
            • Classic Textbook?: No
            • OER Link:
            • OER:

          Other materials and-or supplies required of students that contribute to the cost of the course.