6.S063 Design for the Web: Languages and User Interfaces

Course information

# General information - Lectures are Monday and Wednesday, at 2:30 - 4pm (3-370) - Mandatory labs on Fridays, at 2:30 - 4pm (room TBD) - 12 units (3-2-7) - 6.009 (or equivalent experience programming) is a co-requisite - This subject can be used to satisfy the [CS12](https://eecsis.mit.edu/degree_requirements.html#CS12) and [EECS12](https://eecsis.mit.edu/degree_requirements.html#EECS12) electives - **[*Here be dragons*](https://en.wikipedia.org/wiki/Here_be_dragons): This is the very second offering of this course. It will not go perfectly. While many issues were ironed out in the first iteration (in 2020, as 6.S082, with the same instructors), the course is still in active development and thus there may be mistakes in lecture, bugs in assignments etc. If you are not OK with this, maybe this course is not the right fit for you at this time.** # Course description This course will teach the principles and technologies for designing usable user interfaces for the Web. We will learn the key principles and methods of user interface design, including learnability, efficiency, safety, prototyping, and user testing. We will learn the core web languages of HTML, CSS, and Javascript, their different roles, and the rationales for the widely varying designs. We will use these languages to create usable web interfaces. We will also touch on the fundamentals of graphic design theory, as design and usability go hand in hand. # Grading There will be **weekly assignments** that will account for 100% of your grade. There is no exam, midterm, or longer project (though there are smaller projects that are built over several homework assignments).


Here is the tentative lecture schedule for 6.S063. **This schedule is subject to radical change.** Spring 2022 is only the second time this class is being offered, so we may need to make significant adjustments to the schedule depending on a variety of factors. This schedule will be updated throughout the semester, and generally speaking, the further from present the topic is, the more likely it is to change.
Mondays Wednesdays Fridays
Introduction & Overview HW1 released Web Page Structure: HTML Pre-doing Lab Pre-lab
Learnability HW2 released Graphic Design Pre-reading HW1 due Lab
Efficiency HW3 released Foundational Concepts of CSS Pre-doing HW2 due Lab
Tuesday More Foundational Concepts of CSS Pre-doing HW4 released Safety HW3 due Lab
Layout HW5 released Heuristic Evaluation HW4 due Lab
Prototyping and User Testing HW6 released Universal Web Design HW5 due Lab
Introduction to modern JS HW7 released TBD HW6 due Lab
No class (Spring break) No class (Spring break) No recitation (Spring break)
Design Patterns HW8 released Events HW7 due Lab
Asynchronous JS HW9 released Color HW8 due Lab
Typography HW10 released Web APIs HW9 due Lab
No class (Patriots' Day) Animation & Feedback Lab HW11 released HW10 due
Data Visualization Web Standards Lab HW11 due
Course Reflection


Name Role Email Office Office Hours
David Karger Instructor karger 32G-592 By appointment
Lea Verou Instructor leaverou 32G-598 By appointment

Course logistics

# Lateness and extensions To give you some flexibility for periods of heavy workload, minor illness, absence from campus, job interviews, and other occasional (but often predictable) circumstances, you may use limited extensions on problem set deadlines, called slack hours. Each slack hour is a 1-hour extension on the deadline. You have a budget of **5 × 24 slack hours for the entire semester**, which you may apply to any combination of individual assignments. Using any part of a slack hour consumes the entire hour. E.g. uploading an assignment 62 minutes late uses up 2 slack hours. You can use **at most 36 slack hours (1.5 days) for a given assignment**. Assignments more than 36 hours late will not be accepted. Slacks are **not** to support random procrastination. Late submissions should only occur in exceptional circumstances (conference travel, illness, etc.). Slacks just avoid the hassle of submitting a justification. If you exhaust your slacks and seek further extensions, you will first need to provide acceptable justifications for **all** the slacks you used. All special circumstances extension requests must be documented by an authoritative note (e.g. doctor's note) or photographic evidence (e.g. selfie of you holding your smashed laptop). # Textbook and resources - Recommended textbook: *The Design of Everyday Things: Revised and Expanded Edition*, Don Norman - [MDN Web Docs](https://developer.mozilla.org/en-US/) - [CSS specifications](https://www.w3.org/Style/CSS/specs.en.html) - [HTML specification](https://html.spec.whatwg.org/multipage/) - [Javascript (ECMAScript) specification](https://www.ecma-international.org/ecma-262/10.0/index.html#Title) # Collaboration policy - Covered in detail [here](collaboration.html).