Catalog Description

Prerequisite: Completion of AAD 85 with grade of "C" or better
Hours: 90 (36 lecture, 54 laboratory)
Description: Introduction to Interaction Design for the web and devices with a focus on User Experience and User Interface design. The use of CSS, HTML and JavaScript for creating interactive elements and animations will be covered. Use of scripts, animation and multimedia tools and processes will be covered, as will the use of forms and inputs. Stylistic concerns, content development and design process will be examined. Students create original websites focusing on integrating interactivity and animation in a meaningful way. (CSU)

Course Student Learning Outcomes

  • CSLO #1: Apply correct terminology, techniques and processes related to animation and interaction design in order to create finished projects for the web.
  • CSLO #2: Formulate an understanding of techniques and processes used to create animations and interactive projects with a focus on interaction design.
  • CSLO #3: Design interfaces that are enhanced by the use of interactive and animated elements.
  • CSLO #4: Prepare and assemble graphics, images and HTML elements for use in various types of animated or interactive interfaces.
  • CSLO #5: Apply the use of scripts and CSS to control animations and interactive elements.
  • CSLO #6: Test and troubleshoot incompatibilities between devices, platforms and browsers.

Effective Term

Fall 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 an understanding of the concepts of interactivity and animation on the web from a historical perspective up through current day uses, including technical and design advances.
2. Differentiate between User Interface design (UI) and User Experience design (UX) as they relate to Interaction Design
3. Describe how to evaluate and apply principles of Interaction Design to digital products
4. Critique and discuss the merits of digital design products using terminology related to Interaction Design
Activity Objectives:
1. Construct web documents that utilize the related technologies appropriately and correctly
2. Design web interfaces and experiences that are enhanced by the addition of interactive and animated elements
3. Combine images, text, animations, video, graphics and branding to create complete and visually unified digital products
4. Implement best practices to aid in the user’s experience of the digital product, such as navigation, form elements and/or common interfaces
5. Identify and solve technical issues related to the covered software, languages, devices and techniques

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

          • Objective Examinations
            • Example: You have three buttons in your interface with the following names: #fadeIn, #fadeUp and #fadeOut. Each button currently has a unique animation applied to them as indicated by the ID's assigned. You decide that you'd like to make them all perform the same visual animation for the unity of your design, so you write a new CSS rule for .fadeIn. How will you amend your HTML code to ensure that each element now animates according to that rule only? Grading based on industry standard
          • Projects
            • Example: Students are asked to create a portfolio website showcasing their skills in Interaction Design. They will design the layout, navigation, content, and branding for the site, as well as design and implement the interactive and animated features. Students will be required to showcase examples such as navigation, forms or user inputs, examples of graphics or images that have been animated as well as create text to accompany the examples explaining the techniques utilized. Rubric Grading.
          • Skill Demonstrations
            • Example: Students are given an image to use in a webpage. They are asked to repeat the image five times and with each iteration they are expected to animate it using only CSS. They can modify scale, color, position, filter effect, translation, shape, or any other possible combination. Rubric Grading.

          Repeatable

          No

          Methods of Instruction

          • Laboratory
          • Lecture/Discussion
          • Distance Learning

          Lab:

          1. Instructor will prepare and present a tutorial covering the topic of animating a GIF. The students will follow along with the instructor as they complete the tutorial and explain the techniques and processes. Once the demonstration has been completed, students will be asked to try the technique on their own using a graphics program.

          Lecture:

          1. The instructor will present a lecture on the topics of User Interface and User Experience design, including sharing examples that directly illustrate the relationship between the two. Students will then be expected to draft a response to the lecture that illustrates their understanding of the two distinct fields and how they complement one another.

          Distance Learning

          1. The instructor will provide a lecture presentation and accompanying tutorial on how to improve the User Interface (UI) design in a Web app (Website). Students will then be asked to follow the tutorial on enhancing the UI design by applying the concepts and practices to an existing 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 implementation.

          Typical Out of Class Assignments

          Reading Assignments

          1. Read chapter on “Scroll-Activated Animations” in “Creating Web Animations.” Write a response on the topic, focusing specifically on how to modify the script to increase or decrease the speed of the scroll. 2. Read chapter on “Events” in “JavaScript & JQuery: Interactive Front-End Web Development.” In your written summary, explain the relationship between the DOM and JavaScript when attempting to update a page’s content using an event.

          Writing, Problem Solving or Performance

          1. Create an interactive prototype in a graphics program showcasing two states of an interactive element: the default/off state and the activated state. 2. Participate in a group critique of student works by giving feedback using correct industry terminology and focusing on the impact of the final works in relationship to interactivity and animation principles for the web.

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

          1. Design and develop a website using the principles of Interaction Design. Include the following: a form; CSS animation of an HTML element; an image slideshow; a custom JavaScript using an event handler; and navigation with visual feedback. Evaluation of the project will be based on meeting the minimum requirements as outlined above. In addition, attention to design concerns will be evaluated. Error free websites that function properly online are expected.

          Required Materials

          • Creating Web Animations
            • Author: Kirupa Chinnathambi
            • Publisher: O'Reilly
            • Publication Date: 2017
            • Text Edition: 1st
            • Classic Textbook?: No
            • OER Link:
            • OER:
          • JavaScript & JQuery: Interactive Front-End Web Development
            • Author: Jon Duckett
            • Publisher: Wiley
            • Publication Date: 2014
            • Text Edition: 1st
            • Classic Textbook?: No
            • OER Link:
            • OER:

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