Course information
This is an old version of the class. For the latest version, go to https://designftw.mit.edu.
General information
-
Lectures are Monday and Wednesday, at 2:30 - 4pm (66-168). Mandatory studio on Fridays, at 1:30 - 3pm or 3:30 - 5pm (TBD).
- Live Monday lecture
- Wednesday “lecture” is essentially pre-reading material. It will often be pre-recorded, and the link distributed in advance. It will also be played in-class, with a member of staff to answer questions. You can watch it asynchronously, or come to lecture, so you can ask questions. Some of these may be live lectures (announced in advance), but attendance will never be mandatory.
- Live lectures will be recorded, but a part of your grade is participation (see below)
-
Office Hours
- TBD
-
12 units (3-0-9)
-
6.1010 (ex 6.009) or equivalent experience programming is a co-requisite
-
Enrollment may be limited
-
Fill in the signup form, otherwise you are not properly registered for the course!!
Course description
This course will teach the principles and technologies for designing usable user interfaces for the Web.
You will learn the key principles and methods of user interface design, including learnability, efficiency, safety, prototyping, and user testing. You will learn the core web languages of HTML, CSS, and Javascript, their different roles, and the rationales for the widely varying designs. You will also learn about reactivity through the frontend web framework Vue.js. 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.
Here be dragons: Spring 2025 is the fourth time this course has been offered. While a lot of the kinks have been worked out, some areas are still under development and will always be as we keep the course up to date with the latest web technologies. Thus, things may not always go perfectly, 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 logistics
Grading
- Weekly assignments will account for 75% of your grade.
- There is no exam, midterm, or longer project (though there are smaller projects that are built over several homework assignments).
- 25% of your grade comes from participation, broken down as follows:
- 15% for studio attendance and participation.
- 5% for submitting homework feedback
- 5% for general participation. Some live lectures will include in-class activities that will count towards your participation grade, but you can also boost your participation through other means, such as asking & answering questions, or helping other students on Piazza.
- Getting a perfect participation grade does not require perfect attendance/participation.
- We will put participation requirements in abeyance during COVID spikes, and will make accommodations for student(s) isolating.
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. Individual assignments or exercises may have different terms about how many slack hours (if any) are allowed. 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
- CSS specifications
- HTML specification
- Javascript (ECMAScript) specification
Collaboration policy
- Covered in detail here.