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.
Please make sure each of your exercise-N 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 that expect a local server to run at a specific directory within your repo, and if 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.
Note: This assignment has no implementation work; that makes it the exception. By next week we'll have covered enough technical machinery to begin making things every week.
Exercise 1: UI Hall of Fame and Shame (39%)
Help populate the UI Hall of Fame and Shame!
Find two examples of user interfaces that attempt to solve the same problem, or address the same need, one that you consider to have **good learnability** and one that you consider to have **bad learnability**.
Note that the good learnability example does not have to have uniformly good usability, since you may discover it suffers in efficiency and safety.
Likewise, the bad learnability example does not have to be uniformly bad, it may have excellent efficiency and/or safety.
Probably the most interesting examples will be mixed.
Your interfaces might be desktop software, web applications, smartphone apps, consumer devices, car dashboards, building entrances, traffic intersections, shower controls, etc.
For each interface, you should:
- describe the purpose of the interface and its intended users
- analyze its good and bad points of usability
- focus on learnability, as we have dived deeper into that topic
- make effective use the vocabulary we introduced: discoverability, affordances, signifiers, mappings, direct manipulation, feedback, etc.
- give some attention to efficiency and safety as well
- you may discuss other aspects of usability if you have space and consider them important
- illustrate your analysis with appropriate screenshots or photographs
You are limited to half a page of text (250 words) for each interface, for a total of 1 page of text (500 words) for your entire report.
You can include as many images or videos as are helpful; they don't count toward the word limit.
Write your report with the following goals in mind:
- **Completeness.** Don't omit a dimension of usability, and don't overlook an obvious usability issue that even the reader notices.
- **Thoughtful Analysis.** "Efficiency is good, because it feels fast to use" is not a thoughtful analysis. "I've never made any errors with it" is not deep analysis.
- **Clarity.** The reader should not struggle to understand what you're talking about.
- **Conciseness.** This is technical writing. Unnecessary verbosity will be judged severely.
- **Usability of presentation.** Your report is itself a user interface whose purpose is to convey ideas to a reader. If your report isn't efficient to read then it will be harder for the reader to use, and it will not demonstrate an ability to apply the ideas of this class. Make judicious use of headers, short paragraphs, topic sentences, bullets for lists, boldface (where appropriate), captions, labeled image parts (not simply a big blob of text + big unlabeled image), numbered figure captions, and other devices that make reading easier.
Deliverable: A directory with an HTML page for your writeup and any assets in folders like videos and images.
Just like every HTML page, your writeup should use semantically appropriate HTML elements and proper hierarchy.
Internal links and linked resources should use relative URLs.
Exercise 2: Evaluating Graphic Design (19%)
Pick four of the graphic design principles we discussed in class.
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.
Deliverable: A directory with an HTML page for your writeup and any assets in folders like videos and images.
Just like every HTML page, your writeup should use semantically appropriate HTML elements and proper hierarchy.
Internal links and linked resources should use relative URLs.
wify.me logo
**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](https://www.exljbris.com/museo.html).
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
- 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](https://en.wikipedia.org/wiki/Vector_graphics) editing application you prefer. Two good ones are [Figma](https://www.figma.com) (free trial) and [Adobe Illustrator](https://www.adobe.com/products/illustrator/free-trial-download.html) (free 7 day trial).
Use the `logo.svg` from the starter repo, don't just take a screenshot of the figure on the right.
It will give you more flexibility, as it's a vector graphic with no background.
Make sure not to distort it unintentionally into a different aspect ratio.
Make sure to convert text to outlines before exporting your visuals, otherwise fonts may not show up right:
- [Figma convert text to vector paths](https://help.figma.com/hc/en-us/articles/360047239073-Convert-text-to-vector-paths)
- [Illustrator convert text to outlines](https://community.adobe.com/t5/illustrator-discussions/convert-text-to-outlines-using-illustrator/m-p/11476156)
Only do this at the very end; after converting text to outlines you cannot edit it anymore!
**Deliverable:** An HTML page with the three (or more) visuals, saved in an `images` folder.
Please save/export your visuals as SVG, to preserve details.
In that page, also describe:
- the various ways you used the design principle of Repetition to visually unify the three assets.
- the principles you picked and a sentence about how you feel they have enhanced your design.
Exercise 4: HW1 feedback (3%)
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 HW1 in `exercise-4/index.html`.
