Experience of a traditional developer working with Webflow, exploring its UI, advanced elements, and quick features. Insights on utilizing Webflow's tools.
We chose Webflow for this project because the owner requested it, and it's our first time using it. It's user-friendly, packed with features, making it the perfect choice to bring the owner's vision to life. Given the fact that any designer can easily improve and add other sections and pages. To help other parties getting more into the use of Webflow we documented the pros and cons we experienced while using it.
The content source
Webflow has its own flexible content management system ( CMS ), initially you can choose a pre-made collection based on real life scenarios or build your own collection. Adding fields like a traditional CMS.
The UI
Building the UI was very simple , by dragging and dropping your elements block by block you can achieve some incredible results. Plus, Webflow has a fantastic community that creates lots of helpful UI libraries and tools, making development even easier.
Alongside the traditional elements ( Text, Images, Buttons ), Webflow provides more advanced elements like; Modals, CMS collections, Sliders, Carousels, Tabs, Dropdowns, … , These are elements that would take more time if you were to develop it yourself. Webflow requires you a good working mousepad and the rest follows.
I made a grid using the grid builder. I absolutely loved the simplicity of the builder and the results speak for themselves.
Webflow Tools & Libraries
If you are familiar with Wordpress or any other low code platform, you will find a similar approach with Webflow. It’s all about using plugins, tools and libraries to customize your site without needing to dive into complex code.
Reusability
With Webflow, you can create components that you can use over and over again. By adding properties to these components, you can customize them to fit different parts of your website. This means you don't have to keep rebuilding the same elements for different sections, saving you time and effort.
Logic
In situations where you require functionality beyond the capabilities of standard tools or Webflow libraries, there is a solution. Utilizing resources like YouTube alongside the custom code tool in Webflow’s page settings. For instance I found myself needing to dynamically adjust the content of a sticky navigation bar based on the section title. Using my basic Javascript skills, I implemented this feature in just half an hour. For those who don’t have enough coding experience, ChatGPT can provide assistance in tackling similar challenges.
Conclusion
| Pros | Cons |
| Usability: Anyone can make a website without any developing skills | Technical Knowledge Required: Some technical knowledge is necessary when approaching more complex ideas or features |
| User-Friendly Design Interface: Intuitive, similar to Figma | Limited Error Logging: Inadequate error logging complicates debugging |
| Predefined Templates: Variety of easy-to-adapt templates | Complex Data Handling: Challenging without proper tools |
| Low-Code Efficiency: Reduces coding amount, speeds development | UI Design Limitations: May struggle with complex design needs |
In my experience, being a traditional Javascript developer myself, I actually enjoyed working with Webflow. Given the beautiful UI, advanced elements, large community, built-in CMS and all of the other above mentioned tools and libraries. Saving me a lot of time compared to developing more advanced components and UI’s myself.
For more simpler websites without any advanced functionality I can see myself building more websites like this taking less time than traditional developing methods.
A videographer can easily use Webflow to make their own beautiful portfolio website given the tools and libraries that are offered.
