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

Submitting your homework

We are going to use Github Classroom for this assignment. You need to have an account on GitHub and be logged in. Authorize Github Classroom here and accept the assignment, then follow the instructions there. Please follow the structure and naming of the starter repo, though you can add any additional files if you need them.

To submit the assignment, please visit Canvas and submit the URL to your final commit that you want us to grade. A commit URL looks like https://github.com/designftw/hw2-username/commit/b59f14ba05869b3067724aa6d2006667a54c8e7d. You can submit as many times as you want. This is important. Your homework is not submitted and is accruing slack hours until you do this!

To make sure your homework is graded correctly, please follow the following:

• Please make sure each of your exercise directories are self contained, i.e. that you don't reference any files outside of the directory (e.g. from your repo root or other exercises). While having a common assets directory for all your exercises might be a good idea in general, we extract each exercise directory separately (as it may be graded by different people), and that will result in your pages not working correctly.
• Do not use root-relative URLs (URLs that start with /) or absolute localhost URLs, as these require the grader to run a local server at a specific directory within your repo. If for some reason you cannot avoid it, please document it in a README otherwise links may be broken for whomever is grading your homework.

If you submit after the deadline, it will count towards your slack hours.

Exercise 1: Evaluating Graphic Design (15%)

Pick two of the graphic design principles we focused on in class, one from group A (Contrast, Alignment, Simplicity) and one from group B (Repetition, Proximity).

For each, find an example around you that violates it and an example that follows it. The examples could be either printed materials (stationary, flyers, posters, magazines, books etc) or websites. These do not have to be different, you can use the same example for multiple principles.

For each principle, explain (in a sentence) how the example you picked follows or violates it. If it violates it, how would you improve it? (1-2 sentences)

Make sure to include photos, videos, or screenshots for the examples you pick.

Exercise 2: Evaluating Learnability of a vector graphics editor (25%)

If you have never used Figma before, start exercise 3 below in Figma (free education plan). If you have used Figma, start exercise 2 below in Adobe Illustrator (free through MIT IST). If you have used both, find another vector graphics editor you have never used before and start exercise 2 in it. Some other vector graphics editors are: Sketch, Inkscape.

It is important that you pick an application you have no experience in, since you cannot unlearn what you know.

Keep notes and screenshots (or screencasts) about every aspect of the interface you struggled with, every thing you had to google for, and anything else that was non-obvious to you. How long did the task take you? Do you think the app could have been more learnable?

You do not need to use that editor for the entirety of exercise 3 (but you're welcome to), only until you finish the business card design. If you use it for more than that, please keep track of the pain points throughout your experience.

In your writeup, make sure to mention which other vector graphics editors you have used before (if any). If you have used other vector graphics editors, how does the new tool compare to them? What was easier and what was harder?

Exercise 3: Practicing graphic design principles (35%)

wify.me is a fictional startup around a website for crowdsourcing public wifi passwords. They already have a logo (Figure 1) and they need a corporate identity that is based on that logo (business cards, letterheads, envelopes).

Their brand colors are #B3CC1F, #553F2E and #f7ecdf (all in sRGB) and the typeface used is Museo.

You may know that print design should use CMYK colors instead of RGB colors, but for the purposes of this exercise, don't worry about that!

Design a corporate identity for this company, putting the graphic design principles we discussed in class into practice. The corporate identity needs to consist of at least:

• A 3.5 × 2 in business card with the following info:
  • Name: John Doe
  • Job title: Manager
  • Phone: 555-123-4567 (this is the direct line; not the company switchboard)
  • Email: johnd@wify.me
  • Company website: wify.me
  • Address: 32 Vassar St, Cambridge, MA 02114
  • The information above is for a sample employee. Do keep in mind that what you design needs to work for a variety of names, job titles etc.
  • The business card needs to be double sided, but it's up to you whether both sides will contain information, or whether one side will merely consist of unifying visuals.
• A letterhead for the same person, which can be single or double sided
• An envelope, which can be single or double sided. The envelope only needs to contain the company logo, address, and URL, no employee information.

Use the design principle of Repetition to visually unify the three designs. Pick at least four of the other design principles that we discussed in class and apply them to your design.

You may use any vector graphics editing application you prefer. See exercise 2 above for some suggestions. Beginners may prefer Figma over Illustrator.

Exercise 4: Couple Expenses App Basic Implementation (25%)

To get you to practice a little more with Vue, in this homework you will be implementing an app that works in exactly the same way as the spreadsheet (and thus, has similarly poor usability). In the next homework, you will be implementing a better interface to improve usability, but in this one you will only be implementing a specific app that works as similarly to the spreadsheet as possible, and even saves back to a spreadsheet.

The app needs to:

1. Use a table with the same structure as the spreadsheet for expenses. You don’t need to also display the result in the table (who owes whom and how much); you can display that in a more convenient place.
2. Offer an "Add expense" button that adds a new row.
3. Just like the spreadsheet, reactively calculate who owes whom and how much and display it to the user. You do not need to display the intermediate sums the spreadsheet includes. These are just helper variables, and the spreadsheet displays them because it's easier than hiding them.
4. Provide a way to delete any chosen row.
5. Offer a Save button that saves data back to the spreadsheet.

The HW2 skeleton already contains an index.js that you likely won't have to modify, a style.css with some basic styling for your table and inputs, and a skeleton index.html that uses <ma-data> to connect to the HW1 spreadsheet. You will need to copy that spreadsheet and replace the URL with your own spreadsheet, so you can save data.

The skeleton includes basic authentication UI, as logging in is required for writing data back to the spreadsheet (even if it's publicly writable).

Despite trying to implement something that works similarly to the spreadsheet, a web app and a spreadsheet cannot have exactly the same user experience. Use your app a bit to add a few entries. Describe differences you notice in terms of usability between the two.

Exercise N: HW2 feedback

Since this is a new class, we need your constructive feedback about every aspect of it: lectures, homeworks, labs etc.

Please fill in your feedback about HW2 in this form. You can edit it as many times as you like until the survey closes (48 hours after the homework deadline). Since this is part of your participation grade, it does not affect your slack hours, but failing to submit the form on time, could result in a lower participation grade.