This project marked my debut into client work within the Webflow platform. I was tasked with creating a functional mock-up for Steel Perlot's home page, closely following a specified Figma design. The live site button above will take you to the mock up I created as part of my Webflow learning process.
The goal was to translate the design into a live, operational Webflow site, demonstrating both design fidelity and functionality (and to gauge my own ability to navigate and utilize the Webflow platform). The completed site, along with its accompanying pages, can be viewed here. Please note that there have been some modifications to my original mock-up since completion.
Learning Micro-Interactions
As my first foray into client work using Webflow, I faced a steep learning curve, particularly with micro-interactions, despite having a grasp on fundamental web design principles like page layouts and feature implementation.
The specific challenge here involved translating intricate hover states for logos, navigation menus, item cards, and buttons from the Figma design into actionable Webflow interactions. These were not straightforward tasks that could be executed with simple clicks in the Webflow designer, they required careful planning and creative problem-solving to bring these subtle yet impactful animations to life.
Webflow's Interaction Tools
For the logo hover effect, I used a simple, yet effective technique: I overlaid a duplicate of the logo on the original, setting one to appear on hover with a gradual opacity fade. This created a smooth transition effect without altering the logo's core design.
For the navigation menu, I crafted a dynamic hover state by designing divs with a gradient and manipulating their sizes within the Webflow editor. An embedded script let these divs shift position on hover, simulating a moving bar effect.
The buttons required a more creative approach. I constructed an additional layer for each button—slightly larger and initially invisible. On hover, this layer’s opacity transitioned from 0 to 100%, revealing a rainbow gradient outline that added vibrancy based on my client's vision.
Lack of Responsiveness
Another significant hurdle in this project was ensuring the design’s responsiveness across various devices—an aspect that became one of my most pivotal learning experiences.
As a newcomer to web design, my focus was intensely drawn to implementing the Figma designs and achieving the desired micro-interactions.
This concentration led to an oversight: I had developed the entire desktop front end from scratch without considering how difficult it could be to scale to multiple devices. The result was a design that looked great on desktop but fell short in adaptability when accessed via mobile devices , highlighting a crucial gap in my initial development process.
Opportunities to Learn
This was such an oversight on my part.
When I first started learning web development, my primary focus was on ensuring functional code. This focus, however, led me to underestimate the design aspects of web development, namely scalability and responsiveness. I initially thought scaling down designs to fit smaller viewports would be a quick post-production endeavor, but this project taught me just how complex that process can be, especially with a lack of foresight.
This experience greatly shaped my approach to web development, ingraining a mindset that prioritizes the user experience from the start. I’m grateful that this lesson came early in my career during a low-risk project, allowing me to learn and grow as a Web designer and developer.
It might sound odd, but the biggest takeaway from this project was actually my mistake with the responsivity.
That blunder turned into a major learning opportunity, teaching me to prioritize the adaptability of each component across all devices right from the start.
It forced me to reevaluate my workflow and approach to tasks, making sure that every design element was not just functional but also fully responsive. This lesson has become a cornerstone of my work with Webflow, shaping how I tackle every project since.