Webflow
Reviewed July 24, 2019Webflow 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
Further Reading
- Future of Coding Episode 35 - Democratizing Web Design: Vlad Magdalin
- Great videos with a dry humor teach the basics of HTML in terms designers are familiar with.
- No-Code Website Builder Webflow Went From Near Bankruptcy To A $72 Million Series A Funding Round