What is Webflow? | No-Code Website builder

7 minute read
August 10, 2021

What is Webflow?

Webflow is a ‘no-code’ in browser software used for building high quality websites. It gives the user the ability to design pixel perfect websites, add animations, launch & edit all within a visual interface.

My experience.

As a graphic designer who kept getting asked to build websites, I needed something I could rely on to deliver great sites!

I always felt a disconnect when I tried to build websites. I would design amazing wireframes, and then be frustrated by the lack of customization I could achieve with website builders like Squarespace & Wix.

On the flip side, I had left a career in IT to move away from coding and had no interest in moving back in that direction.

When I tried to work with developers I would feel underwhelmed by their feedback and constantly being told 'the wordpress template does not allow that.'

Enter Webflow.

This software completely changed the direction of my business and even my approach to building websites. But what made it so great? Let’s talk more about what Webflow is and some of its great features.

![Webflow designer interface](https://uploads-ssl.webflow.com/610a5c11bd4ad0b1f14ddebd/61120b4dbd80ac5014f546f4_Webflow designer-min.jpg)

Webflow Designer

With the Webflow interface you can build 100% custom layouts with no code needed. These layouts you are building are actually writing clean HTML, CSS & JavaScript in the backend, which you can choose to export at the end of the project if you would like to host it elsewhere.

While it takes a little time to fully understand, Webflow offers a robust CSS class system that has given me the ability to speed up my development stage 10 fold! if you lay things out correctly the first time and assign classes correctly, you have the ability to reuse these classes on separate pages and save yourself a lot of time.

SEO features are built straight into the designer, giving you the ability to correctly set H1-H6 headings on each page, real time alt tagging images as you upload them, easily set the meta description, title tag & page URL all within the designer.

![Webflow designer on blog article](https://uploads-ssl.webflow.com/610a5c11bd4ad0b1f14ddebd/61120b586d9567b18508346b_Webflow CMS-min.jpg)

Webflow CMS (Content Management System)

Webflow CMS is a first in being a visual content management system, meaning that it gives you as the designer full control over how you want to structure the CMS, and connect it to collection pages.

You can design fully custom collection pages e.g. blogs, team pages, landing pages and a full portfolio that can be fully dynamic. (This blog is built using this feature)

Once you design these collection pages you connect them to your 'collection list' which will make these pages dynamic with every new one created.

![Webflow screenshot of process](https://uploads-ssl.webflow.com/610a5c11bd4ad0b1f14ddebd/61120c435ae4917e6b6044c4_Webflow editor.png)

Editor - Helping clients

Webflow has an editor that gives the client the ability to edit photos, images, links and others things on their websites. Instead of having to worry about the possibility of the client breaking the website using the powerful but somewhat complex Designer, you can assign them editor privileges. These priveleges are also visual, but limit what the editor is allowed to touch to avoid layout or formatting problems.

I have found clients are much happier with their experience of editing their website using Webflow. Where a lot have come from Wordpress and find CMS daunting, they now have an enjoyable time using Webflow. They can upload blogs, put in new images and do all the things they need to, and being able to see what they are editing visually in real time has been a game changer!

![Webflow animation menu](https://uploads-ssl.webflow.com/610a5c11bd4ad0b1f14ddebd/61120b92b17f707e66bc2652_Screen Shot 2021-08-10 at 3.11.15 pm.png)

Interactions - No-Code Website Animations

Also built into the designer is animations & custom interactions, you guessed it VISUALLY! No more testing and hoping this random code you copied works. The ability to create world class animations and test the out visually is so outside the realm of what has been possible previously, and is an amazing advancement for web designers.

Take your websites to the next level with this ability, making amazing web experiences from simple loading animations, to parallax scrolling effects or simple goodies like reveal content on click or adding hover animations. You can really go wild and create amazing multi step custom animations to make your website truly unique and stand out!

Also recently added, you can now easily add ‘lottie’ animations to your website! You can create Lottie animations in 'AfterEffects' or check out free animations you can download then drop into your website!

![Webflow hosting page](https://uploads-ssl.webflow.com/610a5c11bd4ad0b1f14ddebd/61120be1630c0a464d188f7e_webflow hosting.png)

Hosting Security

You can host directly with Webflow. This is such an awesome feature and makes the process so simple and stress free. Once you have finished developing your website you can simply connect it to a custom domain and in 1 click launch your site live.

Webflow hosting is powered by 'Amazon web services' & 'Fastly'. There are 100+ servers worldwide, meaning it is quick and reliable, and it comes with HTTP/2 as a standard. It scales automatically, so if your website goes viral you do not have to worry about a potential crash from increased traffic!

It comes with SSL as a standard inclusion, so no more of this $99 per year by some shady company charging for for a SSL certificate.

![Webflow university](https://uploads-ssl.webflow.com/610a5c11bd4ad0b1f14ddebd/61120c774f08510a9b080e3f_webflow uni.png)

Webflow University learning No-Code

Webflow has done a great job in creating the ‘Webflow University,’ where there are highly professionally produced how to videos that are enjoyable & surprisingly funny (TRUST ME JUST WATCH THEM).

The Webflow Designer can seem overwhelming, as it is much more robust then a simple drag and drop like Squarespace & Wix, so when starting out this is a great first stop!

Spend the time going through these lessons and it will give you a great foundation of understanding Webflow!

![Webflow e-commerce example](https://uploads-ssl.webflow.com/610a5c11bd4ad0b1f14ddebd/61120b6333c8db84a7c0b35b_Webflow eccomerce-min.jpg)

No-Code E-commerce

E-commerce I think is currently Webflow’s biggest downside. It is still new and does not yet have the power to compete with Shopify, Woocommerce.

It does pride itself on allowing full customisation over all visual elements of your online store, from product pages to checkout

It is great for creating custom looking unique store layouts, instead of just cookie cutter templates that others use.

At the moment it still is missing vital features to help it compete with the big dogs, however I do believe with enough effort and work Webflow will get their e-commerce solution as a serious competitor in no time!

Pricing for Webflow

Pricing for Webflow is broken down into Site Plans & Account plans

Site Plans

There are 4 plans for hosting. The most basic starts at $12USD a month, to unlock the CMS costs $16USD a month with a larger offering going up to $36USD.

E-commerce plans start at $29USD and go up to $212USD per month depending on what your needs are for e.g. amount of items.

Account plans

Account plans are useful if you are planning on building website for clients using Webflow. There are three plans available currently.

Free - 2 Projects

Lite - $16USD a month and gives you up to 10 projects in your accounts

Pro - $35USD a month and gives you unlimited project spots

They also have team plans if you need to use Webflow for more than 1 person starting at $35USD

![Webflow Forums](https://uploads-ssl.webflow.com/610a5c11bd4ad0b1f14ddebd/61120b873dd3cbcad3d130d6_Webflow community.jpg)

Webflow Templates & Community

If starting from scratch seems overwhelming, there is an amazing community producing free & paid templates for use on Webflow. You can purchase them HERE.

Templates and assets can be a great place to learn how to structure & build your websites. Many people leave the ability to view their website through the designer, so you can look straight into how they are styling their layouts, adding custom animations and figure out the tricks from the experts.

Webflow has an absolute raving & passionate community. If you are confused about something check out the Webflow forums or post something there yourself & more than likely an expert will get back to you and help you out in 24 hours.

On top of that there is a great vibrant community that is constantly growing! You can tell how passionate this community is by teams putting on fully-fledged events centered around Webflow that aren’t even sponsored by Webflow - just look at Finsweets latest EVENT NAME HERE for an example!

All in All - the Gold Standard for No-Code Website Design

In all Webflow is an amazing tool with a great team making it better. With the rise of no-code software, Webflow is the gold standard in website building.

It is here to stay and a great option if you are a designer looking to get into website building without using code.

Webflow is definitely worth checking out, and you can sign up and test it out for free! You only need to pay when you want to put your website live, to pay for hosting or the designer to create more projects!