The New School University
Parsons The New School for Design
School of Art, Media and Technology
Course
Web Design Basics
CRN: 4059 – PSAM 1028 – A
CRN: 4061 – PSAM 1028 – C
Time
Spring 2016
January 29, 2016 – May 13
C: Friday 9:00 – 11:40pm
A: Friday 12:00 – 2:40pm
Location
6 East 16th Street
Room # 1109
URL
http://b.parsons.edu/~dejongo/
Backup Site: http://portfolio.newschool.edu/webdesignbasics/
Instructor
Onno de Jong
Open to
All university undergraduate degree students; except Communication Design and Design & Technology majors.
Course Description
This course is an introduction to web design and development within an overview of current web environments. Projects will cover planning and implementation of websites that offer common functionality as well as adhere to good usability, accessibility, compatibility, and validation practices. HTML, XHTML, CSS, interactivity, information architecture and navigational structures will be explored, as well as usability and web design strategies.
Course Outline
Last updated 01/28/2016
Week 1
1/29
Introduction to Hyper Text Markup Language. Brief history and overview of the web. Activity: Create HTML file. Cover basic HTML elements and page structure. Activity: Website Analysis —create a copydeck, style guide and wireframe for the site you have chooses to review, and compare and contrast the site to its competition. Why does it work for you? Why does the competition’s websites not work?
Homework
Analyze the design and content of a website in line with your main interest. Make a style guide that explores the intent, voice, tone, brand and persona(s) of the target audience for the site. Use images. Mark up the assignment if you can. Watch videos. Read chapters 1-3. Due: Next Week — Due Next Week means due by the following Thursday Morning (that way I can look over the assignments and provide feedback on your markup.). Email the assignments until you get your server space up.
Week 2
2/5
Semantic HTML5, Developing Website and User Experience. Writing semantic HTML5, preparing images, upload files using FTP client and organize server space. Introduce user experience in developing content and designing layout Activity: Create an HTML document for the website you analyzed with an eye on making it your own portfolio. Activity: Activate the account school provides and upload first assignment.
Homework
Create landing page with link to assignment and worksheet. Worksheet is to contain strategy, design considerations, wireframe and comp of website. Make links to these assignments on the worksheet. Read chapters 4-6. Due: The following week.
Week 3
2/12
Introduction to CSS (cascading style sheets). CSS is the design language for the web. The mechanics of how CSS integrates with HTML and the most-used properties. Activity: Highlight content using CSS selectors. Activity: Following your Photoshop comp, style markup.
Homework
Turn your Photoshop sketches into HTML and CSS wireframe. Test CSS selectors by targeting each element and change its background color. Develop your design, brand, written content and images to make your portfolio website. Read chapters 7-10. Due: The following week.
Week 4
2/19
CSS layout strategies. Various layout strategies including block vs inline, relative and absolute positioning, floats and floating layouts and the z-index property. Overview of layout strategies currently used to build pages in web design. Activity: Translate Photoshop Comp into HTML/CSS using different layout strategies.
Homework
Use different layout strategies to build your website. Read chapter 11. Due: The following week. First Quarter Assessment: Have your landing page, first two assignments and a good stab at coding the last and this assignments up by Wednesday Night so I can grade them by the following Friday.
Week 5
2/26
Complete web site. Styling navigation, site architecture, optimizing the site for search engines and implement Google Analytics to track users. Activity: Build website using HTML5 Boilerplate. Activity: Style navigation links. Activity: Open up a Google Analytics account and apply it to your web pages.
Homework
Develop your portfolio website. Read chapter 13. This Midterm Assignment is Due: Next week for review and grade. Have it ready for presentation two weeks from now.
Week 6
3/4
Official Midterm Assessment and Peer Review I will make rounds and provide feedback in class or through email.
QUIZ testing comprehension of CSS Layout Strategies.
Type has exploded on the web. Principles of typography, formatting text and using type for effective communication when designing for the web. Activity: Practice using Typefaces from different sources. Activity: Peer Review.
Homework
Send peer review comments to peer and to me. Due: ASAP so the peer review can be incorporated into the midterm. Watch the videos on and by Carson. Create typography assignment. Read chapter 13. Due: In two weeks.
Week 7
3/11
Activity: In-class peer review.Activity: Presentation and Critique of portfolio. Development of Final.
Homework
Final assignment: create a site that sells something. Final Assignment is Due: at the end of the course. Final Topic is Due:: next week. Second Quarter Assessment: Have your midterm up so I can grade them.
Week 8
3/18
Responsive Design. The web is on display on iPhone and iPad screens to desktop computers. CSS media queries allow you to target each of these devices in one style sheet. Activity: Use media queries to target different devices.
Homework
1) For the class: Redesign the midterm to be responsive to each of these devices. 2) For the final: Develop a proposal for your final project. Read chapter 12. Due: The following week.
Week 9
4/1
CSS3 part 1. An examination of new CSS3 properties: color, opacity, box shadow, border radius, multiple backgrounds, picture borders and gradients. Activity: Use these properties in class.
Homework
1) For the class: Use the CSS3 properties covered in a collateral piece for your project. It can be a sales poster, an online brochure, or an email advertisement. 2) For the final: Research, brand and position the final project in terms of its target audience, write the copy and develop a look that incorporates the CSS3 properties covered this week. Due: The following week.
Week 10
4/8
CSS3 part 2. Detailed examination of more CSS3 properties: 2-D transforms, transitions, animations and multicolumn layout.
Activity: Use these properties in class.
Activity: In-class Workshop.
Homework
1) For the class: Using the new CSS3 properties to create a simple animatic for your final project. Animate elements created in the previous homework. 2) For the final: Finish wireframe and Photoshop Comp for final. Read chapter 14. Due: The following week.
Week 11
4/15
Programming on the web. Scrips on the server and the client create the modern web experience. 1. Introduction to PHP. Activity: Use PHP includes to make final website modular. 2. JQuery as a way to create dynamic web pages. Activity: Create a dynamic web page using jQuery.
Homework
1) For the class: Implement a PHP include for your navigation and a jQuery script into your final website. 2) For the final: finish the remaining page for your website for peer review. Read chapters 19 and 20. Due: The following week.
Week 12
4/22
Multimedia features of HTML5. HTML5 introduces a host of new features, the most visible are sound, video and the canvas element. Activity: We will incorporate these elements into a web page. 8
Activity: In-class final Workshop #2.
Homework
1) For the class: Use audio, video or canvas to sell your final Project. 2) For the final: Create home page for the final. Read chapter 17. Due: The following week. Third Quarter Assessment: Have your Final Worksheet including all 7 steps, photoshop comp and first page ready and uploaded by Wednesday Night. So I can grade them by next Friday.
Week 13
4/29
Forms and Peer Review. HTML forms are a standard way to collect information from the user. Activity: Create a simple form. Your final project should be a functional web site by this time. Activity: Peer Review: Students split up into pairs and review each other’s web sites. I will also be reviewing everyone’s website.
Homework
1) For the class: Create a form to collect user information for your site. 2) Write up the web site you reviewed and hand that in both to the person whose site you reviewed and to me. Read: chapter 16. 3) For the final: Use the feedback from the peer review to finish your website. Due: The following week.
Week 14
5/3
Content Management Systems The basis of most professional websites is a CMS. We will take a look at how a WordPress template pulls together different PHP modules into a single HTML page, and how the CSS controls the look of the site. Activity: Modify a WordPress template, using it as the basis for our own design. Activity: 15 minutes will be taken to complete on-line student evaluations. Activity: In-class final Workshop #3.
Homework
You will be working on your final and other assignments. If you have extra time on your hands, you can build a WordPress template.
Week 15
5/10
Final exhibition of your work. Class discussion, critique and celebration of your new found powers to build anything you can dream, on the web.
Homework
Final Assessment: You will have an extra 5 days to complete all of your assignments.
Have a great NEW YEAR!!
Learning Outcomes
By the successful completion of this course, students will be able to:
- The expectation is that the technical aspects of how the work is coded for the web be transparent and not stand in the way of the communicative efficacy.
- Design, build and maintain standards compliant web sites.
- Handcode semantic HTML.
- Use CSS to Implement Design, separating form from content.
- Incorporate the various layout strategies to effectively realize their designs.
- Create responsive web sites designed for multiple devices using media queries.
- Incorporate the latest in CSS3 and HTML5.
- Use PHP and/or Javascript/jQuery.
- Create Forms and be familiar with how a CMS works (WordPress).
Assessable Tasks
Assessable tasks are those core tasks required to create modern web design.
Hand coding the HTML and CSS should come together with the midterm assignment. Bold terms signify assessable tasks:
| Tasks / Activities | Date | Requirements/Indicators |
|---|---|---|
| Marking-up Content | Week 2 | Is the markup valid and semantically correct HTML5? Are images the correct format and size? |
| Design Process | Week 3 | Utilized all 7 steps articulated in the design process for portfolio and final? |
| User Experience | Week 4 | Are UX concerns driving the design process? |
| Styling the Content | Week 5 | Is the CSS valid, clean, external, and using structural selectors when possible? Are various layout strategies used to construct the pages? |
| Constructing the Portfolio Site | Week 6 | Information Architecture Is the site logically laid out? Is it SEO friendly? Is it tracked using Google Analytics? |
| Is the web site Future Proof? | Week 8 | Is the website responsive to a change in viewport size, from an iPhone to the standard web browser? |
| Explore CSS3 and HTML5 | Week 9-11 | Are CSS3 & HTML5 being used to create the final website? |
| Modularity and Interactivity | Week 12-14 | Are PHP and Javascript being used in the final website? |
| Forms | Week 12-14 | Are forms being used in the final website? |
Final Grade Determination
The Final Grade is cumulatively determined by the grades received for the individual assignments and by the student’s participation in class.
Assignments will be assessed if they exceed, meet or fail to meet expectations, and whether or not they were handed in on time.
I will be answering any and all of your questions throughout the semester, but I will assess your Work and let you know where you stand four times during the semester, as indicated. Completed assignments can be improved by updating them for the final assessment at the end of the course.
The workload gets easier as the second half of the course builds on everything learned in the first half. There is a lot of information to cover, but know that once you understand, which should happen by the midterm, the work is not nearly as hard as it first appears. Avoid procrastinating, as cramming everything in at the last moment is not how you learn to code. You have to do a little at a time and learn from your mistakes.
Missing a class does not alter the due date of the assignments, and is to be avoided, particularly in the first five sessions, as each class builds on the information and skills covered in the previous class. Students are responsible for making up the information missed when unable to attend class.
You can track your own progress and more or less know where you stand. Adjustments will, of course, be made to accommodate everyone, and class participation and attendance will be considered in addition to the graded assignment.
The two main projects are a portfolio site and a final site. These projects are broken into individual assignments, of which two can be dropped making for a total of 100%.
Final Grade Calculation
The final grade adds up to a possible 110%, allowing some leeway in the satisfactory completion of all assignments, as long as the student attends and participates in class. 3 Absences are sufficient grounds for Failure.
Send me a zipped version of your final project before the due day, 5 days after the last class.
Grade calculation, Date given is week that assignment is due:
| Date Due | Percent | |
|---|---|---|
| Week 2 | Website Analysis* | 5% |
| Week 3 | Landing Page | 5% |
| Week 3 | HTML markup of Analysis | 5% |
| Week 4 | 7 Steps — Midterm Worksheet* | 5% |
| Week 5 | CSS selections | 5% |
| Week 5 | Photoshop comp/ HTML Wire Frame | 5% |
| Week 5 | incorporate CSS Layout Strategies in web site | 5% |
| First Quarter Assessment | ||
| Week 6 | Quiz: | |
| Week 6 | Peer Review | 5% |
| Official Midterm Review | ||
| Week 7 | Typography Poster | 5% |
| Week 7 | Portfolio: Midterm | 10% |
| Week 7 | class Presentation | 5% |
| Second Quarter Assessment | ||
| Week 8 | Final: Worksheet* | 5% |
| Week 9 | Responsive Redesign of Portfolio | 5% |
| Week 10 | CSS3 Collateral | 5% |
| Week 11 | CSS3 Animatic | 5% |
| Week 12 | Final: Modular Navigation | 5% |
| Third Quarter Assessment | ||
| Week 13 | HTML5 Multimedia | 5% |
| Week 13 | Final: Peer Review | 5% |
| Week 14 | Forms | 5% |
| Week 15 | WordPress CMS | 5% |
| Week 15 | Final: Presentation | 5% |
| Final Quarter Assessment | ||
| Two assignments dropped: | -10% | |
| Total: | 100% |
Required Reading
Class portal, lecture notes and any links and videos in the homework pages.
Recomended Reading
Links covered in the lectures and class notes.
Lynda.com videos.
Reading assignments are from:
HTML5 & CSS3 Visual QuickStart Guide (8th Edition) ($24.29 at Amazon) by Elizabeth Castro and Bruce Hyslop. I will follow the previous edition for the talking points. For a digital preview or to purchase a digital copy visit Pearson’s eTextbook Division Course Smart, but at $19, it is cheaper to buy the kindle version at Amazon. Here are the links to the website, code for the exercises and the HTML and CSS quick reference pages.
The book covers how to code HTML and CSS. That is all. The lecture and class notes cover a lot more.
You are expected to understand how to write HTML and CSS, and if you need help, the book is there.
Not all students are designers with skills in all of the disciplines that make web design what it is. If you feel unsure about your graphic and design exposure, there are links in the News and External Resources section of the First Class that provide an overview of the language of vision. In the Second Class there are seven steps explaining how to approach a design problem and solve it. The Second Class also explains User Experience . The Fifth Class explains Information Architecture. In the Sixth Class is a comprehensive explanation of typographic resources that will help you use type effectively. You will need to read up on all sections that you are not already familiar with, and reflect this knowledge in the creation of your final project.
Resources
The web. Links to additional resources are supplied for each lecture. All demonstrations will be performed in Safari or Chrome because of their continuity with the iPhone/Android ecosystem. If you are having problems rendering, please switch to Safari or Chrome.
Material and Supplies
Access to the internet.
Grading Standards
I value most when students express their strength in the creation of their assignments. This varies greatly from student to student, depending on the major and general level of expertise. I grade the work according to how well it is executed, with the expectation that the technical aspects of how it is coded for the web be transparent and not stand in the way of the communicative efficacy.
The grading policy follows the standards set by Parsons The New School of Design, New School University:
F
Failing grades are given for required work that is not submitted and for incomplete final projects. Make-up work may be permitted only with the approval of the instructor and the program director. Student does not know how to code and code does not work.
D
When the work barely adheres to the assignments, or if most of the aforementioned assessable tasks are incomplete or unsatisfactory, and the work demonstrates poor control over the use of HTML or CSS.
C/C+
This is for average work. The work will demonstrate completion in engaging the assessable tasks, but the quality is below what is expected or at the expectation level. If the quality of the work surpasses expectations, it was probably turned in late. The code may have problems, is too simple or the solutions are incomplete and do not reflect the breadth of the material covered in class. The document may or may not validate.
B/B+
Good work is when the majority of the assessable tasks are not just met, but are completed above expectations. The web site shows the student’s strengths in a professional light, clearly demonstrating mastery of the many of the tasks involved in creating a web site as covered in the course. The code validates and is mostly error free.
A
Excellent work results in websites that are professional and excel in the presentation of the content. Assignments also exceed expectations. The code is clean, well organized, documented and error free, so that it validates.
Given these criteria, the majority of grades in the class can be expected to fall in the “C” to “B+” range. Although minus grades are not included here, you may, of course, assign them at your discretion. Generally, minus grades are used in those cases where a student has fallen just short of achieving all the elements characterizing a paper in a particular grade range.
Official Policy in %:
A [4.0; 96–100%]
Work of exceptional quality, which often goes beyond the stated goals of the course
A- [3.7; 91 –95%]
Work of very high quality
B+ [3.3; 86–90%]
Work of high quality that indicates substantially higher than average abilities
B [3.0; 81–85%]
Very good work that satisfies the goals of the course
B- [2.7; 76–80%]
Good work
C+ [2.3; 71–75%]
Above-average work
C [2.0; 66–70%]
Average work that indicates an understanding of the course material; passable
Satisfactory completion of a course is considered to be a grade of C or higher.
C- [1.7; 61–65%]
Passing work but below good academic standing
D [1.0; 46–60%]
Below-average work that indicates a student does not fully understand the assignments;
Probation level though passing for credit
F [0.0; 0–45%]
Failure, no credit
Grade of W
The grade of W may be issued by the Office of the Registrar to a student who officially withdraws from a course within the applicable deadline. There is no academic penalty, but the grade will appear on the student transcript. A grade of W may also be issued by an instructor to a graduate student (except at Parsons and Mannes) who has not completed course requirements nor arranged for an Incomplete.
Grade of Z
The grade of Z is issued by an instructor to a student who has not attended or not completed all required work in a course but did not officially withdraw before the withdrawal deadline. It differs from an “F,” which would indicate that the student technically completed requirements but that the level of work did not qualify for a passing grade.
Grades of Incomplete
The grade of I, or temporary incomplete, may be granted to a student under unusual and extenuating circumstances, such as when the student’s academic life is interrupted by a medical or personal emergency. This mark is not given automatically but only upon the student’s request and at the discretion of the instructor. A Request for Incomplete form must be completed and signed by student and instructor. The time allowed for completion of the work and removal of the “I” mark will be set by the instructor with the following limitations:
Undergraduate students: Work must be completed no later than the seventh week of the following fall semester for spring or summer term incomplete and no later than the seventh week of the following spring semester for fall term incomplete. Grades of “I” not revised in the prescribed time will be recorded as a final grade of “F” by the Registrar’s Office.
Divisional, Program and Class Policies
Responsibility
Students are responsible for all assignments, even if they are absent. Late papers, failure to complete the readings assigned for class discussion, and lack of preparedness for in-class discussions and presentations will jeopardize your successful completion of this course.
Participation
Class participation is an essential part of class and includes: keeping up with reading, contributing meaningfully to class discussions, active participation in group work, and coming to class regularly and on time.
Attendance
Parsons’ attendance guidelines were developed to encourage students’ success in all aspects of their academic programs. Full participation is essential to the successful completion of coursework and enhances the quality of the educational experience for all, particularly in courses where group work is integral; thus, Parsons promotes high levels of attendance. Students are expected to attend classes regularly and promptly and in compliance with the standards stated in the course syllabus.
While attendance is just one aspect of active participation, absence from a significant portion of class time may prevent the successful attainment of course objectives. A significant portion of class time is generally defined as the equivalent of three weeks, or 20%, of class time. Lateness or early departure from class may be recorded by the instructor as one full absence. Students may be asked to withdraw from a course if habitual absenteeism or tardiness has a negative impact on the class environment.
Members of the faculty are expected to provide syllabi in which course objectives and assessment criteria are described, in writing, at the beginning of the term. The syllabus should also articulate how attendance is assessed with respect to active participation.
At Parsons, attendance and lateness are assessed as of the first day of classes. Students who register after a class has begun are responsible for any missed assignments and coursework. Students who must miss a class session should notify the instructor and arrange to make up any missed work as soon as possible. A student who anticipates an extended absence should immediately inform the faculty and his or her program advisor. Advance approval for an extended absence is required to ensure successful completion of the course. Withdrawal from the course may be recommended if the proposed absence would compromise a student’s ability to meet course objectives.
Finally, faculty are asked to notify the student’s advisor for any student who misses two consecutive class sessions without explanation or who otherwise miss a significant portion of class time. Following two absences, students may be asked to speak with their advisor to review any impediments to their successful performance in class and, if so, to provide confirmation to the faculty member that such a conversation took place.
Religious Absences and Equivalent Opportunity
Pursuant to Section 224-a of the New York State Education Laws, any student who is absent from school because of his or her religious beliefs will be given an equivalent opportunity to register for classes or make up any examination, study, or work requirements which he or she may have missed because of such absence on any particular day or days. The student must inform the instructor at the beginning of the course of any anticipated absences due to religious observance.
Canvas
Use of Canvas is not an important resource for this class. Students should check the class portal for announcements before coming to class each week.
Delays
In rare instances, I may be delayed arriving to class. If I have not arrived by the time class is scheduled to start, you must wait a minimum of thirty minutes for my arrival. In the event that I will miss class entirely, a sign will be posted at the classroom indicating your assignment for the next class meeting.
Electronic Devices
The use of electronic devices (phones, tablets, laptops, cameras, etc.) is permitted when the device is being used in relation to the course’s work. All other uses are prohibited in the classroom and devices should be turned off before class starts.
Academic Integrity
The New School views “academic honesty and integrity” as the duty of every member of an academic community to claim authorship for his or her own work and only for that work, and to recognize the contributions of others accurately and completely. This obligation is fundamental to the integrity of intellectual debate, and creative and academic pursuits. Academic honesty and integrity includes accurate use of quotations, as well as appropriate and explicit citation of sources in instances of paraphrasing and describing ideas, or reporting on research findings or any aspect of the work of others (including that of faculty members and other students). Academic dishonesty results from infractions of this “accurate use”. The standards of academic honesty and integrity, and citation of sources, apply to all forms of academic work, including submissions of drafts of final papers or projects. All members of the University community are expected to conduct themselves in accord with the standards of academic honesty and integrity. Please see the complete policy in the Parsons Catalog.
It is the responsibility of students to learn the procedures specific to their discipline for correctly and appropriately differentiating their own work from that of others. Compromising your academic integrity may lead to serious consequences, including (but not limited to) one or more of the following: failure of the assignment, failure of the course, academic warning, disciplinary probation, suspension from the university, or dismissal from the university.
Every student at Parsons signs an Academic Integrity Statement as a part of the registration process. Thus, you are held responsible for being familiar with, understanding, adhering to and upholding the spirit and standards of academic integrity as set forth by the Parsons Student Handbook.
Guidelines for Studio Assignments
Work from other visual sources may be imitated or incorporated into studio work if the fact of imitation or incorporation and the identity of the original source are properly acknowledged. There must be no intent to deceive; the work must make clear that it emulates or comments on the source as a source. Referencing a style or concept in otherwise original work does not constitute plagiarism. The originality of studio work that presents itself as “in the manner of” or as playing with “variations on” a particular source should be evaluated by the individual faculty member in the context of a critique.
Incorporating ready-made materials into studio work as in a collage, synthesized photograph or paste-up is not plagiarism in the educational context. In the commercial world, however, such appropriation is prohibited by copyright laws and may result in legal consequences.
Student Disability Services
In keeping with the University’s policy of providing equal access for students with disabilities, any student with a disability who needs academic accommodations is welcome to meet with me privately. All conversations will be kept confidential. Students requesting any accommodations will also need to meet with Jason Luchs in the office of Student Disability Services, who will conduct an intake, and if appropriate, provide an academic accommodation notification letter to you to bring to me. At that point I will review the letter with you and discuss these accommodations in relation to this course. Mr. Luchs’ office is located in 79 Fifth Avenue, 5th floor. His direct line is (212) For the final: 229-5626 x3135. You may also access more information through the University’s web site .