Personal Project
2026
Eras of Graphic Design
A nostalgic tour through six eras of graphic and interface design, built with AI.
The Idea
A website that changes its design language as you travel through time
I’ve always had a soft spot for design history: the bevelled grey buttons, the glossy gel pills, the leather-stitched calendars. Each of those styles felt completely “modern” in its moment, and each one says something about what people hoped technology would be.
I wanted to make a place where you don’t just read about those eras, you use them. The concept was simple: one website that changes its whole design language as you move through time. Pick an era from the menu and everything shifts with it: the typography, the buttons, the navigation and even the little helper in the corner. The terminal glows green, Windows 95 becomes a desktop, Frutiger Aero turns glassy and aquatic, and the AI era quiets down to a single text box.
I started where I usually do, sketching rough wireframes on my iPad to work out the structure and how switching between eras should feel. Then I went looking for the right tool to build it with. I tried Claude Design and Google Stitch first. Both were quick to get something on screen, but neither felt like it could reach the level of detail and interactivity I had in mind. I wanted every era to feel truly accurate and playable, not like a themed template. I landed on Claude Code, which let me work like a designer directing a build: describing what I wanted, reacting to what I saw, and pushing until it matched the picture in my head.
Initial wireframe drawings from Procreate
Building with AI
Starting with a few eras, then filling out the timeline
The first version was intentionally modest: fewer eras, and only a hero and a couple of sections for each one. That was enough to prove the core idea. Could a single page convincingly transform between design languages, and did switching eras feel delightful rather than gimmicky?
Once that worked, the project grew one layer at a time. I filled out the timeline to six eras: Terminal, Windows 9x, Frutiger Aero, iOS skeuomorphism, Flat & Material, and AI. Each era picked up the same set of sections, so the structure stayed familiar while the style changed around it:
a hero
a signature graphic
a timeline of key moments
a bento grid of the era’s design trademarks
a pair of sections on how people used the internet for work and for play
That last pairing became my favorite part. Design history is really a history of what people were doing online: booking flights on green-screen terminals, chatting on MSN after school, binge-watching on their phones. Grounding each look in everyday life gave the nostalgia some substance.
Iterating with AI
Some of the best parts started as things that didn’t work
Most of the project lived in the back and forth. I’d look at a screen, react, and ask for a change:
“The shadow drops off too harshly.”
“The Winamp is too minimalistic - make it hyper-realistic with the gradients and bevels like the real skin.”
Working with AI made that loop fast enough that no detail felt too small to fix.
Not everything I imagined came out the way I pictured it, and some of the best parts of the site came from those misses:
The Frutiger Aero background. It started as a glossy blue plastic backdrop. It never quite read as Aero, so I turned it into a fish tank, with tropical fish swimming behind a draggable Winamp player. It captures the era’s glass-and-nature optimism far better than the original idea did.
The Flat & Material Play section. It started as a Netflix-style streaming app, but the first version looked too modern. Instead of polishing it, I swapped it for the 2014 YouTube app playing Double Rainbow and Gangnam Style, next to a flappy-bird knockoff you can actually play. It’s much closer to how the era felt.
Screen savers behind the Windows timeline. I tried playing the Display Properties screen saver behind the timeline text, but the text became hard to read. I cut it and saved the code for a better spot later.
Many refinements were about authenticity: matching each app to how it really looked at the time, swapping my placeholders for era-accurate versions, and keeping text legible over busy, glossy backgrounds.
Takeaway
AI built faster, but the design decisions were still mine
The biggest takeaway was how much the designer’s role still mattered. AI shortened the distance between an idea and a working thing. The parts that made the site good were all still design work:
Deciding what each interaction should feel like
Noticing what was off
Knowing when to change direction entirely
That last point surprised me most. Because building was fast, changing my mind was cheap. I could try an idea, live with it for a minute, and throw it out if it wasn’t right, like the blue plastic that became a fish tank. That freedom made me braver about experimenting than I would have been on a slower build.
It was also a fitting way to make this particular site. The final era is about interfaces that talk back, and I built the whole thing by talking to one.
