Webflow

Reviewed July 24, 2019

Webflow is a no-code website creator, featuring 100% visual design tools, animated interactions, a fully customizable CMS, hosting and deployment, and ecommerce functionality. It's used by freelancers and agencies, in-house marketing teams, business owners, and for prototyping. What stands it apart from other website creators (Wordpress, Squarespace, etc) is that design (CSS) is fully customizable via a direct manipulation editor, akin to Photoshop. It was started in 2012 and raised an unusually large Series A of $72M in August 2019.

Product Feel

👍 Web-native concepts: "learn to speak developer"
👍 Fast, lively (single page app with fast rendering)
👍 Pro-tool a la Final Cut or Photoshop
👎 A bit bloated (more Photoshop than Sketch)

Basic Usage

In the above video, I create and narrate the beginnings of a basic webpage, including a navbar and call to action text and button. It demonstrates:

adding elements (image, navbar, section, container, columns) to the page via dragging
editing margin on all sides by holding down shift
selecting elements via the page and by the tree hierarchy on the right-panel
editing color, font and size attributes
centering via trial-and-error
viewing the page on different device sizes
messing with the large variety of background color options

CMS Collections

Webflow's CMS (content management system) is just about as customizable as its WYSIWYG visual editor. It features a simple UI to create a schema for collections, be them products, blog posts, or a totally custom entity, and add string, text, boolean, color, etc attributes. The magic happens when you add CMS content to the page, where you can continue to leverage the fully customizability of the WYSIWYG editor. The following video demonstrates creating a new collection, adding dummy content, adding a custom boolean and color attributes, and displaying the content in the editor, where we edit it into a number of custom visual configurations, such as paginated and filtered.

Ecommerce

The Webflow Ecommerce functionality builds on top of the CMS editor to allow products, shopping carts, and purchases. In the following video, I create a t-shirt product with size and color varients, and then customize its product page. All facets of Webflow Ecommerce are visually customizable, including the look-and-feel of the products page, shopping cart, the checkout page, and the confirmation emails sent to customers.

Interactions

While Webflow's editor allows for the full range of CSS animations, it also features a series of pre-built Powerpoint-like animations, such as "spin-in" and "wiggle". Custom animations are built by interpolating attributes established at keyframes. In the following video, I demonstrate some built-in animations as well as building a custom bounce and shrink animation. Animations can be triggered on mouse or scroll events, such as clicks or mouse movements.

Backups

Webflow is constantly autosaving user work, and creates a snapshot every 20th autosave. But you can also manually create and label a snapshot. You can then preview and restore previous versions from the backups page. If you want to just regain a single element from a previous version, you can copy and paste single elements from previous versions into the current version. Below is a video from the Webflow tutorials that shows how it works:

Pricing

The pricing has three tiers for basic websites ($12, $16, and $36 per month) and three tiers for Ecommerce ($29, $74, $212 per month). Agency pricing is $35 per login.

Wishes

User authentication/accounts
More direct manipulation, such as resizing directly
Graying out pro-features on free accounts (instead of simply removing them)
Less clicking and submenus