Course Outline of Record

Item	Value
Curriculum Committee Approval Date	12/07/2021
Top Code	061410 - Multimedia
Units	3 Total Units
Hours	90 Total Hours (Lecture Hours 36; Lab Hours 54)
Total Outside of Class Hours	0
Course Credit Status	Credit: Degree Applicable (D)
Material Fee	No
Basic Skills	Not Basic Skills (N)
Repeatable	No
Grading Policy	Standard Letter (S),  Pass/No Pass (B)

Course Description

This course is a hands-on, project based course that explores the principles and practice of user interface and user experience design for digital platforms. Additionally, this course introduces students to a range of digital prototyping techniques for generating proof-of-concept solutions for interactive user experience projects. Emphasis will be placed on effectively communicating and testing concepts and ideas through an iterative process. ADVISORY: DART G160. Transfer Credit: CSU.

Course Level Student Learning Outcome(s)

1. Course Outcomes
2. Employ industry standard tools and specific project deliverables in UI/UX.
3. Define principles of User Interface/User Experience (UI/UX) Design in order to design with intention.
4. Explain the entire life-cycle of the design process, purpose, and tools.
5. Use the basics of HCI (human computer interaction) and the psychology behind user decision making.

Course Objectives

• 1. Create interactive prototypes of User Interfaces for screen-based media.
• 2. Develop user experiences for screen-based media that uses principles of human-computer interaction.
• 3. Analyze the design of interactive products.
• 4. Apply suitable interaction design approaches and techniques towards the design of an interactive product.

---

Lecture Content

Introduction to HCI Introdction to Adobe XD UX design workflow The home screen Exploring the workspace Design mode Tools Property inspector Panels Commands Artboards Design preview Project Set-up Working with cloud doucuments Creating and editing artboards Using grids Layers Images, Graphics, and Text Importing images Multiple assets Replacing and transforming images Working with Photoshop Working with Illustrator Masking content Working with text Creating and Editing Graphics Shapes Editing and combining shapes Drawing tools Working with paths UI kits Organizing Content Layers Groups Aligning and positioning objects Working with Assets and CC Libraries Assets panel Saving colors Saving text Editing character styles Creating components and instances Linked components Library items Effects and Responsive Layout Understanding effects Color gradients Background blurs Drop shadows Blend modes Repeat grids Responsive content and layouts Padding Setting manual constraints Prototyping Design mode vs. prototype mode Setting home screens Linking artboards Editing and previewng links Hover states Mulitple states Auto-animate content Applying multiple interactions to single objects Scroll position Fixed position Creating overlays Tim ed transition content Voice triggers Speech playback Previewing Prototypes Mac OS Windows Mobile Cloud Exporting and Integration Exporting assets PDF SVG PNG JPG

Lab Content

UXD Design Principles Visual design Unity and variety Economy of elements Balance and proportion Interaction Association and affordance Economy of motion Responsive design Pschycology The effects of good UXD design Flow and Interaction Sitemaps and flow tasks Tools of the trade Pagestack Decision points Conditions Common errors Misalignment Typographic considerations Task flows Wireframing and Annotating Annotating essentials Wireframing essentials Toolkits Sketching Digital wireframes Prototyping models Wireframing vs realistic prototypes HTML and WYSIWYG editors Designer tools for prototyping Designer / developer workflows Post-prototyping User testing Choosing a design testing approach Qualitative and quantitative research In-person and remote research Usability testing Analysing results Crafting recommendations From design to development Visual design Development Quality assurance Analytics

Method(s) of Instruction

• Lecture (02)
• DE Live Online Lecture (02S)
• DE Online Lecture (02X)
• Lab (04)
• DE Live Online Lab (04S)
• DE Online Lab (04X)

Reading Assignments

Reading assignments from textbook The Design of Everyday Things: Revised and Expanded Edition, Norman, D. Adobe XD Classroom in a Book, Wood, B. Internet websites and articles focused on UX/UI Industry journals In-class handouts

Writing Assignments

Research documents Case study findings Project goals/descriptions/outlines Analysis of UX/UI

Out-of-class Assignments

Experience, use, and test exsiting UX/UI designs Create UX/UI wireframes Create UX/UI prototypes Conduct userabilty testing

Demonstration of Critical Thinking

Students will determine how human computing interaction plays a significant role in UX/UI. They will critique various applications and present alternative solutions to a variety of graphical user interfaces.

Required Writing, Problem Solving, Skills Demonstration

Students will write essays about the background and current state of UX/UI, hardware, and software. Problem-solving skills will be demonstrated when students troubleshoot their designs and test for quality control and user experience. Students will demonstrate their ability by creating functional user interfaces that make effective use of human centered design.

Eligible Disciplines

Commercial art (sign making, lettering, packaging, rendering): Any bachelors degree and two years of professional experience, or any associate degree and six years of professional experience.

Textbooks Resources

1. Required Norman, D. The Design of Everyday Things: Revised and Expanded Edition , Revised edition ed. Basic Books (Latest), 2013 Rationale: This is a seminal text for the industry. 2. Required Wood, B. Adobe XD Classroom in a Book, 1st ed. Macromedia Press, 2020

Other Resources

1. UI/UX wireframing, design sketchbook.