6.4500 Design for the Web: Languages and User Interfaces

General information

• Lectures are Monday and Wednesday, at 2:30 - 4pm (66-168). Mandatory studio on Thursday 3:30-5pm and Friday 3-4:30 (35-308).

  • 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.

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).

AI Policy

AI writing and coding assistants like ChatGPT can be enormously helpful, and you are welcome to use them in this class provided that you submit the prompts and dialogues from your sessions, as well as a 200-word reflection on your experience (written without AI help), as an appendix to each exercise you used AI to complete. Your grade on such an exercise will be a holistic assessment of your AI transcripts, reflection, and actual submission. Your reflection must justify how the AI contributed to your learning experience. If, for example, the assignment was meant to teach you HTML syntax and you used AI to generate all of the HTML in your submission, we are unlikely to accept any justification. On the other hand, if you engaged in iterative design with an AI agent, evaluating its outputs and probing for new designs with tools you've learned from this class, justification should be fairly easy.

This appendix is only necessary when greater than 20% of the submission is generated with AI, to allow for sparse use of inline AI tools like Grammarly or Github Copilot. If we deduce that a significant portion of your assignment was AI generated and you did not submit an appendix, you will fail the assignment.

To submit a full transcript of your AI interaction, you can link to it, if available. For ChatGPT, see the ChatGPT Shared Links FAQ. For self-hosted models or other models without links, you can paste your transcript in a webpage, Google doc, etc.

Some questions you may wish to explore in your reflection:

• How did you evaluate the result?
• Did you need to correct it and why?
• Did its answer surprise you and why?
• Did the AI speed up things you could have done yourself? Which?
• Did the AI provide necessary information that you did not have? If so, what?

Inspired by the CSM.100 policy.

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.