Problem
With the rise of no/low-code builders, I thought it might be a good idea to have one under my belt. I'm usually not a fan of such platforms because I find all the clicking and dragging frustrating, especially when I can build out a layout much faster in plain HTML and CSS.
One low-code builder that's caught my eye for some time now is Webflow. They're the platform behind many stunning websites featured on Awwwards. They also recently acquired GSAP, so I knew it must be a great platform. I decided I wanted to give it a try and obviously the best way to learn Webflow is to build a website with it.
Solution
I decided to build a website for a fictional creative agency. Many of the websites built in Webflow are creative and artistic. Webflow is also known for it's easy-to-use animation implementation. I wanted to maximize my creative freedom and really have fun with this site in order to explore Webflow's capabilities.
The final product is a streamlined, four-page website with a minimalist aesthetic that leverages imagery to capture the essence of a modern creative studio. In addition to cosmetics, I wanted to simulate the needs of an actual agency website by integrating Webflow's CMS. This would allow a team member, say a marketing manager, to update content on the website without having to touch the code.
Key Features
- Animated text preloader
- Stock footage hero background video
- Webflow CMS integration, simulating the needs of a marketing team's needs of being able to update content.
- Silly copy
Outcomes
Building a website with Webflow was actually quite pleasant. It took me some time to familiarize myself with the layout, but once I got used to where everything was designing was a breeze. Most of the development process consisted of thinking about how I would build this thing with code, then finding the equivalent object in Webflow's UI. Styling was intuitive as well. Changing attributes felt like changing values on Figma.
Future Improvements
- Menu animation
- More imagery on the home page
- Micro-interactions