Webflow Review 2022 — The Ultimate Web Builder for Designers?
The no-code movement has taken over in the last few years, and one of its current leaders is Webflow.
Webflow is a tool that simplifies web design & development while not shying away from its complexity. Taking a slightly different route than website builders such as Wix & Squarespace, it’s able to build almost anything from basic brochure sites to Awwward winning, highly interactive pieces of art.
If you’re new to the world of no-code, or the web design industry as a whole, you might have a lot of questions surrounding Webflow right now. How does it work? What’s unique about it? And most importantly, can I benefit from using it?
Well, in this review I’ll try to answer those questions by giving you an as complete picture of the tool as I can. Let’s go.
Please note that this article has a few affiliate links in it, which gives me a small commission on every product bought. 🤙
Website builders
When talking about website builders, most of us probably think of the big players Wordpress, Squarespace or Wix, all of which have been around since forever.
Let’s just quickly summarize and compare them to Webflow.
Wordpress
Wordpress is going the free, open source route, allowing users to build highly customized solutions that can be hosted on any server they choose.
It’s probably one of the most popular go-to tools for people trying to build a website, since multiple sources claims it’s powering something between 35%-45% of ALL websites online.
Because of its quite bare boned default customization abilities (if you’re not a web programmer), its community has built a big plugin market. You’ll probably be able to find a plugin for almost anything that’s not included out of the box.
However, since Wordpress is such a stand alone open source tool, it requires you to keep up with new updates for both itself as well as all the plugins you’ve chosen (or are forced) to use.
On top of that, Wordpress shouldn’t really be considered a true no-code tool since it requires its users to be a bit more on the “developer side” as compared to Webflow, Wix & Squarespace (unless you want to pay for one of its many third party web builder plugins).
Squarespace
Then we have Squarespace. A typical no-code tool that is built to abstract away any kind of hardships that typically comes with building websites.
It’s super sleek, has a big community and is an established and robust player on the market. This makes it the go-to tool for many who want to spend more of their money instead of their time.
However, it’s a fairly restricted platform that focuses more on pre-designed templates than full customization abilitie. This makes it really easy for non-designers to setup a really nice looking website, but hinders others from fully building their site from scratch.
It does however handle most, if not all, of the typical needs in terms of functionality. And it does it really well.
Wix
Everyone has probably heard about Wix. If not, you’ve probably at least seen a website with that little “created with Wix” banner.
This tool gives users nearly full flexibility regarding design customization, as well as having a lot of native plugins that can be used for nearly any feature needed.
It’s a blank canvas which workflow reminds more of a UI design application (Adobe XD, Figma) than a website builder. This is however great for users who want their site up and running as quickly as possible without a steep learning curve.
However, it’s also one of those builders that wants to give user so much freedom that it trades off other important parts of web development. Examples can be seen in low performing websites and non-proper page structures in terms of underlying code (ehrm, absolute positioned divs all over the place, no reusable CSS classes etc.).
EditorX
Let’s also give an honorable mention of EditorX, a newer and more modern version of Wix, but built by the same company.
Currently it suffers from the same problem as Wix, mainly unstructured code behind the hood and poor performance.
However, it does feature a lot of new innovative solutions to problems that even Webflow hasn’t implemented yet. Examples of these are sleek collaboration features, marketing tools and its ability to use all the plugins that’s available for the Wix builder.
Webflow
And then we have Webflow. The newer kid on the block that you probably could describe as a combination of all of the three previous builders in one package.
Using standard HTML elements combined with CSS properties (and a full content management system, interaction designer etc.), you could probably describe it as the closest thing to actually coding a website — albeit visually.
It’s a tool that’s oftentimes being marketed to designers as a way to develop sites without having to spend time learning how to code. And that’s probably a pretty good description.
Webflow is a fairly young player compared to the others. This means that some features are missing, and some could be vastly improved (read my article about its current limitations).
However, the features that currently do exist are most often amazing.
Webflow vs. Wordpress
As mentioned above, Webflow feels like it’s trying to inherit the best features out of all of the three other builders — Wordpress, Squarespace & Wix.
Wordpress as a CMS is robust, easy to use and most importantly of all open soruce. It should however probably not be considered a no-code tool unless used together with a bunch of third party plugins such as Divi or Elementor.
Webflow doesn’t use plugins, but instead allows for complete customization abilities out of the box. However, it’s not open source and does not allow for complete freedom for developers.
Webflow vs. Squarespace
Squarespace is super sleek and makes it really easy for anyone to get up and running with a beautiful website really quick. Its ability for complete customization is however the trade off since it’s quite restricted. It also has awesome ecommerce features.
Webflow is a lot more customizable in terms of design, which can be built fully from scratch on a blank canvas, but its ecommerce feature is really lacking.
Webflow vs. Wix
Wix is more focused on the design aspect of building websites, which makes it easy to customize your design, but makes the code bloated and performance sluggish.
Webflow is almost on the same level regarding design, but does however respect the rules of code & performance. Webflow’s learning curve is quite sharp compared to Wix as well.
How Webflow works
When signing up for Webflow, you’ll be greeted with its dashboard.
Here you‘re ’able to create new projects and find all of the previous ones you’ve created. How many you’re able to create depends on the account plan you’re using.
All Webflow projects consists of two separate sections:
- The designer in which you develop your website
- The editor in which you’re able to create and update content on your website
Let’s go through both of these really quick so that you’ll get a better understanding of the workflow inside Webflow.
The designer
When creating your first project you will immediately get thrown into the designer. This is the main canvas on which you’re able to build your website.
On the left side you’ll find the toolbar containing everything from HTML elements, components and page settings.
On the right side you’ll see all available settings and CSS properties for the currently selected element. Here you’ll also find the animation timeline (IX2), which we’ll go into a bit more later.
As noted above, Webflow works with typical HTML & CSS (and some Javascript) properties, letting users use a majority of the available properties and elements available in the languages today.
This makes for a really well written, structured code behind the hood, making it easy to follow the rules of otherwise traditionally written code. It’s basically visual web development.
The editor
Webflow’s content editor is where you, your clients or your content writers will be spending their time.
You’re able to access it both directly through the designer view, or live on your published site (https://yourdomain.com/?edit).
It has a very minimalistic UI, making it easy for clients to use without having to look at the somewhat intimidating look of the designer.
The interaction & animation designer
There’s also the interaction design timeline, which looks similar to any kind of animation or motion graphic software you might have used in the past.
By using “keyframes”, you’re able to animate most elements on your site.
This works by selecting an element, creating an initial keyframe and then creating other keyframes in which you change the CSS properties of the element.
There are a lot of different animations and interaction states that you can work with out of the box.
Some of these are:
- While the user is scrolling
- When a user hovers an element
- When a user clicks an element
- When a user has scrolled to a certain position on your page
Make sure to take a look at some of the projects on my Webflow showcase profile for some inspiration regarding animations ;).
The ability to animate was probably one of my initially favorite Webflow features, since I loved the feel certain websites gave me with just the right amount of interactions & animations.
And let’s not talk about those super cool (but albeit somewhat unusable) Awwward sites that makes your jaw drop.
It was a pleasant surprise to see how many of them actually were built using Webflow (however oftentimes together with third party Javascript libraries).
The CMS
Webflow’s CMS is built using collections, similar to document based / noSQL databases.
Each collection is built using fields, which each contains a common data type such as text, numbers, images, videos, switches and even references to other collections.
For each collection, you have the ability to create a collection template. This is the template or design that should be used for any page generated by that collection.
Some examples of some common collection pages are:
- Blog posts
- Recipes
- Houses for rent
But as noted above, they can also be used to create common components such as:
- Team members on a team section of your site
- FAQ, or frequently asked questions
- Instagram posts
The CMS can be further programmatically developed through dynamic data using the official CMS API.
There are also multiple no-code tools that can be used in order to interact with the CMS, with the most common one being Zapier.
Other key features
While the designer, content editor, CMS and interaction designer probably are the main selling points for Webflow, there are also a lot of other innovative solutions that they’ve added to the software.
Let’s go through some of the other key features of Webflow.
Hosting
Webflow has its own hosting solution built into it, just like Wix or Squarespace.
You’re able to update your site in one click, both through a free staging domain (on which you can test out stuff without pushing to production) as well as to your live domain.
Domains are easily connected by changing a couple of DNS values in your domain registrar, pointing your domain towards your Webflow project.
Community cloneables
One of the absolute most interesting, most time saving and most underrated features in Webflow is the “Webflow showcase”. Something simiar to this doesn’t exist (to my knowledge) for any of the other website builders in this article.
On the showcase you’ll find projects, components and custom solutions shared for free by other users of Webflow. These are all free to use for any kind of projects that you’re working on.
Let’s say you’re looking for a fullpage mega drop down menu, but you’re not really sure on how you can create one. Simply search the showcase, test out a couple different projects and simply clone the one you like the most.
You’re able to both check out how the component was developed, as well as simply copying and pasting the component into your own projects.
It’s actually rare to not find a component that you’re looking for. Make sure you take a look, you might even find a few shared projects created by yours truly ;)
Code exports
A really interesting feature that not many of the other web builders have implemented is the ability to export your code.
When upgrading your account from the starter plan to the lite plan ($16/m) you’ll get a button in the navigation of the designer that simply downloads the source code (HTML, CSS, Javascript) of your project, neatly packaged in a zip file.
So what’s the big deal about the code export feature? Well, this makes Webflow even more usable to a specific group of users: developers.
Even if it’s marketed as a no-code tool, because of the clean non-bloated code it exports, you’re able to build your front-end in Webflow, export the code, and further work with it in whatever way you want.
Are you using React.js (or any kind of Javascript framework)? Simply download the code and integrate it with the rest of your React project.
Another cool thing about the code export is that you’re able to host your static file on any host you want.
I’ve written a full article about hosting your static site on Github pages and/or Netlify that you can read by clicking here.
This is perfect if you’re creating a site for some small business with only a few visitors a month that doesn’t need constantly updated content on their site.
Some developers have even created open source tools that lets you sync your Webflow projects with Github, simplifying the updating process while still being able to host your sites for free.
White labeling
One very interesting feature of the Webflow CMS is that you’re able to white label the whole thing.
This means that you’re able to customize its look with your own company logo, making your clients feel like they’re getting an even more customized solution brought to them by you or your agency.
The Webflow university
It’s rare to see a company that has spent as much time and energy on creating educational content around their product as Webflow.
In the “Webflow university” (which actually has higher quality than some university courses I’ve taken) you’ll find hundreds of high quality video lessons and courses that covers almost every part of the development process inside Webflow. And they’re free.
If you want to take a deep dive into how working in Webflow looks, feel free to take a look at their starter course by clicking here.
Performance of Webflow sites
Loading time
As mentioned above, the code generated by Webflow is usually clean and minimally bloated. This means that your sites are automatically going to have solid performance in terms of loading speeds compared to sites created in other website builders.
As you can see in this forum thread, a user has been comparing Wix sites with Webflow sites. The performance of the latter is winning in almost every regard.
The performance is also enhanced by Webflow hosting all sites on AWS servers with CDN:s all over the world.
What this means is that “copies” of your site is going to be delivered to your users by the server that’s closest to them. These servers exists all over the world.
There are also a few small “bonus” optimizations such as lazy loaded images, code minimization etc.
Accessibility
In the last few years, there has been a lot of talk around accessibility on the web and making the biggest amount of users able to use websites and platforms.
There are even laws around accessibility that you should adhere to depending on the type of site you’re developing (private, public, government etc.).
This can be confusing if you’re new to web development, since there are some very technical decisions that have to be made in order to stay compliant.
Webflow has recently implemented an accessibility audit that lets you know some mistakes or errors that your site currently has, together with explanations on how you can fix them.
This feature is currently under development, and will probably be more comprehensive in the future.
In the meantime, Webflow has some resources around the subject that you can take a look at by clicking here.
Third party integrations
As already mentioned a couple of times in this article, there are a lot of other no-code tools that can be used together with Webflow.
The most common tool to automate and integrate Webflow with other platforms is Zapier, which is a simple-to-use (albeit pretty pricey) no-code tool that creates automated workflows.
Airtable is another common tool that works as a visual relational database and can be used for various features that don’t exist out of the box with Webflow.
There are of course also the ability to write your own Javascript and fetch data from third party API’s for example, as well as write your own custom solutions to problems that may come up along the way.
Webflow pricing
There’s a running joke about how complicated Webflow’s pricing structure is. But I feel like it doesn’t have to be, so let’s walk through it.
You basically have two different pricing plans to choose from which we’ll go through below.
Account plans
The account plan is created for freelancers and agencies who need a certain amount of project slots in order to create a lot of sites. When wanting to host a site through Webflow, they would also need a site plan for that specific project.
Site plans
The site plan is for anyone who just wants to host a site through Webflow. If you’re only interested in creating one (or two maximum with the free account plan) you can simply just use the free account tier and pay for the site plan for that specific project.
There are also a few different tiers for both account & site plans. These are mostly related to the amount of monthly visits, amount of pages, content editor slots, team collaboration abilities, form submissions and bandwidth (etc.) that you need.
The pricing page explains everything more in detail.
Support
One of the biggest draw-backs that I’ve experienced is the lack of email support for non-enterprise users of Webflow.
Personally, I’ve only ever contacted the support a couple of times regarding hosting transfers between projects. Those times I’ve gotten a response within a couple of days, but I’ve heard a lot of horror stories of users waiting for weeks for a response.
However, the team has a goal to vastly improve the support throughout 2022, which gives hope that they’ll get their response time down a notch.
Then we also have the forum, on which other users are eager to help you with mainly design & development related issues that you might have.
Webflow pros & cons
There are a lot of reviews online that go through the pros and cons of using Webflow as compared to other website builders, so let me explain my view on this as well.
I’ve been using different kinds of website builders for many years, even before I knew anything else about web development, and none of these has given me the complete creative freedom as Webflow has.
Don’t get me wrong, there are also quite a few issues related to Webflow, which I go through in detail in this article about its limitations.
Things like no native support for multilingual sites, no easy way to build more web application type sites and a quite lacking ecommerce system are some of the big drawbacks of the software as of 2022.
This is however all problems that can be worked around if you have the time to put down into learning about Webflow and web development overall.
Will Webflow take over Wordpress’s position?
The short answer: no.
The long answer:
Wordpress is an open source solution that you basically can transform into anything you want, and it’s the single biggest player for building websites right now (up to 45% of the web as a whole).
There simply aren’t many problems that can’t be solved in Wordpress using a third party plugin or using the knowledge of developers who have been using it for 15+ years.
Personally, I believe that open source will always have the upper hand on other types of premium software, even if they don’t have the same modern features as the alternative out of the box.
There are simply so many things that Webflow can’t do, and probably won’t ever be able to do, which developers will be able to do using Wordpress.
But I don’t think Webflow necessarily has to compete with Wordpress either. It’s simply a different solution that’s being used by different types of users, and that’s probably how it will stay.
FAQ
Is Webflow good for beginners?
This is hard to answer. If you’re willing to learn some basic rules of HTML, CSS and the box model, then sure, it’s great.
If you’re simply looking for a tool to build a site as quickly as possible, then I would suggest some other of the many website builders out there.
Is Webflow good for designers?
Oh yes. It’s probably the only tool that actually merges the visual and technical aspects of web development in such a clean way as it does.
Is Webflow expensive?
Yes. At least compared to other similar tools.
What you might realize though, is that even if you’re going with an open source solution such as Wordpress, it will cost you probably just as much when accounting for paid plugins, hosting etc. This won’t always be true, but at least in some cases. I’m still a big Wordpress fan.
Can I create web applications in Webflow?
That depends on what you consider a web application.
You’re definitely able to create applications with dynamic data being fetched from third party sources (using the CMS API or using API proxies), but it definitely requires some programming skills, or a third party no-code solution.
If you mean “the web application feel” without refreshes between page switches etc. then unfortunately no.
Conclusion
So there we have it.
I don’t really have anything more to say than thanks for reading, hopefully this article helped you in your decision weather to use Webflow or not for your next projects. Have fun.
/Robin G. 🤙
