This is my final project for Typography and Interaction Design. Built with HTML and CSS, this site responds to three readings about code, identity, and screens in digital design.
The readings are Paul Ford's What Is Code?, Federico Pérez Villoro and Christopher Hamamoto's Post-Identity Design: Brands, Politics, and Technological Instability, and Frank Chimero's What Screens Want. Together, they explore how digital interfaces shape identity and how screens reframe what we see.
The design intentionally uses browser windows, address bars, and navigation buttons as the design subject. By exaggerating these structures, the site reveals how screens frame our digital experiences.
Some tools and techniques I used:
- Color palette: off-white (#fdf9e6), charcoal (#0f1617), and pink (#d63968) for interactive elements
- Marquee animation and iframes to demonstrate flux and a screen within a screen
- Radio inputs with:checked pseudo-class for tab functionality without JavaScript
- CSS Grid with fixed columns to maintain text alignment across varying header lengths
- Flexbox for element positioning and navigation layout
- Nested CSS following the DRY principle for cleaner, more maintainable code
- Responsive breakpoints at 800px, 1000px, and 1300px (with additional breakpoints at 300px and 400px where needed)
- ::before pseudo-elements to display numbers on mobile and full text on desktop in nav bar
- Position: sticky for section headings on desktop only
- Browser window design built with semantic HTML, styled with CSS, specifically border-radius and box-shadow