AAD 0090. Interaction Design for Web Products
Units: 3
Prerequisite: Completion of AAD 85 with grade of "C" or better
Hours: 90 (36 lecture, 54 laboratory)
Introduction to Interaction Design for the Web with a focus on User Experience (UX) and User Interface (UI) design. This course covers the use of CSS, HTML, and JavaScript for creating interactive elements and engaging digital products. The use of scripts, animation, and multimedia tools and processes will be covered, as will the use of forms and input elements. Stylistic concerns, content development for a targeted audience, and the digital product design process will be examined. Students create original products focusing on integrating interactivity and animation while applying usability principles. (CSU)
AAD 0090 - Interaction Design
https://catalog.sierracollege.edu/course-outlines/aad-0090/
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 with a focus on User Experience (UX) and User Interface (UI) design. This course covers the use of CSS, HTML, and JavaScript for creating interactive elements and engaging digital products. The use of scripts, animation, and multimedia tools and processes will be covered, as will the use of forms and input elements. Stylistic concerns, content development for a targeted audience, and the digital product design process will be examined. Students create original products focusing on integrating interactivity and animation while applying usability principles. (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: Design interfaces and products that are enhanced by the use of interactive elements, and demonstrate a command of usability principles. CSLO #3: Prepare and apply graphics, images, media elements, and other HTML elements for use in interactive products enhanced by scripts and CSS. CSLO #4: Test and troubleshoot incompatibilities between devices, platforms, and browsers. CSLO #5: Evaluate final designs through class discussions, self-assessment, and peer reviews, analyzing technique, composition, aesthetic communication, technical proficiency, and project criteria. CSLO #6: Prove a command of industry-standard software, tools, and practices in preparation for entry into the industry, including the key principles of ethical imaging such as the use and application of Artificial Intelligence, copyright, Creative Commons, fair use, and public domain. Effective Term Fall 2025 Course Type Credit - Degree-applicable Contact Hours 90 Outside of Class Hours 72 Total Student Learning Hours 162 Course Objectives Lecture Objectives: Differentiate between the concepts and application of interactivity and animation on the web from a historical perspective up through modern uses, including technical and design advances and expectations. Discern between User Interface design (UI) and User Experience design (UX) and discuss how they relate to the field of Interaction Design and the principles of usability. Compare the technologies associated with interaction design and identify the roles each technology plays in creating engaging interfaces and experiences. Identify a variety of design patterns commonly used in modern websites and digital products and compare them for usability, accessibility, and effects on experience. Describe the role of user research and testing in product development and best practices for integrating Personas reflective of the target audience. Compare and contrast the file types most commonly used in modern, interactive web products including those for images, animations, video, and audio. Critique and discuss the merits of digital design products using terminology related to Interaction Design Lab Objectives: Construct web documents that combine HTML, CSS, and JS technologies to create interactive digital products with a focus on usability principles. Design web interfaces and experiences that are enhanced by the addition of interactive and animated elements, and which address the target audience’s key needs and expectations. Design and implement images, text, animations, video, graphics, and branding to create complete and visually unified digital products that are suitable for the web. Implement best practices to aid in the user’s experience of the digital product, such as navigation, form elements and/or common interfaces Identify and solve technical issues related to the software, languages, devices, tools, technologies, and techniques. Test products for usability, accessibility, platform, browser and device functionality and experience. 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 Classroom Discussions Example: Students will be assigned a course-appropriate article on design patterns to read. They will then be asked to discuss design patterns and their role in usability, Accessibility, and interaction design, including best practices for one of the following: navigation, forms, carousels, or accordion elements. Objective Examinations Example: Exam Question: 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 for a target audience. Students will be required to showcase their research, development of prototypes, and final product and address how the user's needs were met through their choices. 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. Repeatable No Methods of Instruction Laboratory Lecture/Discussion Distance Learning Lab: The instructor will prepare and present a lesson and tutorial covering the topic of file types that can be used for animation on the web. The students will follow along with the lesson and tutorial presented by the instructor, which will result in a set of animations using the various file types appropriate for web delivery. Lecture: 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 share a response to the lecture that illustrates their understanding of the two distinct fields and how they complement one another. Distance Learning The instructor will provide a lecture presentation and accompanying tutorial on how to improve the User Interface (UI) design tailored to a target audience. 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 then share their results with the rest of the class via a discussion board where they will also respond to prompts sharing where they succeeded and where there is room for growth in their implementation. Typical Out of Class Assignments Reading Assignments 1. Read the chapter titled "Manipulating Strings, Dates, and Numbers" in the book HTML, CSS, & JavaScript All-in-One For Dummies, then take the online quiz to test your understanding of the information. 2. Read the chapter titled "Exploring Ideation Techniques and Tools" from the book The Art and Science of UX Design, then respond to the prompts in the associated discussion board. 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 usability principles for the web and digital products. Other (Term projects, research papers, portfolios, etc.) Design and develop a website that demonstrates the principles of interaction design and usability design. Include the following: an interactive form; a CSS animation of an HTML element; an image slideshow with user controls; a custom JavaScript interaction using an event handler; and navigation that incorporates accessible and 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 Introduction to Design Thinking for UX Beginners: 5 Steps to Creating a Digital Experience That Engages Users with UX Design, UI Design, and User Research. Start Building Your UX Career Author: Park, Uijun Publisher: Uinjun Company Publication Date: 2023 Text Edition: Classic Textbook?: No OER Link: OER: User Experience Design: An Introduction to Creating Interactive Digital Spaces Author: Wells, Mark Publisher: Laurence King Publishing Publication Date: 2023 Text Edition: Classic Textbook?: No OER Link: OER: The Art and Science of UX Design: A step-by-step guide to designing amazing user experiences Author: Conta, Anthony Publisher: Pearson Education Publication Date: 2023 Text Edition: Classic Textbook?: No OER Link: OER: HTML, CSS, & JavaScript All-in-One For Dummies Author: McFedries, Paul Publisher: Wiley Publication Date: 2023 Text Edition: Classic Textbook?: No OER Link: OER: Other materials and-or supplies required of students that contribute to the cost of the course.
Applied Art and Design
https://catalog.sierracollege.edu/departments/applied-art-design/
Applied Art and Design is an academic discipline which focuses on the principles and practical applications of art, design, photography, computer graphics, imaging and animation. Study of the foundations of design, creative problem solving, portfolio development and internship experiences, all prepare students for transfer programs and career opportunities. Within the AA/AS degree or certificate options, students may concentrate in Graphic Design, Illustration, or Multimedia. Students who successfully complete the Applied Art and Design major can expect to find entry level employment in such areas as digital illustration, graphic design for print and internet, multimedia, animation, photographic retouching and pre-press operation.
