Web Design 1 Syllabus

Course Description
Web Design 1 is a course designed to introduce the student to web presentation,
theory, techniques and current software applications. Instruction will include
usability, graphic design, web terminology, appropriate file protocoling, information
architecture planning, communication strategies and www identity design. Upon
completion of this course, students will possess a working knowledge of how to
organize and design full web page content for interactive online user interfacing or
control-group presentation.
Contact
Susan Buck (susan@susanbuck.net)
Office: Addams 213
Office Hours: MW 12:30-3:30 by appointment
Grading
Point Distribution / Scale
Project 1 One page site 15%
Project 2 Site redesign 15%
Project 3 JavaScript Tool 15%
Project 4 Experimental Web 15%
Project 5 Final 15%
Assignments 25%
A < 93.3%
A- < 90.0%
B+ < 86.6%
B < 83.3%
B- < 80.0%
C+ < 76.6%
C < 73.3%
C- < 70.0%
D+ < 66.6%
D < 63.3%
D- < 60.0%
F < 60.0%
Submitting Work
All work must be submitted before the start time of the class of the due date.
1 day late 5% deduction
2 days late 10% deduction
3+ days Not accepted
All work must strictly follow submission guidelines and be presented in an organized
way. Please make sure all work remains online and in the same location where it was
submitted for the duration of the semester. The instructor is not responsible for
tracking down or troubleshooting faulty links.
You should always maintain at least two copies of your work should one storage
device fail. Mangled jump drives, borked computers and faulty servers are not
acceptable excuses for late projects.
Work produced in courses at the School of Design is the property of the student. By participating in a
course each student grants the School of Design a non-exclusive right and license to use, copy, distribute,
display and perform such work in any and all media for educational, programmatic and/or promotional
purposes. The School of Design will exercise care with respect to student-created materials submitted in
conjunction with a course; however, the School of Design does not assume liability for their loss or damage.
Attendance
Attendance at all classes is mandatory.
There is no excused / unexcused absence policy in this class since the deduction
system allows for a two absence leeway before penalization. Therefor, if you have to
miss class for a school sanctioned event, health emergency, family emergency, etc. it
is unnecessary to request the absence be waived.
All work is due as scheduled, even in your absence. Please plan ahead.
If you do have to miss class it is your responsibility to get caught up on what you
missed by contacting another student for information, reviewing the lecture notes as
well as doing your own research on topics listed in the syllabus. Your absence does
not denote an extra teaching assignment for the instructor, so please do not ask me
to cover a missed class via email. I am, however, happy to address specific questions
you may have during office hours.
If you arrive after attendance is taken (i.e. late), please speak with me after class so
you won't be counted as absent.
Perfect attendance (no absences, no
lates)
2 points added to final grade
1-2 Absences No penalty
3rd Absence 4 points off final grade
4th Absence 6 points off final grade
5th Absence 10 points off final grade
6th Absence Failure
1-2 Lates No penalty
3rd Late 3 points off final grade
4th Late 5 points off final grade
5th Late 10 points off final grade
6th Late Failure
Lates will be counted throughout the semester, but will only result in a point penalty if
you've exceeded the first two absences.
The above policy is not designed to solely penalize individuals but rather to help the
class as a whole. Tardiness and gaps in understanding of material because of
absences creates distractions and wastes time for everyone.
Participation
In addition to being present, in class participation is an integral part of this course.
Class critiques and exercises will be more fruitful if everyone is actively involved.
Students are required to be actively engaged in their work as well as the work of their
peers. Participation points will be closely worked into the grading of projects and final
grades may be subject to adjustments based on a student's engagement within the
course.
Project Guidelines
All projects will begin with a sketch and idea proposal. Students are expected to pick
topics for their projects that interest them and have potential to be useful beyond the
scope of this class. Superficial ideas which simply meet the requirements are
discouraged. Sketches should be thorough and show evidence of multiple iterations.
Research clippings and examples of inspiration are encouraged at this stage of
development.
Once an idea is approved, students will construct a mockup in Photoshop. The mockup
is not just a next level sketch, but a complete representation of how they expect their
final project to look. The mockups assure that any design and interface critiques can
be addressed before students began building their projects.
Projects will be graded from a technical and design perspective taking into
consideration code organization, content quality, and interface design.
Students will also be graded on how they present their final project during critiques
and how ready for a live demo their work is. For the presentation, students should
explain their project, speak confidently about what they've created and discuss any
challenges they faced.
Web Design 1 ScheduIe

This schedule is subject to change and will adapt throughout the semester to meet each
particular class' needs and interests as well as current topics in the field.

Week 1
CIass 1 (1/12 W)

No cIass (TraveIIing abroad)

FoIIow these instructions

Week 2
Martin Luther King Jr. Day - No CIass (1/17 M)

CIass 2 (1/19 W)
ntroductions
Review syllabus, topics, schedule, projects, submitting work
Learning to think like a developer / designer
Software overview (visual design, code editors, FTP), optimizing work flow
Server space, domain names, branding your space online
Publishing on the web, "Hello World"

Assignment:
1. Confirm you can login to the class backend
2. Get your server setup
3. "Hello World" / One page sites examples: On your server, create a HTML page
listing three examples of one page sites. nclude a 300 word response with
thoughts on the design, content, organization and overall application of the one
page technique.




Week 3
CIass 3 (1/24 M)
Project rubrics
Sketches and Mockups
HTML 1
Web dev puzzle pieces
Versions
Tags structure
Nesting tags
Lists / Links
View source
Site organization and protocols, file naming conventions, etc.
Look at examples of one page sites, Project 1 One Page Site | Assigned

Assignment:
1. Sketches
2. HTML Poem w/ at least 5 tags
3. (Extended due date to Friday 1/28) Read 37 Signal redesign (including
comment section) and post a 300 word response.
CIass 4 (1/26 W)
Project 1 One Page Site | Sketches (Split up)
Mockup details cont'd
10 Tips For Creating Website Mockups n Photoshop
Form elements
Browser resolutions: what to design for
HTML 2
Style related tags (headings, fonts, etc). & looking ahead to CSS
Colors (hexadecimals)
mages
Basic body structure
nterface design: links

Assignment:
1. Mockups
2. Update HTML poems adding the following
Proper body structure
mages
5 More tags

Week 4
CIass 5 (1/31 M)
Project 1 One Page Site | Mockups
HTML 3
Tables
Document structure
Doc type
Meta tags
Comments

CSS 1
Separating content and style
Cascading: external, internal, inline
Property examples

Assignment
1. Review over these two sites about CSS positioning and write a 300 word
response
a. http://www.w3schools.com/css/css_positioning.asp
b. http://www.barelyfitz.com/screencast/html-training/css/positioning/

CIass 6 (2/2 W)
CSS Zen Garden: Power of CSS
CSS Float, layout, positioning
Layout example
Layout templates
CSS Layout exercises

Assignment:
1. Work on your project. You should have a solid amount of work to bring to class on
Monday so we can push through any last technical troubles or design issues you need to
wrap up before Wednesday.
Week 5
CIass 7 (2/7 M)
Project workshop

Assignment:
1. Complete Project 1
2. Create an account at stackoverflow.com and use it to address a question you're having
with building your site. You may either use an existing question or if it has not yet been
asked, post one of your own. Submit the link to the question.
CIass 8 (2/9 W)
Project 1 One Page Site | Critique
Project 2 Redesign | Assigned

Assignment:
1. Post 3 examples of poorly designed sites with a 300 word response
2. Review the following sites and write a 300 word response
a. You're Killing Me, Zapos
b. Dear American Airlines
c. Redesigning the Boarding Pass

Week 6
CIass 9 (2/14 M)
Project 1 Critique cont'd (Leslie, Alex, Amy)
Lecture: Web mpressions - content, organization, communication
Look at bad site examples, discuss issues, collectively pick 3 for Project 2
Wedding Cakes
Penn Portal
"The French Restaraunt"
Assign Project 2: Site Redesign
Exercise: Web mpressions (sFR)

Assignment:
1. Answer the Web mpressions question list for your subject for Project 2
1. Sketches
CIass 10 (2/16 W)
Project 2 Redesign | Sketches
Complete Web mpressions exercise
Lecture: Design - Make it perfect
Exercise: Design Vocabulary
Assignment:
1. Mockups
2. Post results from design challenge 1 (sFR)

Week 7
CIass 11 (2/21 M)
30 Min cont'd Design Vocabulary exercise (Hope's Cookies)
mages for the web
Project 2 Redesign | Mockups

Assignment:
1. View all of your classmates interpretations of the sFR project and pick which one
you think is the most succesful. n a 300 word respone explain why you choose
that one, what is working and what tweaks you might still make.

CIass 12 (2/23 W)
Project workshop

Week 8
CIass 13 (2/28 M)
Project 2 Redesign | Critique

Assignment
1. Post 3 examples of JavaScript tools with a 300 word response about your choices

CIass 14 (3/2 W)
Finish critiques (Stacey, James)
Sketch / process revisit
Assign Project 3: Javascript tool
Lecture: JavaScript 1
What can JS do / What is it
Functions
Comments
Debugging
document.getElementByd()
.style, .value, .html,. innerHTML
Variables
Decisions
Code versions from class
n class JavaScript exercises

Assignment:
1. Sketches

Week 9

Spring Break

Week 10
CIass 15 (3/14 M)
Project 3 JS Tool Sketches
Go over first few exercises from last class
Lecture: JavaScript libraries: MooTools
Exercise: MooTools & complete exercises from last class

Assignment
1. Mockups
2. Bring anything you may want to talk about for the strategy project workshop
CIass 16 (3/16 W)
Feedback from Gabby's mom about cake website redesign
Project 3 JS Tool Mockups
Strategy Project workshop - Bring your questions / project strategies
Midsemester review

Assignment
1. Post 3 features you'd like to learn more about between now and the end of the semester.
Week 11

CIass 17 (3/21 M)
ndividual Project Workshop 2
CIass 18 (3/23 W)
Project 3 JS Tool | Critique
Project 4 Experimental Site | Assign

Assignment
1. Post 3 examples of experimental web sites with a 300 word response
Week 12
CIass 19 (3/28 M)
HTML 5 (slides)
Useful tools: Firebug Measuret
Animated Gif's in Photoshop
Browser detection
HTML ncludes: Looking forward and building easily maintained sites (code)
Look at selection of examples of experimental sites

Assignment:
1. Sketches & Mockups

CIass 20 (3/30 W)
Project 4 Experimental Site | Sketches & Mockups
Processing forms (PHP)
Requested tips, tricks and topics
Paired project workshop


Week 13
CIass 21 (4/4 M)
Project workshop

CIass 22 (4/6 W)
Project workshop

Week 14
CIass 23 (4/11 M)
Project 4 Experimental Site | Critique
Project 5 Final | Assign
Portfolio examples
Requested tips, tricks and topics

CIass 24 (4/13 W)
Looking past client side coding to server side coding: PHP and dynamic / stored content
Flash and web design

Week 15
CIass 25 (4/18 M)
Project 5 Final | Sketches
Requested tips, tricks and topics

CIass 26 (4/20 W)
Project 5 Final | Mockups
Requested tips, tricks and topics
Project workshop

Week 16

CIass 27 (4/25 M)
Project workshop
CIass 28 (4/27 W)
Project workshop

Week 17

Exam
Project 5 Final | Critique