What is Webflow?

In this post, I’m introducing you to Webflow, a website builder that allows you to make the most of your user Interface and web design skills. With Webflow, you can create professional custom and responsive websites, from basic personal portfolio pages to blogs and complex e-commerce stores, without having to write any code! If you are working on a tight schedule, you can also find incredible templates and also save time – and money – using Webflow’s hosting options.

Break the distance between ideation and development: take your project from early sketches to final product launch!  

When you become a BYOL member, you gain access to all my Webflow Essentials Course, as well as my 30+ additional courses on Figma, Photoshop, Illustrator, Lightroom, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

Are you ready to create some responsive magic?!

Follow me!

What is Webflow?

Webflow is a web design platform. This means that it runs on a browser, like Safari or Chrome. Webflow provides a visual editor interface, which means that all code is generated and kept safe in the background, if you eventually need to edit or add anything. The fact that Webflow keeps your code lines all organized and tidy in the background is also great for Search Engine Optimization (SEO) requirements. SEO loves clean code!

Pro tip: It is safe to say that you can create a professional and responsive website, blog, or e-commerce store, with little or no coding skills. However, some basic knowledge of HTML, CSS, and other languages will definitely make you a better designer – and a more ambitious one, always ready to challenge your limits and imagination. If you prefer to focus on design and visual editing, you can always trust any extra coding work to another member of your team or an expert developer, they will add the finishing touches that will raise your project to new levels of awesome!

You can start designing your website from the ground up and create a unique user experience for your clients or use the built-in templates Webflow provides for quick and easy product development, saving time and accommodating lower budgets. Webflow also includes advanced features like custom domains, form submissions, and Content Management System (CMS) options, depending on the plan you subscribe to.

Key takeaway - with an adequate plan, you can design, create, host, launch, update, and manage your websites from within the Webflow platform. Cool, huh?

User Interface (UI) Design vs. Web Design

To explain why both UI design and Web design are vital to product development, I’ll use the “building a house” analogy. If you are asked to build a house, you will ideally start with a blueprint, the detailed drawings and schematics that showcase what this house will look like, how every room fits together, and where all features will be installed, from doors and windows to plumbing and electricity. Next, you show your client the blueprint. If (or when) they asks for changes to your plan, all you have to do is quickly update the blueprint with the new requirements and it’s done! This is User Interface design! Creating quick and easy editable prototypes for testing and iterations, before time-consuming product development actually happens. Web design is taking this finished blueprint and building the house’s foundations, walls, doors, and windows. Can you imagine the time and resources you would waste if you skipped the blueprint design stage?

This is why UI and web design are not competing jobs! Respect and empathy between design and development teams is always the winning ticket! Software like Figma can assist you with UI design, before jumping into the development stage with Webflow.

Getting Started

Webflow is an online-based platform, so you must first register a new account and get familiar with the interface and features. 

Webflow has free and paid plans. While the paid plans are an investment, if you’re aiming to enter the field of web design, you may find the cost is a worthwhile investment. Once you have your account and plan defined, you are ready to go!

User Interface

Welcome to Designer, Webflow’s interface for creating your awesome websites! It’s pretty straightforward and intuitive. You will likely get used to it in a couple of lessons and have your first basic homepage ready in a matter of hours!

Let’s create a new project. Once we open Webflow we start working inside the Dashboard. Click on the + New site button to start building a new website.

We can start from a blank canvas, with full liberty to design our shiny and new idea, or pick from one of the available templates as a foundation. There’s nothing wrong with using templates. They can save huge amounts of time and resources! For the purposes of our tutorial, I am selecting a Blank site.

We are now inside the Designer, Webflow’s website building interface. On the Panels to the left we can find all the tools we need to add and edit all the different functionalities we have envisioned for our site! Webflow is incredible, we can add Elements to our project’s canvas by clicking and dragging from the panel to the workspace! Awesome!

We will come back to Designer in a bit, let’s first have a look at the Project Settings. From this window, we can define and adjust all the settings related to the website we are building. We can explore from General settings, like Name and Subdomain, to SEO, Forms, and Integrations management options. Remember, we are no longer designing mockup prototypes. This is the real deal, and if you want to have a published and functional website, these are the requirements that you must understand and put together, like a true professional. Don’t get stressed, there’s a learning curve to all of this. It’s much easier than it looks, trust me!

Let’s go back to Designer to see more awesome features that will make you believe that there is a web designer inside you, after all! I’ve shown you that we can add website Elements to the project by clicking and dragging from the panels on the left - headings, images, buttons, everything you need to build an efficient and user-friendly website.

If we move to the Layouts tab next to Elements, we will be able to click and drag entire layouts into the project! Editable sticky navigation bars, hero image layouts, cards sections, galleries, footers, and others. You can create a homepage layout in minutes! How awesome is that? Once you have your Layout pieces arranged, you can add Elements into them and continue to add building blocks to your project!

Next, we will have a peek at responsive behavior in Webflow. Responsive design is one of the top challenges that every web designer must keep top of mind. When you are building a website, you must keep in mind that it will be accessed by multiple users, across diverse devices and screen sizes. Contents must remain consistent and accessible, no matter how many times the screen is resized, vertically and horizontally.

What if I told you that Webflow previews your website’s responsiveness in only one single mouse click? Game-changing!

This is just a sneak peek at what Webflow can do and how versatile it’s features are. Sign up for BYOL to access my Webflow Essentials course to dive deeper into web design and (literally) build your own design portfolio!

Collaboration in Webflow

Lone-wolf freelancers and large agency designers have one thing in common, sooner or later, they will need to share responsibilities. Teamwork is key for successful web design. Webflow has collaboration features like Workspaces and Roles to help you streamline workflows, enable all team members to engage with the project, and keep all design solutions and decisions coherent from ideation to launch and updates down the road. Webflow is online-based, so it can be accessed from anywhere in the world, from any computer and browser at any time of the day, individually or simultaneously with others on your team. 

Why will Webflow transform your Web Design work?

• Visual Coding

If you want to build your own websites but you’re still taking your first steps in web design and coding, Webflow is a great option for you. Thanks to its Visual Editor, you can keep endless code lines hidden in the background, drag and drop Elements and Layouts into your project, style their attributes, and get instant responsive previews. All of this within an intuitive UI that will speed up your creative (and development) work!   

• Prototypes, not Mockups

Stop using static mockups to collect feedback from team members, stakeholders, and clients. Share interactive prototypes built on Webflow or UI design apps like Figma and test end-user experience as you develop and iterate your project.

• Quick and Easy Responsive Design

Design for all devices within the same canvas. Use Webflow’s awesome responsive preview feature to observe, in a mouse-click, how your website flows on mobile phones, tablets, and computer screens.

• SEO Features

Web Design and SEO must be combined to ensure successful digital product development. Webflow offers tools to optimize SEO specifically for each website you build, including meta tags and sitemaps.  

• Custom Interactions

You can add customized animations, transitions, and interactions to enhance user experience without having to write a line of code. Awesome interactive elements, quick and easy!

• E-Commerce Partner

You can build a fully functional online store with Webflow. Benefit from agile CMS features, manage inventory and payments, promote and sell your products, all from within one single online platform!

What 's Next?

Go further with Webflow by joining BYOL. As a BYOL member, you will gain access to my Webflow Essentials course, as well as my 30+ additional courses on Figma, Photoshop, Illustrator, Lightroom, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

See you in class! – Dan