Make a clock | Notion

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAA1ElEQVR4Ae3bMQ4BURSFYY2xBuwQ7BIkTGxFRj9Oo9RdkXn5TvL3L19u+2ZmZmZmZhVbpH26pFcaJ9IrndMudb/CWadHGiden1bll9MIzqd79SUd0thY20qga4NA50qgoUGgoRJo/NL/V/N+QIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEyFeEZyXQpUGgUyXQrkGgTSVQl/qGcG5pnkq3Sn0jOMv0k3Vpm05pmNjfsGPalFyOmZmZmdkbSS9cKbtzhxMAAAAASUVORK5CYII=

Background

In Technics and Civilization (1934), technology historian Lewis Mumford argues that the clock, rather than the steam engine, is the piece of technology that enabled the industrial age. The steam engine was merely the latest new power tool in a long lineage of power tools; the clock, on the other hand, created a new mental model for time that allowed for wider synchronization of human behavior. The clock started to center daily human life around the rules of strict machines, rather than the flexibility and variation of the natural world.

For your first assignment, make a clock. “Clock” is broadly defined — anything that measures time. Use coding assistants to build it and deploy it as a live website. Document your process and include it on the website.

This assignment also serves as a baseline assessment of your starting point with software design.

Learning goals

Learn to take advantage of one of the unique material properties of software: it can change over time.
Learn to adapt your ideal designs to the constraints of your implementation abilities and tools.
Get exposure to coding with LLMs and deploying a website.

Requirements

[~1-2 days] Sketch 100 ideas for clocks on paper. Thumbnail size is fine. Brainstorming with other people or AI is fine. Label each idea for clarity.
[~1-2 days] In Figma, mock up at least one idea that you want to build. This should reflect how you want the clock to look and behave. Your chosen idea has to be interesting to you, but it does not need to be complicated — the best designs are usually simple. Simple is hard.
- Use the template in the class project
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAA1ElEQVR4Ae3bMQ4BURSFYY2xBuwQ7BIkTGxFRj9Oo9RdkXn5TvL3L19u+2ZmZmZmZhVbpH26pFcaJ9IrndMudb/CWadHGiden1bll9MIzqd79SUd0thY20qga4NA50qgoUGgoRJo/NL/V/N+QIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEyFeEZyXQpUGgUyXQrkGgTSVQl/qGcG5pnkq3Sn0jOMv0k3Vpm05pmNjfsGPalFyOmZmZmdkbSS9cKbtzhxMAAAAASUVORK5CYII=
[~1-2 days] Build your design using HTML/CSS/Javascript, aided by Claude.
- When you’re ready to edit the code directly, copy the HTML/CSS/JS from Claude over to a new Replit project.
- You will likely not be able to build everything exactly how you had planned it in Figma. Continue iterating on your designs in code to produce a final product that you are proud of.
- The website should be responsive, i.e. the layout should not look broken at desktop or mobile size.