Why learning Webflow can make you a better designer?

What is this Webflow thing and why should we talk about it?

Webflow is a visual development platform that allows anybody to develop custom websites with a very high level of control over its building blocks.

“Oh, it’s another website builder then” you may say. Well…yes and no. It is true that you can use Webflow as a typical drag & drop template customizer, that’s a “yes” part. Yet, it allows you to create completely unique website experiences for various types of customers and completely avoid relying on templates. You can also use it along with other no-code solutions to create something more complex. Webflow use cases could be a topic for a whole other article, but you can learn more about it here.

Many designers who do not have the coding background feel intimidated to try out Webflow. It may seem too technical and difficult at the beginning. I spent hours talking with different design friends about Webflow and that was the case for many of them (just as it was once for me). And there’s the other thing. Designers often see learning such tool as:

- a huge time commitment,

- not beneficial for their skills as design professionals.

I wrote this article to share with you my own honest experience and the experience of other Webflow professionals. Using Webflow for several years has definitely improved my design capabilities and my work efficiency. I want to show fellow designers that there is nothing to be afraid of to try it out!

P.S. You might want to check out the Bonus section at the end of this article ! I invited amazing Webflow professionals who had been working as designers before to share their thoughts on the topic. So that it’s not just one talking head you know.

So enough chit chatting — let’s go!

Benefit #1 — it helps you make more realistic designs and spot development problems upfront

This has been a big one for me. Using Webflow taught me how to think like a developer during design stage. Before learning Webflow I was sometimes learning from developers that some stuff I design may be tricky to code. While this also can be true today, I can now spot many of such issues way earlier.

Once you have developed a few websites yourself, you will start having “how I would develop this” moments during the design stage.

This enables you as a designer to think few steps ahead and build more scalable solutions. You will also ship faster and improve your relationships with developers. I would say that’s pretty useful.

As you read along, you may find me talking a lot Webflowing as a way of building a bridge between design and development in general. We cannot build this bridge without understanding each other’s work. And as you probably guessed, learning Webflow helps a ton to understand developers!

Benefit #2 — it helps you understand practical responsive web design better

Of course this one may not apply to all designers. There is a good chance many of them do have an awesome understanding of responsive design already. Yet, I spotted a noticeable shift in my approach to responsive web design after learning how to structure a website in Webflow to make my designs scalable.

Let me begin by throwing a stone (and by the way I am throwing it at myself too!). We, as designers, often tend to design our “happy path website” on a 1440 or 1680 px wide artboard. Then we throw in that ultimate 12-column grid and watch it get perfectly aligned. Our design ego is happy. We may also design a mobile version or even few additional versions on different screens. That ultimately leaves developers to figure out the parts in between for themselves. As a result, we can sometimes make life harder than it needs to be with our grid systems. We can also be unnecessarily picky about this or that thing being a pixel off.

The topic of whether we overhype grids or not may again be an another article. I am personally leaning towards the approach Erik Kennedy described here. The main thing we always want is to make sure our designs are well structured and keep scaling well on all devices. My experience is that with most websites (if you build them from scratch without any templates or frameworks) it is much easier to set one/two main containers for your grid boundaries and then adjust them with their inner content to the width of various devices. It may also be easier to consider the .em-based Wizardry technique to save up a ton of time on this!

Regardless of the techniques we may use, developing responsive websites in Webflow has been a great way for me to get out of the “one artboard box”. I am now focused more on alignment and scalability rather than on complex grid systems. On top of that learning Webflow has made me aware of what is a natural way of breaking things on smaller devices. Oh.. and it made me less prone to fight my way over every little pixel if it doesn’t harm the website in a noticeable way.

Benefit #3 — it teaches you how to code in a fun way

I am sure we will all pretty much agree on the concept that it is good for designers to know the basics of front-end development. We want designers to communicate with developers better and produce more realistic designs along the way. Yet, learning HTML, CSS and Javascript can sometimes be a long and theoretical journey. Designers are visual people. It will not be easy and very practical for them to learn inside a code editor without live preview using few rectangles instead of real content. Do not get me wrong here! I am sure there are many coding tutorials that do actually show examples in context though.

If you were to take one thing from this article, take this: you do code in Webflow, you just don’t worry about the syntax in most cases.

You may have heard that Webflow is a no-code tool website builder. The term no-code might wrongly suggest that there is no code involved in using the product. To me it’s better to think about Webflow as a “code tool where you don’t have to write your brackets and semicolons”. Webflow does that very smartly by incorporating html/css language to the interface. If you want your stuff centered you use CSS solutions: flexbox, margin: auto, etc. instead of the ultimate button called “center”.

To illustrate the difference more take a look at the example below. It shows to center an icon inside its wrapper vertically and horizontally using flexbox 👇

Pretty straightforward right? Now to achieve the same effect just with a regular code you would have to write this (and write it without misspelling or missing semicolons/brackets, because code will not forgive such things) 👇

.icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
}

And there we go! So you see that you do actually use the same html/css/js in Webflow while building your website. Of course it is always good to check the code of your published website and be aware of the bits and pieces Webflow creates under the hood too.

The bottom line is that whenever you learn Webflow, you learn front-end development basics alongside.

And you do it all in a fun, visual way! You can see the results of your work on a canvas instantly, quickly preview it on different screen sizes. You want to check a live version and not a preview? No problem, you can publish it to Webflow subdomain with two clicks.

Benefit #4 — it can improve your relationships with developers

I touched that point before, but I think it makes sense to say a thing or two more about it.

I found that developers generally see a designer who actually knows how to code a website as a positive and unexpected surprise. Although it is common to see HTML/CSS/JS as an additional nice-to-have skill for a designer, many designers will barely scratch the surface and move on to focus on more design-related topics. After all it is logical that designers mainly focus on improving their design skills first right?

Learning Webflow helps you to gain this nice-to-have skill in a very practical way. After that your conversations with developers often go to a whole different level.

With knowing your way around coding websites you can start using the language that developers use. I guarantee you the difference between a designer who knows front-end basics theoretically and the one who knows how to build stuff with this knowledge and understand its logic is very easy to spot for any front-end developer. On top of that.. it would make life easier for both sides right?

Benefit #5 — it adds value to your skillset as a design professional

Although I referred to coding as a nice-to-have skill as a designer, let us think about the value it adds for a minute. Whenever we design websites we spend a certain amount of time on:

• discussing the requirements,
• designing the thing,
• documenting it,
• getting feedback

and then overseeing the development part.

When a website goes to a developer that often means:

• Extra cost. Hiring two people to do the same job is usually more expensive as hiring one person to do the same. Simple as that.
• Extra time. We wouldn’t have to oversee anybody’s work and spend time discussing things if we would be developing a website on our own. We also usually don’t have to write separate extensive handoff documentation when we develop the thing on our own.

• Some level of difference between the original project and its coded version. This difference can be minimal when we work with great and attentive developers, but here we would rely only on our own skills and approach. If we make a mistake, we have nobody else to correct!
• Possibly a different understanding of a website and its parts. Developers rarely attend all the client requirements meetings or strategy sessions where the goals of a website are discussed. As a result they will have less overall context which can lead to wrong assumptions during the development stage.

Now if you know how to build a website and are able to develop it fast identically to the project, that is a huge value on many levels. It basically eliminates some or all of the points above. If you are a freelancer, it allows you to raise your rates. After all you do a design and development work now right? There is a good chance you can also work with larger number of clients. Some clients will always look for a designer & developer in one person straightaway to cut the delivery time.

Of course Webflow is not the ultimate answer for building every type of website on the internet. It has several important limitations when it comes to websites that need to be heavy on the content side of things. Check out this video for a general introduction to when to use and when to not use Webflow). However, that still leaves us a huuuge market where we can use Webflow to build websites. Virtually all businesses need an online presence (psst.. a website) these days.

Bonus — let’s hear the others!

I thought it would add great value to this article if I asked design professionals who started using Webflow professionally to share their thoughts here (so it’s not just one guy talking stuff you know..). Below you will find some amazing people sharing their views on whether learning Webflow had any impact on the way they work as designers.

Also be sure to share your experience in the comments as well. I would love to learn about it!

Corey Moen - Brand Designer at Webflow:

‍“There are 2 things that come to mind when considering how learning Webflow made me a better Designer, and specifically a Digital/UI Designer.

1. Since Webflow uses the exact same HTML and CSS properties as writing code I became much more proficient in even writing code when I have to by learning Webflow. Doing so, gave me a far better understanding of how the web works, even with other languages beyond HTML and CSS, and thus gave me a better understanding and respect for the medium I am designing for everyday!
2. Learning Webflow made me a far more organized, strategic and intentional Designer. This is because once you understand the fundamentals of Webflow, you can then go further on understanding what it takes to creator truly clean, semantic and performant websites in it, which requires you to be strategic with how you build layouts and name/use/reuse classes in an efficient way. In contrast, when designing in static tools like Photoshop, Figma, XD, etc. at the end of the day your static design will perform no different in its final state if the layers are a mess and you don’t organize colors, typography, etc…the end user of that mock-up won’t know the difference. BUT, when building for the web as with Webflow, they end user will absolutely know the difference of a poorly structured and built site due to layout bugs, slow loading, non-accessible interactions, etc. so truly refining your skills in Webflow forces you to get organized and strategic in your approach for the betterment of the end user!”.

Leonardo Zakour — Co-Founder & CEO at Refokus:

“I’ve been around for a while, over 15 years in the industry and over 8 years using Webflow. During that time I’ve trained a lot of designers with different skills and backgrounds, and something that it’s always a huge impact on their design work is learning how their designs are getting implemented. Webflow has a huge advantage over all other implementation tools, as the entry point to “learning code” is way lower, allowing designers not only to understand how things are implemented but also to test them. And with Webflow, I’ve seen designers grasping development concepts way faster, as it’s “visual code”. Even though at Refokus we are using Webflow as an implementation tool, it’s super important for designers to have at least a basic understanding of it.”.

Harry Roper - Webflow Designer & Developer, Managing Director of Imaginary Space, YouTube Content Creator:

‍“Webflow allows a designer to take full control of their design. No longer do you have spend time back and forth with developers working on your project. Instead you get the final say and have jurisdiction over every stage of the project. This helps ensure your design stays clear to its vision and does not deviate from the design you spent a lot of time iterating. Full control also leads to full pay and many designers that I know of including myself earn more than the average website designer because they are present throughout the websites entire lifetime”.

Maksim Lobanov - Expert Webflow Devloper & Web Designer:

‍“I could say, that for me being a web designer makes my Webflow experience better. Not opposite. Because you told about “how Webflow can help become a better designer”. I could say that it can’t. =) It’s just a tool for website development. But what works is when the designer learned the basics of HTML5, CSS3, JS. THAT’s changes his level and allows him to design much better, flexible, and professional websites. And THEN a designer can start to use Webflow as a visual HTML editor. That’s how it worked in my case. Webflow will not gonna make you a better designer. But knowledge and practice in HTML5, CSS3 will.”.

Simon Cook - Webflow Expert, Creative Director & Co-founder at Dual Digital:

‍“For many years as an advocate of designing a website in Photoshop, the transition to creating directly in Webflow was a revelation. Not only did it speed up my workflow, but crucially it enabled my clients to sign off on real-world designs that they could properly understand and share with stakeholders, rather than having to interpret how a flat PSD would look in a browser. It’s no exaggeration to say that Webflow has been a genuine industry game-changer.”.

Closing thoughts

“But wait a second, you can say all those about learning front-end development as well, not just about Webflow!”

Absolutely yes and that’s a big part of what Maksim said above. To get back to the benefit #3, learning Webflow means learning front-end basics. Of course learning code besides just Webflow is needed and worth exploring anyway. Yet it really may be easier and more encouraging for designers to learn it through Webflow first. On a whole, it may be easier to grasp, more visual and quicker to be able to put that knowledge into practical use in real-world projects.

Learning and using Webflow has been a great continuing journey for me. It allowed me to change my approach and perception of building websites. It made me aware of many development challenges I had not expected before. It increased my value as a design professional.

It is a great joy to build a working product instead of a prototype, even if it’s just a basic website sometimes.

And one last closing thing for all non-coders out there: there is no need to fear jumping into Webflow or learning code in general. Sure it takes time and it’s definitely harder to grasp upfront than learning design software, but it is not a rocket science that takes years to start understanding! Once you get the logic, it really becomes fun!

I hope this article was useful to you and would love to hear your thoughts about it! I will probably write a step-by-step guide to get started with Webflow, but there are already some awesome resources about it. If you feel encouraged, check out this nice guide and get started playing around with Webflow (no, it’s not an affiliate link 😎).

A huge THANK YOU to all the amazing people who contributed to the article 🙏

That was a long one I know… Huge thanks for reading! Feel free to connect with me any time on Linkedin to have a nice chat and come back to my Medium if you are curious about Webflow & Design stuff 😎

‍