ARTICLE
Today was fantastic. I’ve been working hard on my studio website and experimenting with Webflow - a platform I’ve never used before. The reason? Its endless customization options. This is going to be a slightly technical post that revolves around web development, AI, and my journey with Webflow.
Web development?? Aren't you a designer?
You might wonder, 'Why get into web development? You're a designer.'
It started with the simple need to have a portfolio that truly represented my work. I didn’t have one, so I decided to build one myself. I had literally zero knowledge on building a website and especially with no coding knowledge, I thought it'd be tough. It felt intimidating at first that's for sure. I began exploring some no-code web builders and after lots of trial and errors, found Wix Studio (Wix or Editor X at that time) which looked like the best choice for me to start. I learned a lot from Wix Studio. Not just building a site, but also managing it, the SEO and accessibility. It honestly was the best foundation.
Coming from project management background and being part of multiple teams, I’d already learned how valuable it is to understand how different teams work. It makes collaborating easier by actually understanding their pain points. This has helped me and my team a lot. During team meetings, I'm able to understand the development team even with their technical jargons, I'm able to understand the design team and help them in case of any layout problems, I'm able to understand the research team and the most important part- I'm able to take all of that in and simplify it for the founders and people with no technical background to understand and get a grasp of what's going on in the project.
Heading back to Webflow
I feel like I'm going on a tangent, let's go back to working on the visualizer. Initially, I was making good progress. I learned how to add custom code, understand the structure, and I was genuinely amazed by its capabilities. The class-based styling reminded me of Wix Studio but with more flexibility. It took a little time to understand, but once I did, it felt like everything clicked.
For my studio site, I wanted an ambient music experience - a subtle background track that visitors could toggle on or off using an animated element I’d already designed. As a designer with limited coding knowledge, I turned to ChatGPT for help and it provided me with some incredible ideas that I could implement while ensuring that they aligned with my design. GPT-5 had just launched and I was eager to test its new capabilities. I use the ChatGPT app instead of browser because I find the app to be smoother and lag free. Notably, the Mac app of ChatGPT offers a ‘Work with’ option that I never used and is not available on the browser version. Apparently, it is able to read and modify contents of one of the supported apps without directly working on it. Since I was using VS Code, I eagerly anticipated trying this feature.
Previously, I would copy the entire code: ask ChatGPT to generate it, edit it, and then provide me with the complete code that I could simply paste. Honestly, this ‘Work with’ option saved me a significant amount of time and the best part - it'd modify particular lines that gave errors and I just had to check what lines were updated and that's it!
Building the visualizer
Performance was my top concern. I didn’t want heavy animations slowing down the site. Initially, I considered using multiple div blocks for the visualizer, but ChatGPT suggested using either Canvas or WebGL instead. I’d heard of WebGL but never used Canvas. I dived deep into it and turns out Canvas gives the best performance out of the two. And since performance is my priority and I wanted to learn more about it, I decided to give Canvas a try.
I had already set up the visualizer in the designer: it's position and size on multiple breakpoints. ChatGPT provided the code however here came the most challenging part - determining its position through code. Since I went forward with Canvas, it was having trouble using the CSS provided by the designer. After several attempts, which took a long time, I finally managed to get it working. It was quite straightforward to synchronize the visualizer with the background music, making it appear as a functional element. My initial plan was to create an animated looping visualizer, but this was an excellent idea suggested by ChatGPT.
Getting it just right
Well, after a few modifications, the visualizer component worked perfectly across all breakpoints. Then came the second- most time consuming part and that was controlling the playback with and without a pre-loader. After few more tries again, I got it working (Thank god!) but I didn’t realize that there had to be a different logic, especially for iOS devices. Fortunately, this was an easy one and the provided code ensured that this logic was also implemented.
Perfecting the component took a while, but the moment I saw it run smoothly across every device, it felt incredible. Watching the visualizer pulse in sync with the ambient track - knowing I’d built it with a mix of design instinct, persistence and AI help was deeply satisfying.
It’s moments like this that remind me just how much AI is reshaping creativity and helping people learn new things every day. With the right mindset, even a designer with little coding background can build something that feels alive.