Session Recording #
Project 4 Recap #
Before we move on, we’ll briefly discuss some overall notes from your projects last week:
-
Attributions!
“ChatGPT” (or “LLM”, “Claude”, etc.) is not an attribution without the why and the how. There was not nearly enough of this.
There was also a lot of LLM use for things covered, more simply, in course materials. So that doesn’t show us your understanding! Remember: don’t do it in JS if you can do it in HTML or CSS.
-
Mobile First!
We need to see much 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!
So from now on, we will be looking at your work on your actual phones! So you should be developing there.
-
QA!
People need to check their work, broadly (not just on mobile)—for both functionality and aesthetics. We had some broken live URLs, many things that only worked with the exact viewport/browser they were created in, numerous console errors, etc.
Budget time for this! In any project—school or IRL—it is an overhead you must leave time for and “pay” for successful work.
-
Systems Thinking!
There were still a lot of magic numbers (“this just works”) in your styles and JS. We’d like to reemphasize more systematic thinking—using variables, functions, setting up relationships, and so on. Magic numbers are a pain for iteration and flexibility—and they also don’t convey your understanding to us.
-
Trees vs. Forest!
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 their time on little things (or… in Figma), and lost sight of the overall concept and goals of the project.
This is easy to do—when you are down in the technical weeds—but we want to see more “big picture,” conceptual thinking. Keep this in mind as we go into Project 5, which is much more self-led!
-
Evaluations!
We’ll be sharing our evaluations/feedback with you on Slack, probably later this week! This will also function as a proxy for your mid-term standing in the class.
A reminder that your final project is worth twice as much towards your overall course grade, so take that into account moving forward! We’re not quite halfway through, yet.
-
Overall!
These were really great! We enjoyed the variety and creative problem-solving we saw in many of your projects. We’ve come a long way.
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:
-
What Is Code?
Paul Ford, 2015
Further Reading #
We will look at several additional readings over the unit, to understand and situate ourselves in the current zeitgeist:
-
TikTok’s Enshittification
Cory Doctorow, 2023 -
Chat GPT Is a Blurry JPEG of the Web
Ted Chiang, 2023 -
The Age of Average
Alex Murrell, 2023 -
Why A.I. Isn’t Going to Make Art
Ted Chiang, 2024
HIG s #
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. These are the original digital design systems.
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,
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:
Historical
-
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 -
i OS Human Interface Guidelines
Apple, 2014
Current
-
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 introduce you to our final project:
It’s All in Your <head> #
Finally, let’s look at some odds and ends around sharing:
For Next Week Class #
-
You’ll complete the first brainstorming phase for your final project:
Project 5: Define Your Problem
Consider the project introduction thoroughly, identify three (3, 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:
-
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: