Introduction to Web Design

COMM 3510 Section 001

T, Th 9:10AM - 10:30AM
LNCO 2950

Dr. Sean Lawson

lawson.sean2005+ITWD@gmail.com
Phone: 801-585-7127
Office: 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 course
WebCT 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 web
design. Where possible, free and open software source tools will be used to aide students in
learning the basic technologies of web design, including XHTML and CSS. Students will be
introduced to a design methodology based on the concepts of user-centered design. Using
these tools, technologies, and practices, the course will take students through the process
of designing and creating a website for a client, with whom the student will work closely
throughout the semester. By the end of the semester, students will be able to create basic
websites 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 the
University 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 recommended

only if you are already well-versed in the use of XHTML, CSS, and PhotoShop. If you do not
feel like you already have a strong grasp of each of these tools and technologies, then you
should buy Niederst so that you will have a quick, reliable reference by your side as you
work.

Other Requirements
 • Email account. Please specify your preferred email address when you complete the
online Syllabus Understanding and Agreement Form.
• Persistence in the face of adversity. One of the most important things that you
will develop in this course is the ability to solve your own technical problems. This
course focuses more on teaching you what comprises successful web design than it
does 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 that
problem on your own first before you ask the professor. When you do ask
the professor, you will be expected to detail the steps you took to solve the
problem on your own. That could have included looking in the course textbooks
for answers, looking at an online tutorial, and/or doing a Google search. There are
two reasons for this requirement: 1) Your instructor is not a walking dictionary of
CSS, XHTML, etc. When your instructor does not know what tag to use, which
attributes a tag has, etc., he looks it up, reads/watches a tutorial, or searches the
Internet for an answer; 2) When this course is over and you are designing a website
and do not know what to do, you will have to be able to solve your problem on your
own. "Playing around," trying things out, making mistakes, fixing those mistakes,
looking things up, and around and around, are what is required. You will not know
everything; you will not get it right the first time. Even the best, most experienced
web designers engage in these tasks every day.
• Web site hosted by the U or some other web hosting service within the first week of
class. Our first "Code Clinic" will provide instruction for claiming and setting up your
U of U webspace. If you wish to get webspace outside of the U, you will be
responsible 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 using
in the computer lab, any data you saved to that machine will be lost! SAVE
ALL 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 be
used to supplement a resume or promote the individual. Each student will have a classmate
as a client. The client will articulate the purpose for the site, provide direction of the look
and 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 the
following:
 • 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 prepared
to 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 for
the site as completely as possible. Code a secondary level page with placeholder or actual
content. 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 report
which 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, purpose
of the site. Assess how well these concepts work together. Identify areas that you would
change 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 what
each site is about. Compare strategies for organizing and accessing information. Identify at
least 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. Based
on 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 are
designing. 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 on
home.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 the
site.

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 to
access all of the content of your design without using a mouse and without looking at the
screen. (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 the
course 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, dynamic
content, 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 enter
your preferred email address to be used to contact you in this course. We will use email
frequently to share important course information and I expect that you will both be able to
receive those emails and read them. Additionally, we will be posting information on
WebCT. At https://webct.utah.edu/webct/logonDisplay.dowebct. Finally, please send
course-related email to the address listed at the top of this syllabus (i.e.
lawson.sean2005+ITWD@gmail.com). ONLY COURSE-RELATED EMAIL SENT TO
THAT 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 wait
until 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 the
professor.

The Classroom

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

Integrity

Strict standards of academic honesty will be enforced. Academic dishonesty will be

prosecuted to the fullest extent possible. The Student Code is published in the University
course schedule. Students have specific rights in the classroom as detailed in the code. The
code also specifies proscribed conduct that involves cheating on tests, plagiarism, and/or
collusion, as well as fraud, theft, etc. Students may receive sanctions for violating one or
more of these codes. Cheating and plagiarism will result in appropriate penalties, such as a
failing 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 this
course constitutes permission for your work to be used by the professor as examples in
courses, 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 issues
are the student's responsibility. The last day to drop the class is Sept 2rd, 2009 and the
last 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 with
the student. If you desire reevaluation of a grade for an assignment or activity you must
submit your request and rationale in writing. Your request must identify the specific change
requested and provide a reasoned argument and evidence in support of that change. Any
request 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 for
students to fulfill some requirements of some courses or majors. It is the student’s
obligation to determine, before the last day to drop courses without penalty, when course
requirements conflict with the student’s sincerely-held core beliefs. If there is such a
conflict, the student should consider dropping the class. A student who finds this solution
impractical may request a content accommodation from the instructor. Though the
University provides, through this policy, a process by which a student may make such a
request, the policy does not oblige the instructor to grant the request, except in those cases
when a denial would be arbitrary and capricious or illegal. Note from Instructor on
Accommodation: All readings in this course are required and considered to be an integral
part of instruction. While you may exercise your privilege to request an accommodation
under 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 activities
for people with disabilities. If you will need accommodations in the class, reasonable prior
notice 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 for
accommodations.

All written information in this course can be made available in alternative format with prior
notification 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 activities
for people with disabilities. If you will need accommodations in the class, reasonable prior
notice 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 for
accommodations. All written information in this course can be made available in alternative
format with prior notification to the Center for Disability Services. Additional information
about 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 to
make changes to the syllabus as necessary, as well as to clarify the meaning or intent of
anything in this syllabus.