HEY

Participate in the next Webflow Challenge!

Visual coding: New Eldorado for graphic designers and creatives

Coding visually to design a website. Is it really possible? Coding and visualization are however 2 incompatible words. The answer in this guide

Updated on

6/3/2021

Visual coding: New Eldorado for graphic designers and creatives
Visual coding: New Eldorado for graphic designers and creatives

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.

🌈Sondage

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.

Summary

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:

  • animations
  • effects
  • parallel scrolling
  • etc.

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!

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

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

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.

Webflow University

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.

In code, you would have used JavaScript, but here you just have to 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 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.

More autonomy

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.

Webflow Training

Serene teamwork

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
  • marketers
  • etc.

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.

Less expenses

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.

Conclusion

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.

Coffee break

4 items you might like

FREE TRAINING

Register here to receive the free Discovery Training
.

Start by taking the Discovery Training, where you will learn the basics of Webflow and a taste of what to expect in the Start Weblow training.

Start the free training