Introduction to Web DesignCOMM 3510 Section 001T, Th 9:10AM - 10:30AM

LNCO 2950

Dr. Sean Lawsonlawson.sean2005+ITWD@gmail.com

Phone: 801-585-7127Office: LNCO 2519

Office Hours: By appointment

Course Home Page: http://home.utah.edu/~u0620099/COMM3510

**After you have read through this syllabus carefully, please go to the courseWebCT page and fill in the Syllabus Understanding and Agreement Form. Due

date: 19 January 2010. Late penalty: 5% reduction in overall course grade (i.e.one half letter grade) for not competing the form by the due date.**

Course Description

In this course, students will learn the basic tools, technologies, and practices of webdesign. Where possible, free and open software source tools will be used to aide students inlearning the basic technologies of web design, including XHTML and CSS. Students will beintroduced to a design methodology based on the concepts of user-centered design. Usingthese tools, technologies, and practices, the course will take students through the processof designing and creating a website for a client, with whom the student will work closelythroughout the semester. By the end of the semester, students will be able to create basicwebsites and will be prepared to take COMM 5510, Advanced Web Design.

Textbooks

Required

Ethan Watrall and Jeff Siarto, Head First Web Design (O'Reilly, 2009). Available in theUniversity Campus Store.

Recommended*

Jennifer Niederst, Web Design in a Nutshell: A Desktop Quick Reference (O'Reilly, 2006).Available in the University Campus Store.

*The designation of "recommended" may be a bit misleading. The book is recommendedonly if you are already well-versed in the use of XHTML, CSS, and PhotoShop. If you do notfeel like you already have a strong grasp of each of these tools and technologies, then youshould buy Niederst so that you will have a quick, reliable reference by your side as youwork.

Other Requirements

• Email account. Please specify your preferred email address when you complete theonline Syllabus Understanding and Agreement Form.

• Persistence in the face of adversity. One of the most important things that youwill develop in this course is the ability to solve your own technical problems. Thiscourse focuses more on teaching you what comprises successful web design than itdoes on teaching every detail of how to do every task associated with web design.Thus, when you have a technical problem, you should attempt to solve thatproblem on your own first before you ask the professor. When you do askthe professor, you will be expected to detail the steps you took to solve theproblem on your own. That could have included looking in the course textbooksfor answers, looking at an online tutorial, and/or doing a Google search. There aretwo reasons for this requirement: 1) Your instructor is not a walking dictionary ofCSS, XHTML, etc. When your instructor does not know what tag to use, whichattributes a tag has, etc., he looks it up, reads/watches a tutorial, or searches theInternet for an answer; 2) When this course is over and you are designing a websiteand do not know what to do, you will have to be able to solve your problem on yourown. "Playing around," trying things out, making mistakes, fixing those mistakes,looking things up, and around and around, are what is required. You will not knoweverything; you will not get it right the first time. Even the best, most experiencedweb designers engage in these tasks every day.

• Web site hosted by the U or some other web hosting service within the first week ofclass. Our first "Code Clinic" will provide instruction for claiming and setting up yourU of U webspace. If you wish to get webspace outside of the U, you will beresponsible for solving your own technical difficulties related to connecting with FTP,setting up the space, etc.

• A USB key drive is essential. When you log off of the machine you were usingin the computer lab, any data you saved to that machine will be lost! SAVEALL YOUR WORK TO YOUR USB KEY DRIVE, NOT TO THE LAB COMPUTER!

• Creative thinking.• Beginning Photoshop (or GIMP, or Inkscape, or other image editing software)

ability.

Assignments

Weekly Assignments = 20% of final grade

Complete assigned activities each week, including coding exercises, website reviews, etc.Contribute to a conversation based on activities and readings assigned for the week.

Portfolio Website = 80% of final grade

Create a professional web portfolio for one of your classmates. This is a site that could beused to supplement a resume or promote the individual. Each student will have a classmateas a client. The client will articulate the purpose for the site, provide direction of the lookand feel, and supply all content for the site.

The assignment has four parts:

1) 4 February - Client Needs Assessment (20% of final grade)• Interview your client. Determine the goals for the site. Write a three page paper

identifying the purposes identified by the client for this site. Elaborate on thefollowing:

• Who is the intended audience?• What tone, theme, metaphor and visuals might be used to convey the purpose of

the site?• What information will be presented by this site?• Describe the primary organizational sections of the site• Include in a rough layout (pencil block sketch)

2) 2 March - Design, Look and Feel (20% of final grade)• Create graphic mock-ups for the site you are developing. Have your project partner

review and "sign-off" on the design. We will review the designs in class. Be preparedto deliver the following:

• Color mock-up of your homepage design• Color mock-up of an example secondary page• Style Guide - This is a text document identifying the colors used in the site,

typography (typeface, font size, etc), treatment for links, headings, etc.

3) 30 March - HTML/CSS prototype of site (20% of final grade) Code the home page forthe site as completely as possible. Code a secondary level page with placeholder or actualcontent. These two pages require the following:

• Valid XHTML and CSS• CSS contained in an external stylesheet• All images under 35kb• Home page less than 150kb, secondary pages less than 250kb (including images,

CSS and scripting)• The use of tables is only allowed for organizing data, not layout• Links on the home page go to the secondary page.

4) 22 April - Completed Site (20% of final grade) Post your site and turn in a site reportwhich has the following information.

• Title of the site• URL of the site• Describe the purpose of the site• Audience analysis• Discuss metaphor and theme used in the site and how it supports the purpose of the

site and reaches the intended audience• Comps of home page and secondary level pages• Site map (navigation tree)• Feedback from usability testing/focus groups• Personal critique of the site• 7 -10 pages in length

Weekly Schedule

Week 1 - 1/12 & 1/14 - Getting Started

1/12• Introductions• Review the course objectives• Discuss the semester project• Software resources• Web architecture• Assignment for week one

1/14• Code Clinic: Hello World!

◦ Finding a Home in Cyberspace - Claiming Your U of U Web Space◦ Furnishing Your New Home - Creating Your First Web Page◦ Moving In - Using FTP

Week 2 - 1/19 & 1/21 - Beauty is in the Eye of Your User

1/19• Establish groups for semester project• Site critique: Tazo Tea; Adventure Cycling• Overview of design process• Introduction to User-Centered Design

1/21• Code Clinic: Got Style?

◦ Introduction to CSS◦ Building a Simple CSS File and Linking it to Your XHTML

Reading

• Building Beautiful Web Pages [HFWD Chpt 1]

Week 3 - 1/26 & 1/28 - Pre-Production

1/26• Discuss design process: visual metaphor, theme, color, storyboards• The Three-Legged Stool

1/28• Code Clinic: Thinking Inside the Box

◦ Boxes inside of Boxes◦ Rule of Thirds◦ Working with Grids

Reading

• Paper Covers Rock [HFWD Chpt 2]

Weekly Assignment

In 2-3 paragraphs review Adventure Cycling Identify theme, metaphor, audience, purposeof the site. Assess how well these concepts work together. Identify areas that you wouldchange if your were the designer for this site

Remember to read posts form others in the class and discuss.

Week 4 - 2/2 & 2/4 - Organizing Your Site

2/2

• Information Architecture

2/4• Code Clinic: Site Architecture and Addressing

◦ On Not Going Insane - Organizing and Managing Your Project Files◦ All Together Now - Addressing and Linking

Reading

• "So you take a left at the green water tower..." [HFWD Chpt 3]

Weekly Assignment

This week you will review two different web sites:• Alternative Photography• Britain From Above

These sites have different strategies for organization. How easy is it to understand whateach site is about. Compare strategies for organizing and accessing information. Identify atleast one strength and one weakness from each site

Remember to read posts form others in the class and discuss.

Final Project

• Client Needs Assessment is due

Week 5 - 2/9 & 2/11 - Layout and Design

2/9• It's the People, Stupid! - Using personas to understand audience• Windows on the Web - Screen resolution, design, and layout

2/11• Code Clinic: DIV-iding it Up!

◦ From Paper Boxes to Boxes Made of XHTML - The <div> & <id> Tags◦ Organizing Your Boxes◦ Boxes Don't Have to be "Squares" - Styling with CSS

Reading

• "Follow the Golden Rule" [HFWD Chpt 4]

Weekly Assignment

Which persona are you?• Last.fm• Pandora• Deezer

These sites have a common goal. Each has a different layout, feel and functionality. Basedon what you have learned about designing with personas, describe the primary persona for

each of the site. Then describe which site you find most useful, engaging and functional.Describe why the site works for you and why the other sites do not

Remember to read posts from others in the class and discuss.

Week 6 - 2/16 & 2/18 - Designing with Color

2/16• The Basics of Color• Site critiques: Last.fm; Pandora; Deezer

2/18• Code Clinic: Cooler with Kuler

◦ Demo of Adobe's Kuler web app--uploading an image, extracting colors,creating color palettes, grabbing hex codes.

◦ Using hex codes in CSS◦ NOTE: Everyone should bring an image on their flash drive that they can

upload to Kuler.

Reading

• "Moving Beyond Monochrome" [HFWD Chpt 5]

Weekly Assignment

Using page 178 as an example. Define the core color concepts for the site you aredesigning. Use these definitions to generate a CSS file for your site.

• body - background color and text color.• headings - text color, background color, border colors• links - text color for link, hover and visited states

Week 7 - 2/23 & 2/25 - Smart Navigation

2/23• Alternate Approaches to Navigation• Use of Text and Icons

2/25• Code Clinic: Tips and Tricks for Mocking Up in GIMP or PhotoShop (Guest

presentation by David Smurthwaite, Chief Creative Officer, Jibe Media)

Reading

• "In 2 seconds, click 'Home'." [HFWD Chpt 6]

Weekly Assignment

Develop a basic "Things I Like to Do" web site. Post the site to your space onhome.utah.edu (or other host if you have one).

• Four pages (home plus three others• Use a linked CSS file.• Apply CSS to the body text, all headings, links and list items

• Build a navigation system so that all pages can be accessed from anywhere in thesite.

Final Project

• Design, Look, and Feel is due

Week 8 - 3/2 & 3/4 - Writing for the Web

3/2• Basics of Good Web Writing• The Typography Lecture; Or, Text Can Have Style Too!

3/4• Code Clinic: Nip and a Tuck

◦ Getting your text ready for prime time.

Reading

• "Yes, you scan!" [HFWD Chpt 7]

Weekly Assignment

Compare and contrast the following web sites.• A List Apart• Ajaxian

Critique their use of:• Literary or narrative style• Use of headings• Use of lists• Use of typography (typeface, font, line length, leading)

Which site made their content easiest to understand, comprehend and access?

Week 9 - 3/9 & 3/11 - Accessibility

3/9• Accessibility - Get Your Message Across to Your Audience...ALL of It!

3/11• Code Clinic: From Slicing and Dicing to Code Soup (suggested)

◦ Moving from mock-up to code

Reading

• "Inaccessibility Kills" [HFWD Chpt 8]

Weekly Assignment

Use one of the screen readers mentioned in the text (pg. 278) and test your design. Try toaccess all of the content of your design without using a mouse and without looking at thescreen. (If your prototype is not complete enough to do this activity please use the course

site)

Week 10 - 3/16 & 3/18 - Lab Days

3/16• Time in class to work on HTML/CSS Prototype assignment

3/18• Time in class to work on HTML/CSS Prototype assignment

Reading

None!

Weekly Assignment

None! Work on your HTML/CSS Prototype

Week 11 - 3/23 & 3/25 - CLASS CANCELED

• Spring Break!

Week 12 - 3/30 & 4/1 - Listen to Your Users!

3/30• Time in class to create a usability survey

4/1• Time in calss to have 4 classmates other than your client evaluate your website and

complete your usability survey.

Reading

• "The Pathway to Harmonious Design" [HFWD Chpt 9]

Weekly Assignment

Assess the usability of your site.• Create a usability survey (based on reading in Chpt 9 of HFWD). Have 4 classmates

(at least) take the survey. Also consider having family and friends outside thecourse take the survey. The more feedback the better!

Final Project

• HTML/CSS Prototype is due 3/30

Week 13 - 4/6 & 4/8 - Other tools and tricks: Dreamweaver, WordPress, dynamiccontent, etc.

4/6• Code Clinic: Dreamweaver and Dynamic Content

◦ Introduction to Dreamweaver◦ Embedding content from around the web--i.e. YouTube, Twitter, Del.icio.us,

etc.

4/8• Time in class to work on Portfolio Site project.

Reading

• "Keeping Your Site Fresh" [HFWD Chpt 10]

Weekly Assignment

Test your site for validity.• Use a code validator to test the quality of your code.• Test your site in as many web browsers as you can. Check to see that your design

displays the same across browsers.

Week 14 - 4/13 & 4/15 - Lab Days

4/13• Time in class to work on Portfolio Site project.

4/15• Time in class to work on Portfolio Site project.

Week 15 - 4/20 & 4/22 - Lab Day & Presentations

4/20• Time in class to work on Portfolio Site project.

4/22• Project presentations

Final Project

• Completed Portfolio Site is due

Week 16 - 4/27 - Project Presentations

4/27• Project Presentations (Only if needed.)

Policies

Course Communication Support

Communication outside of class will be channeled through email. When you fill out the

online form acknowledging that you have read and understood this syllabus, please enteryour preferred email address to be used to contact you in this course. We will use emailfrequently to share important course information and I expect that you will both be able toreceive those emails and read them. Additionally, we will be posting information onWebCT. At https://webct.utah.edu/webct/logonDisplay.dowebct. Finally, please sendcourse-related email to the address listed at the top of this syllabus (i.e.lawson.sean2005+ITWD@gmail.com). ONLY COURSE-RELATED EMAIL SENT TOTHAT ADDRESS WILL BE ANSWERED.

Professional Civility

All class members are expected to behave professionally and treat others with civility.Cellular phones must be turned off or silent during class. Students are expected to waituntil after class to place and receive calls. Racist, homophobic, and sexist behavior/comments directed at class members are unprofessional and therefore inappropriate.Unprofessional behavior will be politely but immediately and firmly addressed by theprofessor.

The Classroom

Our workspace is full of expensive and fragile equipment that we have the privilege ofusing. No drinking or eating will be allowed during class - please do not make me remindyou. Be respectful of your tuition dollars at work--do not foul your own nest! DO NOTALLOW NON-CLASS MEMBERS INTO THE LAB. Unnecessary and/or inappropriate use ofour machines increases the risk of downtime and your inability to complete your projects ontime.

Integrity

Strict standards of academic honesty will be enforced. Academic dishonesty will beprosecuted to the fullest extent possible. The Student Code is published in the Universitycourse schedule. Students have specific rights in the classroom as detailed in the code. Thecode also specifies proscribed conduct that involves cheating on tests, plagiarism, and/orcollusion, as well as fraud, theft, etc. Students may receive sanctions for violating one ormore of these codes. Cheating and plagiarism will result in appropriate penalties, such as afailing grade on a specific assignment or in the course and/or expulsion from the course.Students have the right to appeal such action to the Student Behavior Committee.

Incompletes

Incompletes will not be granted.

Copyright

Work produced in this class is copyrighted by the student. Continued attendance to thiscourse constitutes permission for your work to be used by the professor as examples incourses, public lectures, academic publications, and other not-for-profit, fair-use practices.

Registrar's Message

The Registrar cautions you that withdrawing from a course and the other registration issuesare the student's responsibility. The last day to drop the class is Sept 2rd, 2009 and thelast day to withdraw without tuition penalty is October 23rd, 2009.

Requests for Reevaluation

The burden of proof in any disagreement over evaluation of student performance rests withthe student. If you desire reevaluation of a grade for an assignment or activity you mustsubmit your request and rationale in writing. Your request must identify the specific changerequested and provide a reasoned argument and evidence in support of that change. Anyrequest for reevaluation must be made within one week of receipt of the original evaluation.

Content Accommodations

The University recognizes that students’ sincerely-held core beliefs may make it difficult forstudents to fulfill some requirements of some courses or majors. It is the student’sobligation to determine, before the last day to drop courses without penalty, when courserequirements conflict with the student’s sincerely-held core beliefs. If there is such aconflict, the student should consider dropping the class. A student who finds this solutionimpractical may request a content accommodation from the instructor. Though theUniversity provides, through this policy, a process by which a student may make such arequest, the policy does not oblige the instructor to grant the request, except in those caseswhen a denial would be arbitrary and capricious or illegal. Note from Instructor onAccommodation: All readings in this course are required and considered to be an integralpart of instruction. While you may exercise your privilege to request an accommodationunder University Policy, I will not grant any content accommodations.

Disability Accommodations

The University of Utah seeks to provide equal access to its programs, services and activitiesfor people with disabilities. If you will need accommodations in the class, reasonable priornotice needs to be given to the Center for Disability Services, 162 Olpin Union Building,581-5020 (V/TDD). CDS will work with you and the instructor to make arrangements foraccommodations.

All written information in this course can be made available in alternative format with priornotification to the Center for Disability Services.

The Student Handbook is a good resource to consult. See www.acs.utah.edu/sched/handbook/toc.htm for details on these or other student issues

ADA Statement

The University of Utah seeks to provide equal access to its programs, services and activitiesfor people with disabilities. If you will need accommodations in the class, reasonable priornotice needs to be given to the Center for Disability Services, 162 Olpin Union Building,581-5020 (V/TDDD). CDS will work with you and the instructor to make arrangements foraccommodations. All written information in this course can be made available in alternativeformat with prior notification to the Center for Disability Services. Additional informationabout the Center for Disability Services is available on the Center’s website:http://www.sa.utah.edu/ds/

Instructor's Right to Change and/or Clarify

Though no major changes to the syllabus are expected, your instructor retains the right tomake changes to the syllabus as necessary, as well as to clarify the meaning or intent ofanything in this syllabus.