Codes and visuals are two contradictory terms. Yet, I will frequently use them in the same sentence in this article: visual coding to design a website. Is it really possible? I bring you the answer in this guide.
Do you believe that? Coding visually to create a website, a mobile application, a software?
No, that's impossible!
Yes, everything becomes possible when you believe in it!
Frankly, I don't know. That's what I want to know through your article.
- Visual coding, meaning
- How to code visually
- How do I learn the visual codes?
- The advantages of visual coding
Visual coding, meaning
You can code visually when you don't need to write lines of code to develop a website, mobile application or software. This is what we also call no code . Instead of manually written code, all you need is a visual interface with drag and dropfunctionality.
The no code therefore allows any type of person, whether a programmer, web designer or even an entrepreneur, to easily access the technology.
How to code visually
Use of tools no code
There are of course 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 website: Webflow.
Visual coding with Webflow
I have had the opportunity to test different website creation tools in the past, such as Wix, Shopify, Wordpress, etc. But Webflow is one of the easiest to use once you get the platform up and running. To be honest, there is a "small" learning curve that you have to go through.
To create one, you just have to base it on a template, and then modify it. Usually it's beginners who do this.
The more experience you gain, the more you are able to create a fully customized site, based on no pre-existing template. In this case, the website templates will serve you as a source 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 functionalities is still present:
- parallel scrolling
Anything that can help you create an interactive website (a blog, an online store, and many more).
Of course, everything is easier if you are guided step by step, so don't hesitate to sign up for the free training!
Learning visual coding on Webflow
Viewing the code
The first time I logged on to Webflow, on its dashboard, I was a bit puzzled. I was praised for its ease of use, and yet that wasn't the image reflected in its interface. A lot of people think so. That's what I see in a lot of reviews published on the internet anyway.
Indeed, you have access to those codes. You can even export them and then import them elsewhere. Each time you change them, the codes are changed instantly. This way, you will have a better understanding of their meaning.
Be careful that once exported, you will not be able to re-import it on Webflow.
Help from the community
Webflow is much more than a no-code tool. It is made up of a very nice 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 sense of accomplishment that comes from knowing that you are part of such a community, but also about the benefits that you can derive from it.
Here's an example: when I get stuck on something, I know where to turn. Of course, to the community. Icing on the cake: there are experienced members who are ready to help you on the forum!
Since everything is in English, I created a private group on Facebook and the community on Circle (accessible through the free training only).
Models of inspiration
One of the best ways to learn is also to be inspired by the work of others. This encourages you to try to give the best of yourself, to surpass yourself and to stay motivated. But what work can you draw inspiration from? How do you know if a site has been designed on Webflow or not?
I told you about community earlier. You should know that the members of this community regularly send their websites to the Webflow website. You're welcome there too! Why not post your recent works, the ones you're most proud of? You'll not only get feedback that will help you move forward, but you'll also be a source of inspiration for others. Check out the Webflow showcase for more information.
Finally, Webflow University, the platform that brings together all the information you need to excel on the platform: tutorial videos, tutorial articles, etc. They are detailed, exactly adapted for beginners.
The advantages of visual coding
Webflow is easy and simple to use
Even if you've only known Webflow for a short time, you can be sure to master it quickly. It's true that I often say that Webflow is intended for web designers, but in reality, once the learning curve is over, whatever your profession, you can get by on a simple project.
Webflow is fast
The time between prototyping and building the website does not take much time anymore. You'll be able to turn weeks into days!
Also, since 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 composing your future web page. The creation of forms for example does not require any additional action such as: creating a database, connecting this database to the form, etc.
It all happens automatically. All you have to do is focus on the research, analysis, surveys... and design it accordingly. As with all the other elements, there are no technical configurations to make.
So use this time saving in the best possible way, i.e. focus on more important things. For example, you can use this time to broaden your knowledge of code by viewing automatically generated code in the background, refine your business, learn other skills, etc.
Webflow for a creative website
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 more than just static sites. To allow users to navigate better, take advantage of the fact that you can easily create animations on the page.
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.
Webflow also offers a wide range of possibilities, for example: with it, the use of third-party extensions is possible. On the marketing side, there is Mailchimp (for the integration of forms and the sending of e-mails to your subscribers). Then, let's not forget the Elfsight widget (if you want to make the instagram feed of your account appear on your site). And many other extensions to come.
Let's take a concrete case of risk-taking: landing page design.
I wrote a guide to the creation of landing page in case you're interested. I mentioned there that to ensure the success of a landing page, you have to perform different tests (obviously based on the data you have).
In these tests, feel free to test different hypotheses , regardless of the extent of the risks involved.
What allows you to take these risks? In fact, you have more time (I'll come back to this later) thanks to the ease of use of Webflow. This way, you can optimize your time.
For big projects, you most likely work with a team:
- editors, copywriters, translators... for everything concerning the text content of the site
- other webdesigners to help you with design ideas
- developers to help you in the technical part (development)
- graphic designers for image content
Collaboration becomes even easier with Webflow because you can share access to the project. This way, your tasks will be lighter. It is no longer up to you to manually complete the steps of site creation. Each participant fulfils his or her role directly on Webflow, a true collaborative tool.
For developers in particular, neither you nor them will have a hard time, thanks to the codes automatically generated by Webflow. Indeed, you just have to export them and then communicate them to the people who need them.
Time is money. With all the simplicity that Webflow offers, you can be sure to save time. That's when you'll pay for yourself!
Indeed, learning Webflow (whether free or paid) is worth the investment of effort and time.
A personalized website
You can create a highly personalized website. Today, thanks to Webflow, you will be able to realize 99.99% of your ideas.
The fact that Webflow is relatively simple to use does not mean that it is devoid of powerful features. On the contrary, this simplicity makes all the difference. It is the simplicity 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 takes on even more sophisticated facets of course.