No-code tools are now frequently used in the field of web development.
In the past two years, our company has been using no-code tools in our projects. These tools have allowed designers to work efficiently, from the execution of the design to the implementation and development phase.
The use of no-code tools is especially useful for teams as it allows even those who are not familiar with web development to easily operate the tools.
Above all, No-Code Tools are extremely convenient because they reduce the complicated aspects required for publishing, such as the need to manage their own servers and the ease of setting up domain names.
Among the many no-code tools for websites, we have mainly used Webflow. In some cases, however, we use STUDIO, and recently we have started using Framer as well.
Each of these three tools differ in price, available functions, and ease of use, and we are currently exploring which tool is best suited for our sites while actually trying them out.
In this article, we will compare and analyze each service based on the differences we have found. We hope it will be helpful to designers who want to implement no-code website tools in the future, as well as to those who are already using no-code tools.
Introduction of Each Tool
Before going into a detailed comparison, here is a brief overview of Webflow, STUDIO, and Framer.
Founded in San Francisco in 2013, Webflow is a no-code tool mainly targeting designers.
This service was founded in the Netherlands in 2015. Apart from providing no-code tools for the web, the company also offers a React animation library called Framer Motion for developers. It originally started as a prototyping tool for designers who could code, leading to the current no-code tool.
It allows collaborative editing and is especially rich in component features. It also has many other features that are necessary for SEO and performance, and they claim to be able to leave a good score by default in Google Lighthouse.
This service was founded in 2016 in Japan. The founder has a background in design, and the company’s visuals and other overall design features are excellent.
The service allows collaborative design editing, and because it’s from Japan, there are many tutorials and community references available in Japanese, a great benefit for billigual teams. The fee is per site, so if you are developing as a team, the price is cheaper than the other two companies.
Comparison and Analysis of the Three Services
In this section, we will actually compare the three services in the following areas:
- How the Design is Implemented and Ease of Use
- Freedom of The Possible Interactions That Can Be Implemented
- Hurdles to Learning, Amount of References
As a premise, all three services discussed here include CMS, hosting for publishing pages, and form creation functions in addition to basic design editing functions (only Webflow has EC functions as standard).
Therefore, we will summarize other points that designers may be interested in when using Webflow in practice.
1. How the Design is Implemented and Ease of Use
First of all, let’s compare how to implement a design and how easy it is to use.
As I mentioned in the introduction of the tool, the way of thinking when constructing a design is very similar to the way of actually implementing HTML and CSS.
Therefore, basic knowledge of them is necessary as a prerequisite, or if you have knowledge of them, you can learn how to use them more quickly.
Compared to the other two services, it seems a bit more complicated with many UI elements at first glance.
However, the advantage of this service is that it can be used quickly by those who have experience in implementing web design using HTML and CSS.
On the other hand, for those who have no knowledge of HTML and CSS, there are many things to do and learn, and it seems complicated, so the hurdle to get used to it is high.
However, the complexity of the implementation makes it possible to implement complex animations and create pages with unified styles for each class.
Although there is a bit of a learning curve at first, Webflow allows you to design freely with its default functions.
Framer’s UI is similar to Figma. Therefore, if you have used Figma at least once, you will be familiar with the design and it will not take long to get used to it.
The actions required to create a design are also very narrowly defined. Basically, a layout is created by adding an element called a “frame”, and then setting the order of the frames. Then, text and images are placed within them, and space is specified.
The feeling of using Framer-UI is similar to that of arranging frames in Figma, using Auto Layout, and adjusting the space.
The ease and clarity of creating components and registering and managing style sets, as explained at the beginning of this article, is a major advantage.
This may be best suited for designing pages with defined brand and style guidelines, as well as for creating designs with a large number of pages.
Intuitively, STUDIO has a UI that makes it easy to adjust space and image size by directly placing and adjusting the necessary elements with the mouse and touching them.
In particular, the default screen does not display many UI elements, but instead allows the UI to appear by clicking on the element to be edited, or a scaled-down window to appear as needed.
2. Freedom of The Possible Interactions That Can Be Implemented
Animation is one of the most important aspects of creating a web design. This section compares the degree of freedom of animation that can be implemented by default in the three services. Since all three services can use custom code, we will compare the range of animation that can be implemented with the default functionality.
Webflow is the one that we feel can be implemented with the greatest degree of freedom using the default functions.
Webflow allows for basic animation settings such as hover and fade-in, as well as parallax scrolling.
The timing of the start of the animation can also be freely adjusted. Detailed settings can be made for page scrolling and elapsed time after page loading.
Although the operation is complex and requires time and effort to implement, it is possible to implement fancy animations with no code.
Like Figma’s Smart Animation, Framer also creates an animation that fills in the difference between the before and after states. However, it is not as detailed as Webflow. If you don’t want to use such elaborate animations, Framer should be sufficient.
On the other hand, STUDIO can implement simple animations with its default functions, but for more complex and fancy animations, you will need to use custom code. Or, it is necessary to insert pre-made motions in Lottie, SVG, etc.
3. Hurdles to Learning, Amount of References
For Japanese people, I feel that STUDIO, with its Japanese-language literature and Japanese-language community, is the lowest hurdle to learn.
The ability to gather necessary information in a familiar language, including explanations of videos, and the active Japanese STUDIO community, greatly lowers the hurdle to learning STUDIO.
If you are comfortable with English tutorials to some extent, the next easiest place to learn after STUDIO would be Webflow.
Webflow has a community called Webflow University, which has a very rich collection of tutorial videos. The videos include jokes, so you can learn how to use Webflow while having fun.
Although it is in English, there are many references, and I have the impression that most of the problems can be solved by searching.
On the other hand, Framer is the most difficult of the three services to learn.
Although there is a basic tutorial, the service itself is relatively new, and there are currently only a few references and FAQs. As the number of users increases in the future, this type of support will probably increase.
If you do not use a custom domain (a domain you purchased yourself) for personal use, all three services allow you to publish your website for free.
If we assume that you will be utilizing a CMS, a custom domain, or operating with a team of multiple people, the most expensive option would be Webflow, followed by Framer, and the least expensive option would be STUDIO.
Framer and Webflow also require you to pay for a “workspace” in addition to the fees required to publish the page. This is a separate fee from the page operation fee and is charged per person on the team. The larger the team, the higher the price per workspace per person.
The price difference is roughly the same as above, although it varies depending on the amount of content that can be added to the CMS, limitations on form functionality, and other detailed conditions.
What we have learned from the comparison of the three services is that it is best to use each service according to the situation and purpose of use.
The author’s conclusion from the above discussion is as follows:
If you want to implement and publish simple interactions quickly and inexpensively, STUDIO is the right choice.
If you have a large website that spans multiple pages, uses the same elements over and over again, or if you want to define a brand style and create a consistent website efficiently, Framer is for you.
Webflow is suitable for websites that do not have many pages but want to implement fancy interactions without using custom code.
This analysis may give some idea of what each company considers important in the creation of a no-code website.
Also, since the UI of each company differs greatly, we hope that those who are thinking of using no-code tools in the future and designers who do not have much knowledge of coding but want to create a website will consider using these tools with this article as a reference.
As a design company with offices in Japan and the U.S., btrax works with clients around the world, researching markets in each country to create designs and experiences that are relevant to their target audiences.
If you need help in the areas of website and other service design, branding, or communication design, please feel free to contact us.
Our new E-Book is here!
We’re thrilled to announce the release of our newest e-book: “What I Wish I Knew Before Entering the Japanese Market.”
Featuring insights from industry professionals who have successfully navigated Japanese markets, this e-book will help you conquer the Japanese business world with confidence.