Starting out with Webflow

I recently discovered Webflow; an app for designing, developing, animating and hosting websites without code. As a designer, I find the concepts behind web development often complicated and confusing. However, using Webflow has helped me to visually understand the code behind the curtain.

webflow interface screenshot
A screenshot of the Webflow interface

I have been using WordPress for a long time and most of the client sites I’ve worked on and published remain in the WordPress eco-system. I’m a big fan and still am.

But I am also tech curious. So when alternative options pop up, I take a peak. Webflow is just one such alternative; a design and development environment that allows me to design without code. (bonus: fast, hassle-free hosting too)

Using WordPress, I like to think that I create “bespoke” designed websites. I don’t always use off the shelf themes unless clients really, really want them. The majority of the sites I make are created with Beaver Builder. It’s a tool that lets you layout websites in just about any way. Of course, there are limitations, especially when it comes to bespoke UX ideas and these are usually overcome with custom code.

Essentially you are designing within the Beaver Builder framework, using tools created by a growing community of amazing developers. So you’re limited to what’s available on the market. (Supplemented by your knowledge of CSS and JavaScript)

There are plenty of plugins for Beaver Builder, so you get lots of variations of modern website interface elements, like grids, sliders, galleries, maps and more. But as a designer, you soon start to hit limitations.

Webflow is like the movie version of the book.

With Webflow, I find myself able to think outside of the box model. Despite my obvious lack of coding skills, I do have some knowledge of HTML and CSS and Webflow offers a safe sandpit for me to get to grips with coding concepts.

When you open the Webflow designer, there is nothing on the page; a very daunting blank screen. Your development pathway is at the very beginning and you really are starting from scratch. That tends to expand your imagination a lot, but it also leaves you with the dreaded designer’s blank canvas — where and how do you start?

It is quite the opposite with Beaver Builder and its associated theme and theme builder. At the outset, there is a framework to start working from. Headers, footers, sidebars, content areas. It’s all set out for you. But this technique can also be limiting as it tends to funnel you into the same design direction every time. As a result, you may end up producing similar results every time. Webflow has started introducing templates and layout modules too, but I tend to stay away from them. They’re great if you’re doing that kind of work; why reinvent the wheel every time…?

I have a lot to discover and learn with Webflow — to me it’s a perfect sandpit for a novice web developer. It makes you think more about the framework of your design and as a visual person, it’s almost like drawing out a picture of the code contained within. I often think of Webflow as the movie version of the book; a visual interpretation of code blocks.

Without much coding knowledge, it’s easy to get your hands dirty figuring out how to set up divs, sections, containers, margins, padding, positions and tons of CSS options. Admittedly, It’s quite overwhelming at first. Especially when you’re confronted by that initial blank and empty layout screen…

The learning is what is important for me — understanding the basic background of web design and development and how that can open up further design horizons. I’m looking forward to developing a personal site of mine as a diary of learning and I’ll share my progress, tips and tricks along the way.

»