AAD 0086. Intermediate Web Design
Units: 3
Prerequisite: Completion of AAD 85 with grade of "C" or better
Hours: 90 (36 lecture, 54 laboratory)
Intermediate course in front-end web design. Current topics in website creation covered as they relate to visual design and user interfaces such as strategies for combining layout, graphics, text, typography, and interactivity in fully functioning websites. Special topics include coverage of industry standards and current technologies. (CSU)
AAD 0086 - Intermediate Web Design
http://catalog.sierracollege.edu/course-outlines/aad-0086/
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. Current topics in website creation covered as they relate to visual design and user interfaces such as strategies for combining layout, graphics, text, typography, and interactivity in fully functioning websites. Special topics include coverage of industry standards and current technologies. (CSU) Course Student Learning Outcomes CSLO #1: Prepare and develop an effective workflow for creating websites including site management, designing comps, and application in code. CSLO #2: Synthesize various media elements into a cohesive website, including the use of graphics and images, interactive elements, CSS and code. CSLO #3: Manipulate technologies for enhanced usability, accessibility, and Search Engine Optimization for access by broad populations. Effective Term Spring 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 understanding of current languages, standards, technologies in a written test; 2. Describe planning goals and processes when designing new websites; 3. Distinguish between the uses of foreground and background images; 4. Compare and contrast various methods of CSS-based layout; 5. Compare and contrast various interactive and multimedia technologies for the web; 6. Articulate methods for increasing web accessibility for persons with disabilities; 7. Demonstrate increased knowledge, skill and ability through the creation of more complex web design projects. Laboratory Objectives: 1. Generate design wireframes and sitemaps for a new website; 2. Design graphics and images for a website; 3. Optimize graphics and images for a website; 4. Generate tiling graphics for a website; 5. Employ image galleries and slideshows for a website; 6. Craft CSS-based layouts using floats and positioning; 7. Craft typographic elements for the web using CSS; 8. Design background images for a website; 9. Generate CSS for various media outputs including print and devices; 10. Employ the use of Javascript to add interactivity to websites; 11. Incorporate animation and video into websites; 12. Configure websites for search engine optimization using various strategies; 13. Incorporate accessibility features in websites and test. 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 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. Rubric Graded Skill Demonstrations Example: Students are assigned websites to compare and contrast various methods of CSS-based layout incorporating various interactive and multimedia technologies for the web. Rubric Graded. Repeatable No Methods of Instruction Laboratory Lecture/Discussion Distance Learning Lab: The instructor will lecture and demonstrate on constructing a simple text-based navigation bar using an Unordered List, which is standards compliant and accessible. The instructor will demonstrate and then lead the students in implementing the Image Replacement technique so that the graphics they created are visible on their webpage. Lecture: The instructor will present a lecture on the CSS technique of Image Replacement as a way to use graphics and images in a website without impacting accessibility to text content for users with disabilities. Students are expected to actively participate in the lecture. 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 Grids. Students will then be asked to follow the tutorial on creating a responsive design and applying it to a 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 practice. Typical Out of Class Assignments Reading Assignments 1. Read Chapter on Web Fonts in "The Book of CSS" and complete the online Learning Guide accompanying the chapter. 2. Read Chapter on Spry: Creating Interactive Web Pages, in "Dreamweaver CS5.5, The Missing Manual" and be prepared to apply Spry to your webpage in class. Writing, Problem Solving or Performance 1. Prepare an alternate Cascading Style Sheet for your website, which is intended to modify your design for print media. 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.) Read chapters on Optimizing Graphics for the Web and Image Ready Slicing. Follow the tutorials for optimizing graphics and slicing. Assignment: Design a single web page layout using files with 3-5 different compression settings. Select images to use based on design fundamentals and target audience. Consider size, color, interest, textures, focus and compositional direction in determining which images will work together on the page. Design the page layout, using pencil and paper. Consider balance, emphasis, repetition, and web page proportions. Set up the design on the computer, fine tuning the placement etc. Determine which compression formats and settings to use for the slices. Include at least one GIF compression and one JPG compression. Evaluation: The assignment will be graded on technical steps of image preparation; appropriateness of compression formats and settings used; file sizes; compositional arrangement; relationship of images to each other; relationship of images to target audience; slicing, and overall impact of page. Required Materials CSS: The Missing Manual Author: David Sawyer McFarland Publisher: O’Reilly Media Publication Date: 2015 Text Edition: Classic Textbook?: No OER Link: OER: CSS Mastery Author: Budd & Bjorklund Publisher: No Starch PressApress Publication Date: 2013 Text Edition: 3rd Classic Textbook?: No OER Link: OER: Adobe Dreamweaver: Classroom in a Book Author: Jim Malvaid Publisher: Adobe Press Publication Date: 2016 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
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.
