Week 22, March 6

Session recording

Links recap

Before we move on, we’ll briefly discuss some overall notes from your projects last week:

Overall, these were really great! We enjoyed the variety and creative problem-solving we saw in many of your projects.
There were a lot of magic numbers (“this just works”) in your styles and JS. We’d like to reemphasize more systematic thinking—using variables, setting up relationships, and so on. Magic numbers are a pain for iteration and flexibility, and don’t convey your understanding to us.
We need to see more consideration for mobile—whether or not you start there (and you know how we feel about that). It’s not just layout; think about your interactions (hovers, etc.) too. We don’t think many folks fired their projects up on their phones!
We want to remind you to “take a step back” throughout your projects, while you build. We think a some folks spent a lot of time on little things, and lost sight of the overall concept and goals of the project.
We’ll be sharing our evaluations/feedback with you on Slack, today after class! This will also function as a proxy for your mid-term standing in the class.
Your final project is worth twice as much towards your course grade, so take that into account moving forward! We’re not quite halfway through, yet.

Reading discussion

We’ll begin our fifth and final unit, If all you have is a hammer, everything looks like a nail, with a discussion of last week’s reading:

Unit 5 reading synthesis (Code)

HIGs

We also want to introduce you to human interface guidelines. These documents describe the paradigms, intent, and overall look-and-feel for a given operating system—made to encourage software developers to craft consistent, native-feeling applications for a platform.

The most famous instance (which lends the category its name) comes from Apple, written for the original Macintosh—the first popular, consumer computer with a graphical user interface. We’ve also selected influential examples through time, covering the era of modern, GUI-based software up to now.

We aren’t designing applications for Windows 95 here, but these should serve us in two ways: as a timeline of user-interface design patterns, and as examples of documentation and design systems—particularly the current, ongoing/living versions:

Human Interface Guidelines
Apple, 1987
Macintosh Human Interface Guidelines
Apple, 1992
The Windows Interface Guidelines
Microsoft, 1995
Aqua Human Interface Guidelines
Apple, 2001
iPhone Human Interface Guidelines
Apple, 2008
Windows Phone 7 UI Design and Interaction Guide
Microsoft, 2010
Material Design 1
Google, 2014
iOS Human Interface Guidelines
Apple, 2014
Material Design 3
Google, 2021 (ongoing)
Human Interface Guidelines
Apple, 2022 (ongoing)
Fluent 2 Design System
Microsoft, 2023 (ongoing)

Our final project

And we’ll go through the details of your final project:

Project 5, Functions

It’s all in your `<head>`

Finally, let’s look at some odds and ends around sharing:

Putting a (link/meta) bow on it

For next week class

You’ll complete the first brainstorming phase for your final project, Define your problem. Consider the project introduction thoroughly, identify three possible problems to look at, and outline how you might move forward with them.

Submit a link to your document when it is in a good place:

Assignment submission
We would also like everyone to pick up on their landing pages from the start of the semester! We aren’t going to be prescriptive about this, but we want to see some forward progress on these for next class—maybe adding favicons, a bio, or developing the design. It’s your playground.

These will be “due” at the end of the semester, after your final project. But we want to see commits before then! Update us with your URLs:

Assignment submission