What is Webflow? Build Websites Visually with this No-Code Tool

Deep-dive into the features of this popular visual web design tool, which turns designs into customizable sites without code

Don’t know your script from your CSS, or your HTML from your HTTP? Guess what—that won’t hold you back from building the website of your dreams.

Webflow is a popular visual web design tool in the “no-code" market. Visual designer and Webflow expert Jan Losert (@janlosert) uses the software to help companies enhance their online presence, and creates popular resources for web designers. In his Domestika course, Jan demonstrates how to convert a design in Figma into a functioning website using Webflow.

Here, he outlines what Webflow is and why it’s a strong choice when you want to build a website for your brand or portfolio.

What is Webflow?

Webflow is the current leading tool in the "no-code" market. It’s a visual web design tool that turns design decisions into clear, production-ready code. Webflow is used to make responsive websites that adapt to screen size and other factors, without having to write and debug mountains of code.

That means that rather than needing a programmer or learning to code yourself, you can instead use the tool to design on the front-end (a mock-up of what visitors will actually see).

How does Webflow work?

Webflow works using the box-model setup. You might have seen this in other website builders and marketing tools, and it’s sometimes called the CSS box-model. All it means is that your website is a tall tower of boxes, with each box containing a piece of content.

Each heading, image, button, or block of text will sit within a box, and each box has its own unique settings (like its width and padding). On Webflow, you can toggle the box outlines on and off, depending on how you prefer to conceptualize your designs. Jan recommends the below Webflow University video to understand the box-model better.

Why is Webflow a great choice for creatives?

Jan explains that Webflow and similar visual tools are a huge step forward for designers, programmers, and marketers. For a start, you have a new outlet for your creativity. And if you gain some experience, it could even become a part of your core offering to clients. In addition to logos and other branding assets, you could offer whole websites that carry a fluid feeling through all the client’s content.

And for those already in a web design career, the tool could speed up your current process, and open the way to new avenues for your design-thinking.

Is Webflow good for beginners?

Webflow is a good platform for beginners as you don't need prior experience in web design to use it. However, Jan encourages you to learn a bit about the box-model and how websites are built in general, so you have a foundation of understanding that will make the learning process much quicker and easier.

There are, of course, many visual web design tools appearing on the market nowadays, such as Bubble. But, Jan notes that Bubble is a little harder to set up, and is for users who are seeking to make more complex workflows.

What are Webflow’s features?

In Jan's Webflow tutorials you'll see him working in the designer, which looks a bit like Photoshop and is the main space where you can lay out your website. On the left you’ll see a navigation panel that displays all the elements of your website as a list so you can keep track. Other parts of the designer include the pages panel and assets library where you can add in pre-prepared assets.

At the top of the designer, you’ll find one of the most important features for planning your design: the breakpoints. These are the ways your layout will display on different devices, and there are four:

1. Desktop

2. Tablet

3. Mobile landscape

4. Mobile portrait

This allows you to adjust your design and keep all your potential users in mind.

Another useful feature is the templates library where, as with most website builders, you can choose to start from a premade layout and customize it.

Finally, the Interactions panel is where you’ll set animations and responsive movement on your website for a dynamic look—like text that fades in, and scrolling image galleries.

What is the difference between Webflow and WordPress?

WordPress is the top website builder on the market. However, unlike Webflow it is a content management system (CMS) only, which means it holds your content, but needs to be hosted on a server.

Webflow doesn’t require an external server as it’s a Software as a Service (SaaS)—which just means it has the functionality to do both building and the ongoing hosting. However, you can also design your site on Webflow, but host it on an external server.

So, how does Webflow compare to WordPress for website building?

WordPress has tons of themes and plugins to personalize your site. Meanwhile, with Webflow you won’t need external plugins.

WordPress, being the most long-running and optimized software, is potentially easier to get started with. But if you’re a visual person through-and-through, the learning curve for Webflow is worth it, as its visual editor is more fluid.

Grow your online presence with these resources

However you choose to build a website or digital portfolio, we’ve got the resources to help you make it look professional and intentional. Check out this further reading…

1. Learn more about what a web designer does in this quick explainer.

2. If you use Sketch to produce your web designs, you need these 75 shortcuts for UI designers.

3. Inform your website design using an understanding of UI with this brief introduction.

4. New to Figma? Master playful website design with this course by Pablo Stanley.

5. If you want to sell your work online, check out this e-commerce course by Ellie Rivers.