The Drop

The Drop is a Webflow project I developed based on an award-winning design. This project showcases my skills in translating designs from Figma to Webflow, demonstrating my expertise in no-code development. The site features animations and interactions, highlighting my ability to bring creative concepts to life.
Figma to Webflow
Animation
Interaction

Client

The Drop

Date

July 2024

Role

Webflow Dev

Design Process

Project Brief

The Drop project is a Webflow development built based on the winning design from the Relume Rumble competition. This project was an opportunity to showcase my skills in translating designs from Figma to Webflow, with a focus on no-code development. The landing page features engaging animations, a strong color scheme, and interactive visuals. The entire project was completed in just two days due to its small scope.

the drop figma design
The Drop figma design
Development Process

I started the development with the Relume style guide, a popular way to begin projects in Webflow. I built the project using the client-first naming system to name classes. Starting with the Relume style guide helped me lay out the project effectively before beginning the build. I utilized many components from the Relume component library, which expedited the development process and allowed me to focus on important aspects of the project.

webflow build customers section
webflow build customers section
webflow build footer section
webflow build footer section

The development phase involved converting the Figma designs into a fully functional landing page on Webflow. I implemented sophisticated animations and interactions to make the website lively and attractive. I ensured the website was responsive for both smaller and larger screen devices, adding all the necessary details and publishing the website on Webflow's subdomain.

budling interaction
budling interaction
optimizing the website navbar for smaller screens
optimizing the website navbar for smaller screens
Learning and Conclusion

The Drop project was a valuable learning experience. It allowed me to refine my interaction skills and served as a testament to my ability to turn designs into Webflow builds. I am proud of the final product and the efficiency with which it was completed.

Mockups
mockup screen
mockup screen
mockup screen
Contact

Let's turn your vision into a stunning reality.

Get In Touch