Santa Monica College. GRAPHIC DESIGN 65: Web Design I Course Syllabus

Size: px

Start display at page:

Download "Santa Monica College. GRAPHIC DESIGN 65: Web Design I Course Syllabus"

Christopher Webster
5 years ago
Views:

1 GRAPHIC DESIGN 65: Web Design I Course Syllabus Instructor: Anastasia Triviza Term: Spring 2010 Section: 4266 Time and Place: Thursdays, 6:30 PM-9:35 PM, AET 105 Arrange - 1 Hour Program website: Class homepage: I. Catalog Description: Prerequisite: Graphic Design 18 or ET 11 This course is designed as an introduction to web design for students with a basic knowledge of computers and graphic design applications. Students will learn to think critically about web design and apply basic conceptual design principles. Components of design such as color, typography, layout and composition will be discussed. Other topics include: an overview of the web and how it works, designing a navigation interface, web graphics, information architecture, HTML, web hosting, and file/site management. Students will design and create a simple web page utilizing basic features of a web authoring software. II. Required Text and References: Beaird, Jason; The Principles of Beautiful Web Design, SitePoint, 2007; ISBN: Niederst, Jennifer; Learning Web Design: A Beginner's Guide to (X)HTML, StyleSheets, and Web Graphics, 3d Edition, O'Reilly Media, 2007; ISBN-13: III. Course Objectives: Upon completion of the course students will be able to: A. Describe how the web environment functions. B. Identify and apply basic design concepts and principles for web delivery. C. Apply color theory, composition, and typography effectively. D. Demonstrate a basic understanding of the components and mechanics of a web

2 Page 2 of 6 page. E. Compress graphics and other imagery effectively. F. Design a site map and information architecture for student web page. G. Acquire a domain name and web host and practice web file management. H. Utilize web software tools at an introductory level. IV. Methods of Presentation: Lecture, discussion, and hands-on demonstration V. Course Content: Week One: Overview Material overview. Class rules. Projects. Nature of the web and differences compared to print media. Issues to consider: different browsers, preferences, PC-Mac, connection speed, resolution, color, audience. Design basics + no-no-s. Website critique: good + bad design examples. The web design industry. Hosts and domains. Homework: Choose four examples of bad design and four examples of good design. Design under construction page in Photoshop or Illustrator. Purchase host and URL. Reading: LWD: Chapter 1 (Where Do I Start). Chapter 3 (The Nature of Web Design). Week Two: General concepts and terms How websites work on the internet: Explore the FTP of a website: view file structure and HTML. Paths. File management. File naming etiquette: images folders, index.html etc. Ingredients of a web page (HTML, img etc). Image optimizing. Image uses. Terms: browsers, URL, FTP, bandwidth, PHP, Flash, XHTML, HTML, CSS. Homework: Get your website ready for publication. Save under construction page in the appropriate format. Create folders. Name and organize your files correctly. Reading: LWD: Chapter 2 (How the Web Works). Chapter 18 (Web Graphics Basics). Week Three: The Design Process Part One. Type and Color. Breaking down the design process. Sources of inspiration. Part One: Type and Color. Color schemes. Font and color palettes. Adding texture. Designing separate elements. Homework: Come up with the style for your company website. Establish your color scheme, fonts, navigation, graphics, design elements. Experiment with different types, color schemes and styles. All your design elements (buttons, menus, graphics, link styles, fonts) have to be consistent with the mood you are trying to establish.

3 Page 3 of 6 Reading: The Principles of Beautiful Web Design: Chapter 2 (Color). Chapter 4 (Typography). Handout. Midterm project Assigned: due week ten. Design a three-page Web site from one of the listed websites in handout. (Alternatively: a friend s business website or a fictional company but not a personal website). Present mockups to instructor for approval. Utilize text and images. Will be graded on: layout and composition (use of grid, etc), design principles (contrast, balance, etc), choice of color and typography. Week Four: no class (FLEX day) Week Five: Structure of a web page. HTML intro. Why learn HTML. Intro to HTML. Anatomy of a web page. Basic HTML tags. Images. Homework: Hand code a simple page in HTML. Use a background color and image. Reading: LWD: Chapter 4 (Creating a Simple Page). Chapter 7 (Adding Images). Week Six: Formatting and adding links to your page. Headings. Create new paragraph. Paragraph alignment. Lists. Document type overview. Create links inside the page. Link to other pages on your website. Create links. Homework: Using HTML, hand code a simple page including a title tag, text, a background color, an image, line breaks, paragraph tags. Add images and links. Reading: LWD: Chapter 5 (Marking Up Text.) Chapter 6 (Adding Links.) Week Seven: The Design Process Part Two. Principles of layout. Intro to Dreamweaver. Making a web layout in Photoshop. Design Principles. Intro to Dreamweaver. Homework: Layout your page on a grid. Bring Final Project mockups for approval. Reading: The Principles of Beautiful Web Design: Chapter 1 (Layout and Composition). Week Eight: Intro to slicing in Photoshop. Present Final Project mockups. Slicing a page in Photoshop and importing in Dreamweaver. Homework: Slice your mockup Photoshop, edit in Dreamweaver. Reading: Handout. Week Nine: Formatting text, inserting images, adding links and lists in Dreamweaver. Insert images and text in Dreamweaver. Laying out text and images. Links and lists. Homework: Add text and images to your page. Create links and lists in Dreamweaver. Reading: Handout.

4 Page 4 of 6 Week Ten: Adding Texture and Depth to Your Page. Photoshop tricks. Lab Class Homework: Finish Final. Reading: The Principles of Beautiful Web Design: LWD: Chapter 3 (Texture). Chapter 5 (Imagery). LWD: Chapter 19 (Lean and Mean Web Graphics.) Week Eleven: Mid-term due. Tables. Into to tables. Understanding when to use tables. Table size. Borders. Cell padding and spacing. Cell width and height. Cell alignment. Merging cells. Adding background color to cells. Adding background color to a table. Nesting. Homework: Create your own table. Reading: LWD: Chapter 8 (Basic Table Markup) Final project Assigned: due week Sixteen. Design a four-page web site from one of the listed websites in handout. Include menu page and inside pages. Utilize text + images and wrap images around text. Include interactive rollovers. Will be graded on layout and composition (use of grid, etc) design principles (contrast, balance, etc), choice of color and typography and functionality. Week Twelve: Adding JavaScript behaviors. Creating an image gallery. Scrollers. Explore Behaviors Panel. Script events and handlers. Image rollovers review. Scrollers. Homework: Design separate elements of your page (menu, nav, javascript rollovers). Create a navigation with interactive rollovers. Create an image gallery. Reading: Read handout. Week Thirteen: Forms Create Forms. Reading: LWD: Chapter 9. Read handout. Homework: Create your own form. Week Fourteen: Multimedia Adding sound, Flash and Multimedia. FTP. Homework: Add sound. Add a Flash banner or Flash buttons to your page. Create an animated banner in Photoshop and insert to your page. Make your website searchable. Reading: Handout. Week Fifteen: Searchability. Final Exam. Testing Your Site. Uploading your files on the FTP. Search Engines and Meta-tags. Homework: Study for Final. Work on Final Project.

5 Page 5 of 6 Week Sixteen: Lab Class. Troubleshooting Final projects. Homework: Final project. Week Seventeen: Final Project Due. Class Presentation And Critique. Materials Required: USB Flash storage device website hosting + domain name VI. Methods of Evaluation: Actual point distribution will vary from instructor to instructor but approximate values are shown. Participation 5% Exercises 20% Two (2) assignments 30% Final Project 40% Final Written Exam 5% Grading % = A 80-89% = B 70-79% = C 60-69% = D < 60% = F VII. Drop Policy: It is the responsibility of the student to drop themselves from the class. Check deadlines. To drop from the class: 1.Go to and select Admissions 2.Select Student Self-service System ; then follow instructions. If a pattern of absences is noted (3 weeks or more) and no communication is initiated within those 3 weeks as to the reason for the absences, a student will be dropped from the class. If you communicated a medical situation that prevented you from attending class for 2 weeks ore more, a doctor s note is required when you report back to class.

6 Page 6 of 6 VIII. Classroom Policy: Absolutely no food or beverages are permitted in the classroom, except bottled water. No internet surfing or answering s while class is in session. Turn off cell phones while in class. If you are over 10 minutes late you will not be admitted in class. Projects have to be submitted at the beginning of class in your weekly folder. Projects turned in late will not be accepted. ing late projects to the instructor is NOT allowed. ing the instructor to get the lecture material and the homework is NOT allowed. It is encouraged to exchange contact information with other classmates to get information on project specs, lecture notes and class assignments, if you cannot make it to class. If you miss 3 classes, you will be dropped. IX. Recording of Class Lectures: Section of the Education Code says: The use by any person, including a student, of any electronic listening or recording device in any classroom without the prior consent of the instructor is prohibited, except as necessary to provide reasonable auxiliary aids and academic adjustments to disabled students. Any person, other than a student, who willfully violates this section shall be guilty of misdemeanor. Any student violating this section shall be subject to appropriate disciplinary action. X. FYI: By participating in this course, you agree to allow your work to be used by Santa Monica College for promotional purposes. These uses include, but are not limited to, display in physical and web galleries, promotional video-tapes, and printed promotional pieces. You retain complete rights to your work and SMC may not use your work for non-promotional purposes without your prior agreement. XI. Announcement: The Graphic Design Club has open enrollment for membership throughout the semester. Everyone is welcome, including non-design majors. Day and time of meetings will be posted at the first floor lobby of the AET. For info:

Syllabus. Art 324, Web Design, course #1091 California State University Channel Islands Fall 2003 semester

Syllabus. Art 324, Web Design, course #1091 California State University Channel Islands Fall 2003 semester Syllabus Art 324, Web Design, course #1091 California State University Channel Islands Fall 2003 semester Instructor Information: Liz King Office location: room 1826, West wing, Bell Tower E-mail address: