Augsburg College COURSE SYLLABUS Draft 02/11/13 COURSE TITLE: Web Design I CREDITS:1 DEPT: ART NO: 215 INSTRUCTORS: Dr. Michael Grenier (*Content Specialists; Jay Highum / Graphics & John Determan / Web Master) OFFICE: Individually Arranged Prior to Class PHONE: 507-456-9299 EMAIL: grenier@augsburg.edu ACADEMIC YEAR: Spring Semester 2013 Moodle site: www.augsburg.edu (Moodle login through student portal) Classroom Site: Behel Church & Century High School Computer Lab, (G 244) Class Times Mondays April 1 st, April 15 h April 2 nd. May 6 th, May 20 th, June 3 rd, June 10 th, 2013. 5:45pm to 9:45pm TEXTBOOK: Web Style Guide, Basic Design Principles for Creating Web Sites, 2008, Patrick Lynch and Sarah Horton, 3rd edition: ISBN: 978-0-300-13737-8. COURSE DESCRIPTION: Web Design I explores the theory and practice of web design. Focus is placed on effective design and usability. Students will become familiar with Dreamweaver, Photoshop, and Illustrator and explore advanced techniques including XHTML, CSS, forms, dynamic content, and behaviors. COURSE OBJECTIVES: Student who successfully completes this course will: Gain a better understanding of basic web design principles. Become better aware of design and site construction considerations including usability, audience, and desired results. Have improved ability to analytically critique graphic design for web use. Develop a better understanding of creating content for web sites including image optimization and appropriate use of color, typography, and composition. Become more familiar with Adobe s Creative Suite applications including Photoshop, Illustrator, Dreamweaver, and Flash. Fine Arts: This course fulfills a Liberal Arts Foundation requirement in the Fine Arts. The Fine Arts are traditionally defined to include dance, music, theatre, and visual arts. Augsburg's Fine Arts departments are Art, Music, and Theatre. There is also an emerging Film Studies program. These four disciplines engage very different realms of knowledge, sets of skills, techniques and modes of 1
discourse, but all share a common goal of rigorous inquiry into the ways artistic expression can record, discover, and creatively express the truths of human experience. As a liberal arts foundation course in the Fine Arts, this course will examine the arts as creative expression of the human imagination through activities such as creation, historical study, and critical analysis. TESTS, EXAMINATION, PAPERS AND/OR PROJECTS REQUIRED: Required readings: Web Style Guide, Basic Design Principles for Creating Web Sites, 2008, Patrick Lynch and Sarah Horton, 3rd edition: ISBN: 978-0-300-13737-8. Nature of Art Glossary Web Design Handbook / Blog / Journal: Via your Blog Create your own handbook from the course content. This is an electronic version of your notes from the text, lectures, and work for assignments. Upload to Moodle as an rtf file on June 3 rd, 2013. (10% of final grade). Web Page Assessment (Review of Two Web Pages, One the Worst Web Page as measure by best practice in Web Design, and Share link on Moodle (April 21 st, 2013, 11:59pm). Then we will have a popular vote to what is the worst web site and why. Then create a score card (rating system) for rating the domains of usability, effective communication, design elements, and principles of art. See Art Matrix as sample scorecard. Then write a reflective essay on these web pages and your site specific experience. Be critical to comparing all domains. Post Score card of best web site on Moodle by May 5th, 2013 (11:59pm). (10% of Final Grade). Required Examinations: Web Design Exam 2013 From Text and Lecture what is considered dynamic design. (30% of Final Grade) June 10 th, 2012 on Moodle Group Web Project Teams (June 3 rd, 2013 Present in Class) The Group Project works with a pre-determined client s criteria (SilverScreen). Group Members are each assigned a roll in the Web Design process (see Web Style Guide). This is a competitive bid process (RFP). Each person in a group (4 or 5 people per group) will have a specific task - image selection, client interaction copy writing, design, site construction, presentation of the site on paper or digitally presented as a PDF or PowerPoint Project and the theory behind it. Posted to Moodle June 2 nd, 2013 (20% of Final Grade) Essay: From your Group Web Project Experience (June 9 th, 2013 via Moodle). Write an essay (750-1250 words, double Spaced, One inch margins) As a project manager of developing a web page write a step by step process to designing a web site. Your essay must include the tools used (theoretically) in each step. Your essay in a manner that outlines stages and steps to create a visually appealing web page that visually represent the organization s mission, goals, vision, and course of business. Provide 2
design sketches of each page via collage, drawing, or other approached to creating a visual display of a Web Site (20% of Final Grade). Blog Project: Create and Manage your blog in following the Design Concepts as outlined in the text. June 43 rd, 2013. Post link on Moodle. (20% final grade) Class Participation: This is a content intensive course that requires a student to attend all lecture sessions. Class participation is expected includes the weekly assignments online, blog postings, & Moodle Postings. Lab times at Century High School are intended for students to work with in the Adobe CS Software provided as well as other Web Tools that student must become familiar with. Student are encouraged to work with the software as well as paper materials that are readily available to each student. Students are not required to purchase any specific software as this course is limited to theory of web design with limited practice with the Adobe Suite and Web Tools. Per Instructor permission students may request to work remotely on there own computers on Lab times only. Late Work: All assignments turned in late will be docked One Full grade per day late (unless excused by prior arrangement or valid emergency documents). GRADING STANDARDS: Out of 100 points possible Determination 90-100 A Achievement that greatly exceeds basic requirement. 80-89 B Achievement that generally exceeds basic requirement. 70-79 C Achievement that meets the basic requirement. 60-69 D Achievement that falls short of the basic requirement. 59 and Below F Basic understandings not met. Unacceptable quality. Minus and Plus assigned within 1% of grade break. *Course material, testing requirements, due dates and grading parameters are subject to change at the discretion of the instructor. ATTENDANCE POLICY: Attendance is required. This course is a cumulative cognitive experience where each class period builds upon its predecessor. Beginning on the Second unexcused absence a Full Letter grade will be deducted from the final grade. Each subsequent unexcused absence will reduce the student s grade by 1/2 grade. Three tardiness or early departure counts as one absence towards the fourth absence where a 1/2 letter grade will be deducted from the student s final grade. Incompletes due to serious personal, medical, or family emergency may be granted only by formal written arrangement before the last day of class. Please contact the instructor in person during office hours or prearranged advisement. COMMUNICATION POLICIES: E-mail Policy: Except for Saturdays, Sundays and holidays, your instructor will respond to emails within 24 hours. Students must place the Web Design & Course number Art 215 in the subject of the email / The student s name i.e. Jane Doe must be included in the body of the email message. 3
If student fails to do this the email will not be responded to under the 24 hrs response time policy and a response is not guaranteed in a timely manner. After week 01, please send emails to your instructor only to communicate those personal issues you do not wish others to read or that you think need personal attention; otherwise use the discussion board conference designated for course questions. All other course content questions or issues are posted to WebCafé. Assignment Submission Policy: Assignments (essays, quizzes, discussion board contributions, exams) will not be accepted via email. Homework submitted via email will not be graded. Homework must be submitted in the designated areas within the Course site via Moodle. Accepted File Formats: Rich text File (rtf). Portable Document File (PDF), PowerPoint (ppt only) not pptx. ALL OTHER FILE FORMAT WILL NOT BE ACCEPTED. Course-related Questions Policy: Ask course-related questions in class, via the WebCafé discussion board forum on Moodle, or request a mutually agreeable office visit prior to class. Asking courserelated questions in Moodle discussion board allows other students with the same question to read your question and the instructor's reply. Excepting Saturdays, Sundays and holidays questions will be responded to within 72 hours at the latest. Syllabus Disclaimer: The syllabus is a guide or map to the format and content. Course material, testing requirements, due dates and grading parameters are subject to change at the discretion of the instructor. ACCOMMODATIONS: Students who have a disability, which might affect their performance in class, are asked to notify the instructor within FIVE days of beginning of the semester if appropriate accommodations are to be made. This information will be made available in alternative format, such as Braille, large print, or cassette tape, upon advance request. If you have a disability and need accommodations to participate in the course activities, please contact your instructor as soon as possible. This information will be made available in alternative format, such as Braille, large print, or cassette tape. SUBSTANTIVE ESSAYS: Substantive Discussion Board Responses In order to make discussion boards more substantive, that is, meaningful and useful. I have established the following practice. Your individual posting to the discussion board is due on the specified date. Your responses are due one day after the due date. You can resubmit your individual posting on the due date if you wish to modify it based on your peers responses. What does substantive mean? A substantive remark is one that has worth, adds or expands the discussion, and is solidly base on the material presented for discussion. A substantive remark is not I agree or good job. Substantive responses can be typified by the following characteristics: Minimum three (3) sentence response, 100-150 words 4
Provides new insight Playing the devils advocate by taking on the opposing viewpoint Explaining why you agree or disagree by providing evidence that could include personal experience, hypothetical situations, and additional cited sources Pointing out other areas the author should also consider Developing the authors point in greater detail with new information Ask questions on things the author may have overlooked or needs to clarify When asking a question be sure to include other substantive components to meet the three (3) sentence minimum response Unacceptable responses include: Critiques of the paper s the format or spelling, Telling the author they did well or didn t do well without providing any evidence of how you came to that conclusion Repeating or rephrasing the author s post with no substantive response And of course the ever popular, I agree or good job as pointed out above 5
Spring 2013 Course Map Art 215 Web Design I Week 1: First Session Dr. Michael Grenier (Bethel Campus) Review Syllabus Review Assignments Concepts in Design Methods of Evaluation of Art & Design Webpage Assessment Assignment: Post a link to Moodle of the Worst web Site evaluate the site and explain why it displays poor design practice. Then Vote on the Worst webpage as a Group. Due via Moodle April 21 st, 2013 (11:55pm). Create a Scorecard for evaluating what you consider the Best Website. (Due May 5 th, 2013, 11:55pm. via Moodle) (Web Style Guide, Nature of Art Glossary, See Art Matrix, Lecture notes) In addition some evaluation points to consider 1. What makes the site appealing to you? 2. Is the site organized well? 3. Can you navigate the site easily? 4. Can you interact with the site? 5. Does the site spark/maintain your interest? 6. Is the site current? 7. Are you able to contact the provider easily from the site? 8. Would you purchase a product/service from this site? Week 2: Blog April 15 th, 2013 _John Determan, Web Master, Infinity Web Works, Century High School (G244) Blog Lecture: What is a blog? Why they have become so popular? How to establish a blog. How to manage a blog. How to edit the look of a blog. Wordpress / Blogger Web Templates Blog Site: 1. Blog site established at Blogger.com 2. Header graphic (color and image as well as name) incorporated 3. Weekly posts as notes from lectures and critiques of other blogs 4. Course lessons feed back Blog Lab: Work on assignment Week 3: First session: Jay April 22 nd, 2013 Jay Highum, Graphic Designer, Action Graphics, (Century High School. G244) Best practice of Web Design. User Experience: Chapter 2 Referenced Classic design (print) vs. Web design: Chapter 6 referenced Color theory resource: www.worqx.com and Chapter 11 referenced 6
Design Consistency across all media platforms: Hodgman Drainage materials Imagery selection: istockphoto.com Customized Web Pages (Silver Screen) Concept to completion (Files created that John will continue with Web Tools in Week 4) Jay s Chosen web site case study:? (victoriasmn.com) Jay: Lecture on Designing web layouts with Illustrator and Photoshop Illustrator basic operation & export to Photoshop Working with Photoshop to finalize layout Image selection (how do I know what to use) Usage guidelines (rights management) Working with istockphoto Working with Web Images Photoshop slices Image types (gif, png, jpg) Cropping & resizing & DPI Photoshop Lab: Have saved to work in Slices for Week 4. Week 4: Web Tools / Content Management April 15 th, 2013 _John Determan, Web Master, Infinity Web Works (Century High School, G244) 4. Contact link incorporated John: CMS Lecture Overview of tools available 1. Contribute 2. Joomla! 3. Drupal 4. Wordpress John: Case Study of IFC (a Joomla site). Look at admin interface, etc. 4. Inform the groups of desired deliverables for the group project a) site architecture - diagram of the web site b) home page layout 1. logo incorporated 2. imagery incorporated 3. navigation items incorporated 4. text incorporated c) secondary page template 1. logo incorporated 2. imagery incorporated 3. navigation items incorporated 4. text incorporated d) text for the site e) sample of a form page in the site (contact us, questionnaire, etc) f) project summary John Website case study: Continue from Jay s Files (Slices) Introduce Group project as assigned 1. Form teams. Five groups of four. Each group will consist of: a) copy writer/client liaison b) photography/imagery director c) web site designer/developer d) marketing director 7
Week 5: Designing for the Web (Bethel) Web Designed on paper Evaluation Week 6: June 3 rd, 2012 Mike (Bethel) Group Project Presentations Review Blogs in class Present Final Project Week 7: Final class June 10 th, 2013 Mike (Bethel) Final Exam Web Design Test Case Study Web Page Samples (logos) Demo Companies (logos in the see pdf file): Pinnacle Conservancy is an organization that purchases and restores the lands and waters it owns as well as manages and informs the public about our connection to the natural world. workstrong is an executive placement company. The company matches energetic, dynamic individuals with fast-paced companies to propel the business to the forefront of their business sector. Silver Screen is a multiple use facility. Classic motives will be shown for parties or individuals. Full meals accompanied by alcohol will be served. The facility will be utilized for business seminars, presentations as well as weddings and class reunions. Safe Investments focuses on business and individual finances. Services include market advice as well as investing, business pension plans, small business assistance, retirement funds, and estate management. Epicenter is a senior activity center designed to be in the center of urban areas. The focus is to have energetic activities for active seniors. Senior housing is available as well. 8