Toluca.Studio

UI & Web development

In this section, I’d like to explain a bit about the process of creating my own responsive website. I proudly coded it from scratch in HTML and CSS. For the JavaScript part, I relied (for now) on ChatGPT because I wanted to deploy the site quickly. It took me around two months of asset design, UI work, and development. But since life is about learning every day, I’m planning to study JavaScript properly over the coming months.

Long story short, the idea for the UI was inspired by the iconic Sony CD Walkman. (I’m a huge music junkie, and I’ve been a sound designer and DJ for most of my life.)

I really love the futuristic aesthetic of this product: the metaball-style logo by Hiroshige Fukuhara, and the grainy silver coating of the CD player itself.

I made a few basic sketches in Figma just to capture the mood and define the colors: especially those metallic, grainy blue gradients, which were of course inspired by the original silver coating of the player.

Most of the other design choices were made during development. Since I built the project with scalable variables, it was easy to experiment and find the right balance between elements.

I really wanted to pursue Hiroshige’s metaball logo idea, but the nature of the word “Toluca” didn’t work well with that concept. So I decided to take a different approach.

Inspired by The Designers Republic’s outstanding work on Wipeout, I followed that kind of style for my “TL” logo.

After a lot of work, this project is finally finished. I put special care into accessibility, making sure to follow WCAG guidelines. In fact, the entire website is 100% navigable using only the keyboard. I also focused heavily on performance: the site scores 96 and above across all Lighthouse categories on every page.