AAD 0085. Introduction to Web Design
Units: 3
Advisory: Completion of AAD 70 or 75 with grade of "C" or better
Hours: 90 (36 lecture, 36 laboratory, 18 activity)
An introduction to web design, covering topics and strategies necessary for the creation and design of websites. Topics include HyperText Markup Language (HTML); Cascading Style Sheets (CSS); design issues specific to web delivery; the creation and optimization of graphics and images for the web; accessibility; search engine optimization and current industry standards. (CSU)
AAD 0085 - Introduction to Web Design
http://catalog.sierracollege.edu/course-outlines/aad-0085/
Catalog Description Advisory: Completion of AAD 70 or 75 with grade of "C" or better Hours: 90 (36 lecture, 36 laboratory, 18 activity) Description: An introduction to web design, covering topics and strategies necessary for the creation and design of websites. Topics include HyperText Markup Language (HTML); Cascading Style Sheets (CSS); design issues specific to web delivery; the creation and optimization of graphics and images for the web; accessibility; search engine optimization and current industry standards. (CSU) Course Student Learning Outcomes CSLO #1: Apply correct web design terminology. CSLO #2: Demonstrate proper file management techniques for creating web sites. CSLO #3: Distinguish between the process of applying structure and design in the creation of finished web pages. CSLO #4: Develop web pages that promote usability and accessibility for a broad population through the use of design considerations as well as proper coding practices. CSLO #5: Critique the effectiveness of completed web sites. Effective Term Fall 2020 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 correct web design terminology in written tests including terms relating to CSS selectors, CSS rules, HTML tags, web standards, site management and the difference between structure and presentation; 2. Describe the usage of semantic elements as a way to enhance the meaning of web content; 3. Classify which elements require additional markup to create accessible websites at the introductory level; 4. Differentiate between the uses of graphic and image file formats for the web including .jpg, .png and .gif; and 5. Evaluate the success of websites in writing and class discussions, in terms of overall aesthetic design and technical considerations. Laboratory/Activity Objectives: 1. Utilize folders and define a site to aid in correct site management; 2. Build a simple web page using HTML for content and CSS for design; 3. Differentiate between the purposes of content (HTML) and design (CSS) as they relate to structure and presentation in a website; 4. Manipulate HTML and CSS to create multiple layout options; 5. Modify web content using CSS for consistency; 6. Design and optimize graphics correctly for the web; 7. Utilize graphics and images for rollover interactivity in a website; 8. Distinguish between the purposes of foreground and background images and graphics in a website; 9. Apply techniques to aid in accessibility and search engine optimization when creating web pages; 10. Demonstrate an understanding of various types of links in a website including the Use of named anchors, navigation bars, email links and image links; and 11. Validate, upload and test websites for browser compatibility. 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 in which they are responsible for creating the desired design elements, including graphics and images, constructing the layout, adding the content, controlling consistent presentation using CSS and applying methods for increasing Accessibility, Usability and Search Engine Optimization and uploading the Website via FTP to a Remote Server. Rubric Graded. Skill Demonstrations Example: The student will successfully differentiate between the uses of graphic and image file formats for the web including .jpg, .png and .gif. Rubric Graded. Repeatable No Methods of Instruction Activity Laboratory Lecture/Discussion Distance Learning Activity: The instructor will lecture on and demonstrate the construction of a simple HTML based Webpage and the application of External CSS styles to modify the appearance of various elements. Instructor will demonstrate and then have students create a new HTML-based Webpage and link it to the External CSS file to demonstrate the relationship between External CSS and consistent multi-page Website presentation. (Lab Objective 2) Lecture: The instructor will present a lecture on the proper use of Cascading Style Sheets to separate structure and presentation on the Web. The instructor will focus on using Inline, Internal and External Stylesheets and various Selectors such as ID, Class, Descendant and Pseudo-Class Selectors in order to affect change in the appearance of the HTML content. Students are expected to actively participate in the lecture. (Lecture Objectives 1 & 2) Distance Learning Through Distance Learning, the instructor will provide a PowerPoint lecture presentation on Cascading Style Sheets (CSS) and CSS Rules, including the anatomy of a CSS Rule and CSS selectors. Students will then be asked to follow the tutorial handout and create an External CSS file with specified CSS Rules as a way to control the presentation of the content on the webpage. Students will update their website with the modifications completed and provide a link via an Assignment posting. Peers will be assigned to review the work and give feedback on where they see any errors or inconsistencies in the design. The instructor will also provide feedback and any necessary corrections. (Lecture Objective 1) Typical Out of Class Assignments Reading Assignments 1. Read chapter in textbook "Visual Design for the Modern Web": Aesthetic Issues and prepare a brief report on your findings to present to class. 2. Read chapter in textbook on "Dreamweaver CS4: The Missing Manual": Introducing Cascading Style Sheets. Be prepared to discuss in class. Writing, Problem Solving or Performance 1. Prepare a planning guide for a new website by sketching layout possibilities, compiling color palettes, determining font choices and considering purpose and audience. 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.) Required Materials Adobe Dreamweaver CC Classroom in a Book (2017 release) Author: Jim Malvaid Publisher: Adobe Press Publication Date: 2017 Text Edition: 1st Classic Textbook?: No OER Link: OER: Dreamweaver CC: The Missing Manual Author: McFarland and Grover Publisher: O’Reilly Publication Date: 2015 Text Edition: 2nd 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
http://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.
