Most of you don’t know what webflow is or what it does so I will do my best to explain it to you and after that tell you why I believe it changed the way of how we, designers, work in Web Design projects.
According to their website, webflow have “The power to design, build, and launch responsive websites visually, while writing clean, semantic code for you”. What this means is that Webflow is a design tool to create production-ready websites with a drag and drop interface, pretty cool right?. But it has some limitations:
1. It’s mostly for static content, meaning that you can’t do what you might be used to do with a full front-end framework like React or Vue.
2. You need to know a bit of how the elements of the web work, for example, what is a div, a container, CSS classes, and more. As a web designer, you should know this stuff but I have met people with a lot of skills in this industry with no idea of what a div is… and the developer part of me wants to die sometimes.
But it also has so many good things, like animations, hosting, webflow university so you can learn about it (and it’s free), CMS, integrations with many 3rd party apps, possibility to add custom code, export the code and many more!.
Now that you know a bit about what webflow is let me tell you why I believe it changed the way of work of Web Designers and why you should run right now and learn how to use it.
In the early days, if you didn’t know HTML, CSS, and JS you won’t even think of making a website by yourself, you will only do the mockups in illustrator or photoshop and pass it to a developer to do the work, you might say to the developer that you want this animation, this transition and many other things, but you will leave it to the developer to do it. Then, something called DreamWeaver came and we all thought it will be the tool designers screamed for, the all in one tool that can design and code at the same time, right? How did it go? Not good right?. But after some years, people started to want some more, something that really works well and let you export real code, not something weird. Then, after some other companies tried, came webflow to save the day!.
At first, people all over the internet where saying that this is another DreamWeaver, another miss of an all in one tool, and all that things all the internet trolls say when there is a new thing in our life, but other people where saying that this is a miracle, the DreamWeaver made well, the future, and many more things so I decided to give it a try. For background, I’m a front-end developer with more than 3 years of professional experience and like 5 of knowing how to code and I discovered Webflow 2 years ago… It blew my mind like you will never know, how the interface was familiar and how with a drag and drop interface (knowing how to position things with CSS) you can make real world and production ready code!
Now, for projects of just content and animations, like a promo page, a landing page or just a blog, Webflow is great and really fast to develop in, and if you need to use a framework like react, you need to export the code and work with it, for some reason I used to struggle to do that just because I’m kinda lazy for changing HTML in JSX (I use React for Development) but it really is not that hard.
With Interactions 2.0, interactions are the way of using animations and transitions in Webflow, the new Search Bar component and the integration for using the CMS for online shopping Webflow can scale big time in a couple of months, maybe not at the same level as WordPress but definitely better and easier than WordPress, so if you want to try it this is the Webflow website and the Webflow University website. Also, there is a youtuber called Ran Segall that have a channel, Flux, that speaks a lot about Webflow and have a Master Class about Webflow and I recommend you to check it out too!