Web & app design

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.

A selection of Jan's work, bringing brands to life through dynamic websites.

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).

This screenshot demonstrates the boxes that content appears in when working with Webflow.
This screenshot demonstrates the boxes that content appears in when working with Webflow.

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.

Webflow's visual tools mean you can design on the front-end and see what your visitors will see.
Webflow's visual tools mean you can design on the front-end and see what your visitors will see.

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.

Jan transfers a style guide from Figma to Webflow, ready to turn his design into a finished website.
Jan transfers a style guide from Figma to Webflow, ready to turn his design into a finished website.

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.

Jan's screenshot demonstrates the layout of the Webflow designer, with the navigation panel on the left.
Jan's screenshot demonstrates the layout of the Webflow designer, with the navigation panel on the left.

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.

You can add scrolling animations and more to your images, bringing the website to life.
You can add scrolling animations and more to your images, bringing the website to life.

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.

Recommended courses

Master Figma from 0 to 100. Web, and App Design course by Mirko Santangelo
Domestika Basics · 10 courses

Master Figma from 0 to 100

A course by Mirko Santangelo

From beginner to pro: Master all aspects of Figma - interface setup, plugin usage, text and shape design, prototyping, and collaborating with developers.

  • 7857
  • 100% (44)
83% Disc.
Original price $72CAD
Introduction to Python Programming. Web, and App Design course by Rodrigo Montemayor

Introduction to Python Programming

A course by Rodrigo Montemayor

Learn programming foundations for Python from scratch and find out how to code your first program

  • 5826
  • 98% (120)
90% Disc.
Original price $72CAD
Introduction to AI with Python. Web, and App Design course by Rodrigo Montemayor

Introduction to AI with Python

A course by Rodrigo Montemayor

Learn the basics of artificial intelligence and how to apply it in problem-solving

  • 9756
  • 99% (188)
90% Disc.
Original price $72CAD
0 comments