Codes and visuals, these are 2 contradictory terms. Yet, I will frequently use them in the same sentence in this article: coding visually to design a website. Is it really possible? I bring you the answer in this guide.

🌈Survey

Do you believe in it? Coding visually to create a website, a mobile application, a software...?

No, that's impossible!

Yes, everything becomes possible when you believe!

Frankly, I don't know. That's what I want to know from your article

Contents

• Visual coding, meaning
• How to code visually
• How to learn visual codes?
• The benefits of coding visually

Visual coding, meaning

You can code visually when you don't need to write lines of code to develop a website, mobile app or software. This is what we also call no code. Instead of manually written codes, all you need is a visual interface with drag and drop functionality.

The no code allows any type of person, whether a programmer, a web designer or an entrepreneur, to easily access the technology.

How to code visually

Use of no code tools

There are obviously specific tools in no code. I talked about them in one of my guides on the main no code tools I know. What we are particularly interested in here is the one that can help us to create a web site: Webflow.

Coding visually with Webflow

I had the opportunity to test different website creation tools in the past, like Wix, Shopify, Wordpress, etc. But Webflow is one of the easiest to handle once you get the hang of it. Because to be honest, there is a "small" learning curve that you have to go through.

To create one, you just have to use a template and then modify it. This is usually done by beginners.

The more experience you gain, the more you are able to create a fully customized website, based on no pre-existing template. In this case, the website templates will serve as sources of inspiration. You then proceed as follows for the creation of sites.

• You create a new project
• You drag and drop all the functions you want to display on the page (hero, buttons, texts, images, videos... in short, standard design elements)

At the same time, a whole range of advanced features is still present:

• animations
• effects
• parallax scrolling
• etc.

Anything that can help you create an interactive website (a blog, an online store, and many others).

Of course, everything is easier if you are guided step by step, so don't hesitate to register for the free training!

Learning to code visually on Webflow

Code visualization

The first time I logged on to Webflow, on its dashboard, I was a bit puzzled. I was told that it was easy to use, but that was not the image that was reflected in its interface. A lot of people feel that way. That's what I see on many reviews posted on the internet anyway.

In fact, learning to code visually can be done easily in Webflow. As you drag and drop functions on a page, lines of code are automatically generated in the background. So, if you want to take advantage of it to learn how to code (HTML, CSS and JavaScript), Webflow allows you to do it entirely.

Indeed, you have access to these codes. You can even export them to import them elsewhere. Each time you change the codes, they are modified instantly. Thus, you will have a better understanding of their meaning.

Please note that once exported, you will not be able to import it back into Webflow.

Community support

Webflow is much more than a no code tool. It is a great community, which I have experienced myself. I saw that all those who share the same passion for creativity, driven by a spirit of mutual help and exchange, are gathered in this community. Here, I am not only talking about the feeling of accomplishment that one can have by knowing that one is part of such a community, but also, the benefits that one can get.

Here's an example: when I get stuck on something, I know where to turn. Of course, to the community. The best part is that there are experienced members on the forum who are willing to help you!

As everything is in English, I have created a private group on Facebook and the community on Circle (accessible through the free training only).

Inspiration models

One of the best ways to learn is also to be inspired by the work of others. It pushes you to try your best, to push yourself and to stay motivated. But what work should you be inspired by? How do you know if a site has been designed on Webflow or not?

I talked to you about community earlier. You should know that the members of this community regularly send their websites to the Webflow site. You are welcome too! Why not post your recent work, the ones you are the most proud of? You will then have feedback that will help you to progress, but also, you will be a source of inspiration for others. Discover the Webflow showcase for this purpose

Webflow University

Finally, Webflow University, the platform that gathers all the information you need to excel on the platform: tutorial videos, tutorial articles, etc. They are detailed, exactly adapted for beginners.

The benefits of coding visually

Webflow is easy and simple to use

Even if you are new to Webflow, you can be sure to master it quickly. It's true that I often say that Webflow is meant for web designers, but in reality, once the learning curve is over, no matter what your job is, you can do it on a simple project.

Webflow is fast

The time between prototyping and building the website doesn't take much longer. You can turn weeks into days!

Besides, as you don't write any code, you save a lot of time in web design. I explained it in the previous part: you just have to drag and drop the elements that make up your future web page. The creation of forms for example does not require any additional action such as: the creation of databases, the connection of this database to the form, etc.

All this is done automatically. All you have to do is focus on research, analysis, surveys... and design accordingly. As for all other elements, there is no technical configuration to be done.

So use this time saving in the best way possible, that is, focus on more important things. For example, you can use it to expand your knowledge of code by viewing automatically generated code in the background, fine-tune your business, learn other skills, etc.

Webflow for a creative site

Webdesigners will find their happiness in Webflow, that's for sure! Instead of focusing on the codes and the technical side of the site, we have a lot of time to think about the design of the site. Especially since the inspiration is huge. We never run out of it!

As I told you earlier, your sites are not limited to simple static sites. To make it easier for people to navigate, take advantage of the fact that you can easily create animations on the page.

In code, you would have used JavaScript, but here you just move, drag and configure each element.

Webflow and the CMS

Managing the contents of a website is not easy. However, it is possible with Webflow. Before, Worpdress was the CMS par excellence. Today, I would say that Webflow is about to surpass it. By the way, I recently wrote a guide on the main differences between Wordpress and Webflow, if you are interested.

More freedom

Webflow also offers great possibilities, for example: with it, the use of third-party extensions is possible. On the marketing side, there is Mailchimp (for integrating forms and sending emails to your subscribers). Then, let's not forget the Elfsight widget (if you want to display the instagram feed of your account on your website). And many more extensions to come.

More autonomy

Let's take a concrete case of risk-taking: landing page design.

I wrote a guide on landing page creation in case you're interested. In it, I mentioned that in order to make a landing page successful, you need to perform different tests (obviously based on the data you have).

During these tests, feel free to test different hypotheses, no matter how big the risks are.

What allows you to take these risks? Well, you have more time (I'll come back to this later) thanks to the ease of use of Webflow. So you can optimize your time.

Serene teamwork

For large projects, you will most likely work with a team:

• editors, copywriters, translators... for all the text content of the site
• other web designers to help you with design ideas
• developers to help you with the technical part (development)
• graphic designers for image content
• marketers
• etc.

Collaboration becomes even easier with Webflow, because you can share access to the project. This way, your tasks will be lightened. It is no longer up to you to manually complete the site creation steps. Each participant fulfills his role, directly on Webflow, a true collaborative tool.

For developers in particular, neither you nor they will have any trouble, thanks to the codes automatically generated by Webflow. All you have to do is export them and then communicate them to the people who need them.

Less expenses

Time is money. With all the simplicity that Webflow offers, you can be sure to save time. Then you'll quickly get your money's worth!

Indeed, learning Webflow (whether free or paid) is worth the investment of effort and time.

A personalized website

You can create an extremely personalized website. Today, thanks to Webflow, you will be able to realize 99.99% of your ideas.

Conclusion

The fact that Webflow is relatively easy to use does not mean that it is devoid of powerful features. On the contrary, this simplicity makes all the difference. It is the one that allows us to code visually, to create a website easily. And for those who are looking for technique, complexity, etc., they will always be served!

Indeed, Webflow has other more sophisticated facets of course.