The Inspiration of Direct Manipulation
Vlad’s breakthrough—he had tried and failed to build Webflow twice before—turned out to be the idea of “direct manipulation”, which is about removing as many layers of abstraction as possible between a user and what they're trying to interact with. It’s the difference between using a mouse and a touchscreen, which also accounts for why babies can use iPads but not laptops. Vlad was specifically inspired by a presentation by designer Bret Victor’s titled “Inventing on Principle”.
He painted this whole picture of being able to build games and define electric flows if you’re trying to create a circuit board or whatever. Where applying a visual language to something that’s technically, really traditionally, more complicated or you have to do a lot of things in your brain and translate it in your brain. Saw that video, immediately the next day put in my notice and said, “I’m starting Webflow.”
(All quotes in this piece, unless otherwise noted, are from Madalin’s excellent interview on the Acquired LP show. It’s well worth the $5 monthly fee for this episode alone.)
At the time he stumbled on the video, Madalin was building websites on the side with his brother as he worked on saving up enough money to buy a house. What struck him about the experience was that while his brother, a designer, had great fun creating each new project from scratch, the development work that Vlad had to do was … not great fun.
I was building all of them in WordPress. I would translate them to HTML and CSS or whatever. Almost every single build that I’m doing is kind of the same thing. The same workflow for creating layouts, the same kind of workflow for creating pages. I was getting honestly really tired of it because it was really tedious.
At the end of the day, the difference in their jobs came down to the tools available. Whereas his brother could see what he was doing as he did it, Vlad the developer was left staring at code that represented the visual end product. Every so often he’d switch over to the browser to make sure things looked right and continue on with his HTML and CSS. “Jumps” like this interrupt your flow and make everything feel more tedious. Webflow is an attempt to solve this problem by removing as many layers as possible between the builder and the end product.
Why is Webflow different than Dreamweaver, FrontPage, and all the other website builders that promised this sort of amazing “what you see is what you get” (WYSIWYG) functionality? It seems to come down to two things, which are interrelated. First, Webflow respects the fundamentals of the web. It doesn’t try to hide the “box model” behind softer-sounding language and it shows you that all elements start as rectangles which can then be rounded off. This sort of “shallow abstraction” as Madalin calls it requires the second critical component: It’s not for everyone. If you want to be respectful of how the web works, you need to have some fairly complicated functionality. Webflow is built for people who know how to build websites but would rather not waste the time writing all that code. Similar to using software to create music, you still need to understand the core principles if you want to make something people will like.
The Rise of No-Code
Webflow is part of what’s being called the “no-code revolution”: A set of tools and technologies that require far less technical skill to create highly technical user experiences.
In the above chart you can start to get a sense of where no-code sits within the broader timeline of software. The exciting part, of course, is that with each wave technology has become more democratized. No-code is the culmination of this idea and could lead to an even bigger explosion of ideas and companies than we saw in the previous eras (to give you a sense of the opportunity, currently only about 0.3% of the world’s population can code, this type of shift in how and who can build could change that). But it will take time to get there, even Webflow as Vlad describes it, isn’t no-code, but rather “code optional”:
Webflow is very much a code-optional type of tool. The aspiration is that it becomes a lot closer to no-code over time. A lot of the things that people have to pull in code for in Webflow today is just the limitation of the platform. It just means the building blocks are not available.
Riding on the Back of Giants
Webflow is a great example of a company that is built on the back of giants. The ideas of direct manipulation bring you back to Douglas Engelbart and his 1968 Mother of All Demos, which showcased some of the first examples of the Graphical User Interface (GUI) and point-and-click interactions. Fifty years later with inventions like Chrome riding Moore’s Law, the web finally became a true application platform. “In order to create that full abstraction of I’m previewing exactly what’s going to ship,” Vlad explains, “you have to actually show that in the browser in an iframe or something.” It wasn’t until around 2013 when Chrome was advanced enough and its install base large enough to make that happen. The shape of the web and the potential applications are just now truly emerging.
I’m passionate about Vlad’s story, the rise of no-code, and the ideas behind direct manipulation because it sits at the center of what we are trying to build at Variance. We believe we can help you master the software tools that you use each and every day. To make that happen we need to rethink the interfaces for how you document, teach and learn from the tools that you are using, regardless of your technical capabilities. If this sounds interesting to you, please say hello.