What is Webflow and why is it so awesome?
Webflow is marketed as a tool that allows designers, marketers, and other professionals to build responsive websites in a completely visual canvas without the need for code — but it's much more than that.
With Webflow, in most instances, if you can design it, you can build it. That means that generally if you want to create a website and Webflow is the right tool for the job, it likely has the power and control you need.
As a developer-designer hybrid and generalist, when I first learned about Webflow, I thought, "It's probably just another visual page builder platform like Squarespace, Wix, and countless others that generate questionable code and dumb down fundamental paradigms of the web." I was dead wrong!
Before we dig deeper and learn more about that, check out these 15 websites built in Webflow, or explore this very website that you're on — created and managed on Webflow!
That’s great, but how is Webflow different from other platforms, and why does that matter?
Before Webflow, there wasn't a production-oriented tool that provided the power of HTML and CSS visually in the way that Webflow uniquely can. Webflow embraces concepts like the box model, flexbox, selectors, and responsive design and exposes their essential functions in a visual interface. If you aren't already familiar with these concepts, you'd learn them quickly with Webflow.
But wait, a tool for non-developers that requires knowledge of frontend development concepts? It's an interesting overlap of disciplines that has some interesting implications on the future of design and development. Read on to learn more!
The interface visually presents fundamental frontend concepts in a way that might seem similar to design tools of the trade
For those who already know the fundamentals of HTML and CSS, Webflow will be easy to grasp and will have a huge advantage in learning Webflow. However, for non-development professionals, specifically designers, the UI might feel similar to tools of the trade.
Webflow's UI allows control over the DOM tree and elements (e.g., div blocks, links, text) on the left side and the visual styling of those elements via CSS controls on the right. In the middle, you can see changes in real-time and at different breakpoints.
Similar mental models are used when building in Webflow and when writing HTML and CSS in a code editor.
To some of you, selectors, layout properties like flexbox, padding, margin, tags, and more might look pretty familiar. Developer or not, having the ability to very rapidly iterate with real-time visual feedback on animation, styles, breakpoints, and conditional visibility to procure the exact UX you want will in some contexts be more efficient and produce better results in Webflow.
The code generated by Webflow is clean and can be just as clean as if coded by hand, and it can be a challenge to find superfluous code.
Why would non-developers benefit from a masterclass on frontend UI logic?
Designers will become better designers carrying what Webflow taught them into future projects. Whether a Webflow project or not, designers who understand fundamental frontend concepts provide an undeniable amount of value, and that's reflected in the fact that companies want designers who understand code, now more than ever.
They'll better understand limitations and how developers would approach implementing design, making it easier to develop, saving time, and preventing any unnecessary or costly refactoring of design or code.
They'll better communicate a design to developers, making it easier for them to turn a design into what was envisioned and be able to take into consideration things that they might have otherwise overlooked, like loading times, code complexity, and code maintenance.
They can also push fun and unique designs and interactions, making them more likely to be developed. It'll at the very least make them everyone's favorite designer — which is a valuable position.
Ultimately, any non-development professional can use their newfound abilities to build and launch a product, handle a personal or freelance project from start to finish, or become more valuable to current or future employers.
The “no-code” movement and where actual developers fit in all of this.
Where there is a need there is possibly a good use case or justification for using Webflow and so designers won't need to work with developers to build every website for every project. However satisfying it may be, just because developers know how to code doesn't mean they will always be needed to code.
It's rampant among programmers to bicker over programming languages, text editors, and various other tools. The important thing is not to discount a tool like Webflow simply because it's not a personally preferred or familiar way of getting from point A to point B, it's simply another way.
Code is another layer and another product of our patterns of thought, and Webflow is just another abstraction layer on top of the many abstraction layers before it that the industry had to adapt to.
The CEO of Webflow, Vlad Magdalin, drew parallels between Webflow and the abstraction layers of 3D animation software.
“I see Webflow as kind of like 3D animation software. Twenty years ago people had to understand vertex math, nerves, non-uniform rational B-splines — like these technical people had to do animation at Pixar — and then we created an abstraction layer […] where now, creative people, they still have to understand all these constraints […] but all this stuff is visual. […] We’re creating these visual abstractions to help people harness the power of that medium. We’re doing the same thing with Webflow.”
Generally speaking, I don't think Webflow will threaten development careers. For developers that will resist the type of change that Webflow and tools like it might bring however, it's possible. Webflow and tools like Webflow are not going away any time soon and could eventually make handwritten code a thing of the past in the very distant future. Seriously, developers probably won't have to worry about this any time soon.
Instead, they should embrace Webflow and regard it as another product of the nature of rapid change in software development. Instead of dismissing the usefulness of tools like Webflow, developers should do what they've always done and embrace new tools and technologies that could allow them and others to work more efficiently.
“No-code” tools aren’t always a replacement for human expertise, and Webflow is no exception.
With code, there is more freedom and more complexity, and with Webflow, things can be simpler and more maintainable but also limited. Every tool has its limits, and outside of specific limitations that I won't cover in this article, Webflow is limited to making relatively standard websites at the moment.
While Webflow has reusable components, a CMS, hosting, and e-commerce capabilities, you still can't create many forms of component-based websites that use routes and state management and have certain intertwined complexities with a backend or maybe third-party integrations.
This means that web apps might still be a long time coming for Webflow. Even when Webflow, or some other tool, progresses to the point you can visually create complex apps with advanced logic, developers will still have an advantage.
Developers already know how program flow-control works and how to create loops, conditionals, and data structures. Developers will still need these core concepts to build websites, apps, and tools — especially tools like Webflow.
Some developers should consider using Webflow themselves to save time and work more efficiently.
Ok, so aside from the obvious benefit of working with designers or non-development inclined professionals who're familiar with fundamental web paradigms, what might attract developers to the idea of using Webflow themselves?
It won't be the code-free designer at first — but rather efficiencies found in areas such as the integrated CMS, hosting, and e-commerce support. These are often time-consuming challenges, especially for freelancers. However, with these challenges taken care of, they can spend far less time per project, allowing them to accomplish more in less time.
Webflow isn’t perfect and it’s important to know when it's the right tool for the job.
It's important to know when Webflow is the right tool for the job and plan accordingly. If your needs are relatively large and complex, you might run into Webflow's limitations. You could fail to consider an important third-party integration or features that will ultimately require the assistance of a developer. Your designers could be burning the midnight oil to wrap up site changes so you can publish a blog post the following day. Your content editors could be frustrated because they can't fix a typo until the extensive redesign is finished. And so on.
Suppose you're a bit smaller, but your needs are still relatively complex — you know Webflow is a good fit and design flexibility and speed are critical. In that case, Webflow might be for you. It depends.
However, maybe you're a small team or an early-stage startup — with one or more very coordinated people designing and managing the site, and you want significant control over the design — Webflow could be the perfect fit for you.
Whoever you are, Webflow could be the tool you didn't know you needed and could be the next big thing that gives you a serious competitive edge.
As for the future of design and development, the work we do will inevitably change as we improve and refine our tools to accomplish that work. We'll see hybrid roles or roles that were once two separate roles as the tools we use become more efficient. Designers and developers will surely be doing very different jobs ten years from now.