Webflow — UI for Code

Webflow user interface

Every year, I try to learn a new tool to add to my skill set and help bring my ideas to life. For the past year, that tool has been Webflow.

It started around May of 2020 when I was building my first portfolio site to showcase my design work. I started by using Squarespace. It was fairly intuitive and the templates were nice, but I could never customize the site exactly how I wanted to. I tried using the custom CSS editor to tweak things here and there, but eventually, I realized that I was looking for more than just slight customizations. What I really desired was to design and build my own website from scratch.

This is where Webflow came in. Webflow is a browser-based user interface for code. Think of it like Photoshop, but every adjustment you make gets translated into clean HTML, CSS, and JavaScript. You’re given a set of building blocks: sections, divs, image blocks, link blocks, etc. These form the structure of the site (the HTML). To adjust and control how these building blocks look and operate, you can use the adjustment panel which allows you to control an object’s class, size, position, hover states, color, and so much more. This acts as the CSS for the site. You can also use the interaction menu to create JavaScript page load animations, scroll animations, etc. This level of customization is what separates Webflow from drag-n-drop sites like Wix. You can easily and quickly create completely custom and responsive websites without even knowing how to code. The cool thing though is that the logic works the same way as web development does. By using Webflow, for example, I learned how to use Flexbox, so when I actually began learning CSS, I already knew the syntax and concepts.

This is just scratching the surface. Webflow also offers a robust Content Management System as well as e-Commerce capability, so the sites can really be used at any scale. Some brands that use Webflow include Dell, Upwork, and Zendesk to name a few.

I always encourage friends who are interested in web design to try out Webflow. It’s really been a game-changer for me and a lot of others who have been looking for a way to create custom websites without knowing how to code.

Taylor Design Blog