MECH//KEYS

The goal was a responsive two-page microsite that could teach a casual visitor what a mechanical keyboard is, trace its history, break down its parts, and show the range of layouts and switches that define the modern enthusiast scene. The brief asked for an intro page that invites the visitor in, then a main page organized as a cohesive, navigable experience.

I took it as a chance to lean into the subject. If the product is tactile, the interface should feel tactile too. Every button is a keycap. The nav is a keyboard row. The space bar starts the site. The timeline clicks open. Every interaction is a small reference to the thing the site is about.

I was behind schedule on this project. Between health issues and overlapping deadlines from other classes, I didn't get to meet with my creative director as often as I would have wanted, and I never quite reached the point of back-and-forth polish I had imagined for the project. That was a real constraint, and I want to be honest about it.

What I did get was overwhelmingly positive. My creative director responded warmly to the ideas and the brainstorming stage, validating the concept of a tactile, keycap-forward interface and the dotted-grid, terminal-type aesthetic. That encouragement mattered. It settled a lot of the anxiety around being behind, and gave me the confidence to keep pushing the design instead of second-guessing every choice. By the time I started building, I was working from a design direction I trusted.

The design language is small on purpose. One typeface, Share Tech Mono, runs across the whole site. The canvas is pure black with a soft light-gray dotted grid, which gives every surface a subtle technical rhythm without fighting the content on top of it. All buttons are physical-feeling keycaps built with layered box-shadows to simulate depth, and they press down when clicked.

Color is restrained. A muted blue-gray reads as the quiet default, white is reserved for emphasis, and an RGB pulse animation cycles through red, yellow, green, blue, and purple on hover as a direct reference to keyboard underlighting. The switch type cards are the one place where color opens up a little, each family tagged with a hue that hints at the Cherry MX stems those switches are known for.

Larger gestures reinforce the same idea. The intro page is just the title, a real-sized space bar, and a prompt, keep it quiet, let the visitor notice the detail. A loading screen with three bouncing dots inside a tiny keycap runs for a moment before the first paint, setting the tone. A light/dark theme toggle and a home-button logo live at the top-left so the visitor always has an exit.

I drew and mocked up a lot of this project on paper first. The keycap, the keyboard-row nav, the intro with the space bar, the dotted grid, the accordion date boxes, the mobile dropdown, all of it started as rough physical sketches. That stage was important, because it let me commit to a visual direction before writing a single line of code.

Where AI came in was the translation. I used it to help me convert my mock-ups into the interactive layer, specifically the button designs, the animations, and the way the different pages flow into each other. I would describe what I had on paper and prompt for the CSS and JS that would bring that look to life, then keep iterating once I could see it on screen. The keycap depth effect, the RGB hover pulse, the accordion reveal, and the responsive breakpoints all came together in that back-and-forth.

The split was clear in my head. AI handled the how. I held the what and the why. That let me stay in the role of a designer, not a coder second-guessing every property, while still shipping real working interactions I understood well enough to tweak by hand.

A monospace face on a dark ground is technical by default, and the risk is that it becomes hard to read. Most of the work here was quiet spacing decisions. Sub-heading top margins sit around 56px so a new idea announces itself. Section kickers breathe with extra bottom space under the Layouts and Switch Types descriptions. Cards carry enough inside-padding that the text never fights the border. List items are separated by a hairline rule instead of a bullet, so the grid feels continuous with the background dots.

A lot of this was placed by eye. I would nudge a margin by four or eight pixels until the box stopped feeling cramped, or I would pull a headline closer to its kicker when the two felt orphaned. That part of the work comes from the design instincts I had coming in, not from any AI suggestion.

The most valuable part of this assignment was the synthesis. Positive feedback from my creative director, a subject I genuinely wanted to design around, my own mock-ups on paper, and AI as a translation layer all came together into something that feels intentional from the intro page down to the last card. I learned the interactive side of web design, specifically buttons, animations, and page flow, in a way that stuck, and I did it while still protecting the parts of the craft I already knew, the padding, the spacing, and the color.

If I did it again, I would start earlier and make more time with my creative director. But the site I shipped is one I stand behind, and the process, messy timeline and all, is one I can now point to as how I actually work.