No-code/low-code: tools to create your own website

I constantly follow trends and novelties in the creative industry, I try my best to keep up with them, constantly develop and learn something new. I believe that there are no extra skills in a designer's work and each mastered technology helps to bring something fresh to work processes.

For me, no code/low code technologies are a great way to implement the web yourself from scratch. That is, to go through all the stages, starting from the design concept to its adaptation for different devices. First of all, such skills for a designer allow you to correctly look at the process of developing website design, as well as take into account all possible nuances when working and interacting with developers. Even if you do not create sites yourself, you will be able to understand in practice how to properly interact with the developer, what is better to do and what not to do.

Secondly, this is another opportunity to pump up your UX skills, because for each design element you take into account functionality, interaction with it from the user's point of view and combine it with aesthetics. Therefore, for a designer in any field, this is like an additional opportunity to improve your skills.

Getting started: Webflow and its benefits

It all started with the fact that we decided to replace some standard presentations with interactive ones to make them look cooler, and started looking for the necessary tool for this. During the search, we were faced with the fact that most of the tools were similar to a more pumped-up PowerPoint. Then the idea came to replace these presentations with landing pages, so we started looking for designers to create them. One of the main tasks was to optimize the process of creating landing pages, so as not to complicate it and not involve developers in it.

I created a list of necessary features, exactly what we wanted to see in these tools. And then the team began to compare different constructors and test them. The favorite in this search was WebFlow, which at the same time rapidly began to gain popularity, since for many creatives it became a replacement for tools such as Readymag and Tilda. Here are a few specific points why Webflow quickly became my favorite:

• It is a powerful tool that offers many features and tools.
• A completely free Starter plan is available to create web pages and publish them online (with certain limits). You can choose a paid plan when you need to add custom hosting, develop a content-driven site, or implement any more complex idea.
• Animation and interactivity. Webflow provides the ability to create various animations and interactive effects on websites. You can use both ready-made presets and create your own animations to make your site exciting for users.
• Integration. Webflow has the ability to integrate websites with many different web services, such as Google Analytics and MailChimp. There is also a pretty cool interaction with Figma, which allows you to transfer your design to the editor quite quickly and easily.
• Saving time. If we need a separate landing page to, for example, tell about the company's expertise, the most optimal solution is to use no code/low code technology and not involve technical experts and additional resources.
• SEO optimization. Webflow provides tools to optimize your website, which allows you to improve its ranking and ensure better visibility for search engines.
• Responsive design. Webflow makes it easy and quick to adjust design responsiveness and appearance for different screens and devices.
• Visual editor. Webflow allows you to create websites using drag and drop elements on the screen. You can quickly adjust styles, colors, animations, fonts and all other necessary elements without using code.
• WebFlow University. Webflow has its own completely free training platform, Webflow University, which contains all the necessary video lessons and training materials, from basic tools to tutorials in website design, creating complex animations and much more. The availability of such materials is a very cool feature, especially for beginners.

We refute myths

There are several misconceptions about no code/low code web development. Myth #1: These tools are only for beginners, not technical experts. In fact, these are cool and powerful technologies that can be used as needed by experienced and professional web developers. These tools allow you to streamline processes, increase productivity, and reduce web development time. For example, the developer no longer needs to code some points: they are already prebuilt in the editor, instead, you can focus in more detail on something else — the interface itself, interactive interaction with site elements, optimization, etc.

Myth #2: You don't need to understand the basics of web development. In general, no code/low code design makes it quite easy to create a website without using code and, on the one hand, it is. Most of these tools are built on a drag and drop interface, where you just need to drag the necessary elements and place them on the editor screen. Everything is automatically adjusted for the mobile version and other devices and optimized for interaction with the user. But the same Webflow is a little more complicated and at the same time quite a powerful tool, when working with which it is important to understand the basic principles of building web pages.

Its interface is slightly different from other usual constructors. If in most tools you just need to drag a ready-made element onto the screen, for example, a slide show element of three pictures, and everything works. Here it is necessary to check the skeleton of the website itself, which consists of basic elements that need to be configured: tags, classes, styles, hierarchy, etc.

The same, for example, applies to animation. A simple animation can be created from ready-made templates, but you can also use other technologies, connect libraries, write or edit code, make 3D animation, etc. To do this, you need to orient yourself in the technical components, and learn at least the basic principles of building web pages — HTML markup, CSS styles, and Javascript.

Pitfalls

For me, the main challenge was to understand all the intricacies and nuances of web page layout, in fact, what I still do. This process takes a lot of time and resources, and requires constant attention. At first, you spend a lot of time studying theory and practice, trying to work with basic tools, understanding how they function and gradually moving on to something more complex.

The second challenge is the implementation of certain elements that require technical knowledge. For example, understand a piece of code or write it, connect an external library, implement complex animation, etc. If it is simple for those who work with it all the time, it can be a challenge for those who are just starting out. On the one hand, the tool itself can become more complex during operation. On the other hand, you yourself become more experienced with him, and that's cool.

With users in mind

Care should be taken to ensure that the elements of the website are accessible to all users. For this, there are several simple rules that must be in our checklist. They mostly boil down to two areas: design principles and website layout. I share a few main and simple points:

• Use a contrasting background for the text.
• Do not use more than three different fonts for one website (unless it is a special design idea). Make sure the fonts you choose are legible.
• You need to make sure that all design elements are fully functional - you should not overload your website with unnecessary decorative elements.
• It is necessary to properly organize the visual hierarchy and use free space.
• When working with text, do not make sentences too long, and break large texts into paragraphs or blocks. Otherwise, there is a risk of making it difficult for the user to perceive and read them.
• Be sure to develop a simple and convenient website navigation, and properly organize the structure of the web page using basic HTML tags such as <header>, <footer>, <body>, <section>, and others. This will allow different readers to understand and display the website correctly.
• Do not forget to set alt text (alternative text) for images. In the event that the image is not displayed to the user, this description will equally allow him to understand what it is.
• I recommend preparing a transcription for audio and video content for users who may be hearing impaired. And if we are already talking about a fully adapted website for users with certain visual impairments or other impairments, a separate version of the website can be provided in compliance with the rules of inclusive design.

Some tips for beginners

It is advisable to break your acquaintance with the technology into several clear steps so that everything happens gradually and consistently:

• Before starting work, be sure to familiarize yourself with the basics of web design. It is necessary to have a clear understanding of how a website is built, what it consists of, and how to properly form its structure. A basic understanding of HTML, CSS, and JavaScript will help you develop a simple website or landing page.
• Choose the most convenient tool that meets your needs. For example, it is convenient for me to make comparison tables, write out the necessary functions and preferences necessary for work. And already after the analysis, choose tools, compare them, test them in practice. If some tools don't have a free trial plan, there's often at least a free trial.
• You don't need to immediately try to make a super complex, complex and trendy website. Instead, start simple. For example, try to make a simple landing page. At this stage, familiarize yourself with the tool, all its technologies and functions, go through all the stages of work from the beginning to going online.
• Don't start designing in the editor right away. First, it is better to develop it completely in Figma, think through all the design elements, their animations, effects, etc. And only after that you can transfer the prototype to the editor. This will help to develop a complete website with a user-friendly design.
• Subscribe to all possible blogs and media with relevant content, follow the news of individual designers and companies. By reading professional content, you will constantly follow industry news, find tips, life hacks and various tutorials for work. Stay up-to-date on new features, integrations, and other news about the tool you're working with and the web in general.
• Get ready for long practice. Development comes only with experience and hard work. Therefore, it is important to devote some time to practical work, develop skills and gradually become cooler and more difficult.

Some conclusions

We see that no code/low code technologies are quite popular today, and they will continue to develop quite rapidly. Most likely, in the future it will be a mix of AI technologies and machine learning, which are already being built into no code tools. We are definitely waiting for a bunch of AI-based tools with the ability to generate text, form images based on prompts, and improve the user's interaction with the website by learning from his behavior. I also expect collaboration with ShatGPT, Midjourney and other popular modern tools — this will 100% happen soon.

Also, the automation of various functions will be further developed, so that the user does something less manually, instead, it is even faster and more efficient to create optimized responsive websites. Overall, given its popularity and many positive aspects, in my personal opinion, no code/low code technologies will be increasingly used by technical and non-technical experts, businesses and designers.