Search Results

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 and development. Current topics will be covered as they relate to user interface design, user experience design, usability principles, and accessibility expectations. Intermediate strategies addressing visual design and brand identity through the combination of layout design, visual assets such as images and graphics, copy and content, typography, and more. Special topics include coverage of industry standards and emerging technologies. (CSU) Course Student Learning Outcomes CSLO #1: Devise an effective workflow for use in project development including site management, user research, sourcing and preparing visual assets and content, user interface design, and development in the coding environment, and output to the web. CSLO #2: Synthesize various elements and technologies into a cohesive website based on a prototype, including the use of visual assets, interactive elements, advanced CSS, and semantic HTML5 elements. CSLO #3: Manipulate technologies for enhanced usability, Accessibility, and Search Engine Optimization for access by broad populations. CSLO #4: Evaluate final sites through class discussions, self-assessment, and peer reviews, analyzing technique, composition, brand and aesthetics, technical proficiency, and project criteria. Include notes on features of usability and user experience. CSLO #5: Demonstrate an understanding of legal considerations, copyright law, and ethical asset resourcing when designing for media industries.  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 Summarize changes in the field of Web design and development including languages, tools, and technologies Define and present a workflow that addresses planning goals and development processes for designing new websites Compare and contrast various methods and tools for creating CSS-based responsive layouts, images and text Articulate methods for increasing Accessibility for persons with disabilities Discuss approaches for improving Search Engine Optimization Define processes for improving websites through testing, version control, and  workflow/process documentation   Laboratory Objectives: Generate planning documents such as a style guide, wireframe, design comp, and research guide to expedite and define the development workflow Source, edit, optimize, and prepare visual media assets using modern methods and file types, including the application of responsive visual media assets Craft and test CSS-based responsive layouts on a variety of devices Enhance web typography using CSS and responsive measurements Generate CSS for various media outputs and dimensions using media queries and breakpoints Incorporate more advanced semantic elements to describe HTML content accurately for usability, accessibility and ranking Incorporate media elements using assorted methods Configure websites for search engine optimization using various strategies Incorporate accessibility features in websites and test for impact Manage site updates and testing with version control methods Demonstrate increased knowledge, skill, and ability through the creation of more complex web design projects using intermediate methods 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: Review the lecture and reading materials on layout methods and technologies for responsive web design, then compare them in a class discussion. Next, identify a process that will work best for current projects. Objective Examinations Example: Choose the measurement model from the list that best fits the following description: "This model scales text elements based on the font size declared for the element of <html>" • % • em • rem • px • pt 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. Skill Demonstrations Example: Optimize five visual and media assets using the best file type for their delivery. Incorporate the assets into an HTML document and then upload the page and submit the URL for assessment. Repeatable No Methods of Instruction Laboratory Lecture/Discussion Distance Learning Lab: The instructor will deliver a lecture and demonstration on using the HTML elements of fig and figcaption to mark up a graph and its description effectively. In addition, the instructor will discuss the use of these elements and their effect on accessibility. Students will then be asked to incorporate these methods into a page that meets accessibility guidelines and demonstrates their understanding of the techniques being applied. Lecture: The instructor will give a lecture on Git and Github and how they relate to version control for site development. Topics covered will include working with teams, and best practices for testing and versioning. Students will be asked to actively participate by responding to questions the instructor posits, and also by developing at least one question to clarify the subject, or extend the concept. Distance Learning The instructor will provide a lecture presentation and accompanying tutorial on responsive design techniques, including an introduction to modules such as Flexbox and CSS Grid. Students will then be asked to follow the tutorial on creating a responsive design for desktop, tablet, and phone output. Students will update their website to include these methods, 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 Read the chapter "Media Queries and Container Queries" from the book titled "Responsive Web Design with HTML5 and CSS: Build future-proof responsive websites using the latest HTML5 and CSS techniques," then complete the associated quiz to test your comprehension. Writing, Problem Solving or Performance Choose three existing websites to test and evaluate on the following devices: desktop or laptop, tablet, and phone using an online testing environment. Formulate your feedback based on the lecture content covering best practices for responsive websites. Identify the strengths and weaknesses for each site and outline solutions for improvement. Present one site critique to the class. Other (Term projects, research papers, portfolios, etc.) Assignment: Design a responsive webpage featuring a gallery of visual assets optimized using the correct file type and prepared for a variety of devices and screen sizes. The typographic elements should also be responsive and address the needs of the audience on each device. Upload the final product and share the URL with the instructor for evaluation. Required Materials HTML and CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong Coding Foundation, Building Responsive Websites, and Mastering the Fundamentals of Modern Web Design Author: DuRocher, David Publisher: ClydeBank Media Publication Date: 2022 Text Edition: 1st Classic Textbook?: OER Link: OER: Responsive Web Design with HTML5 and CSS: Build future-proof responsive websites using the latest HTML5 and CSS techniques Author: Frain, Ben Publisher: Packt Publishing Publication Date: 2022 Text Edition: 4th Classic Textbook?: OER Link: OER: Other materials and-or supplies required of students that contribute to the cost of the course.

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.