Дизайн  •  13 октября  2022  •  5 мин чтения

Как создать сайт с помощью No-Code и Low-Code

Чтобы создать сайт или приложение, необязательно быть программистом. Запустить продукт можно и без кода знания кода — в этом помогут сервисы визуального программирования.

Что такое No-code и Low-code

No-code и Low-code — это технологии разработки сайтов, мобильных приложений, блогов, баз данных и других продуктов без погружения в код. Работа с этими инструментами не требует знания языков программирования и навыков в разработке ПО.

Суть обеих технологий можно объяснить на примере конструктора и сайта Яндекс Маркета. Каждая карточка товара на маркетплейсе задаётся кодом, его программист пишет вручную. Каждое слово — как деталь конструктора размером 1×1.

Разработчик описывает все параметры карточки товара: её размер, положение на странице, иерархию текста, картинок и кнопок внутри. Карточка собрана из нескольких сотен деталей размером 1×1

No-code и Low-code сервисы автоматизируют работу разработчика. В них не приходится прописывать каждое слово и собирать сайт из деталей 1×1. Можно представить, что кнопка «В корзину» будет деталью 1×4, а картинка — деталью 4×4.

Главное в No-code и Low-code то, что каждая деталь уже написана. Пользователю достаточно разместить нужные «детали» на странице, а код подстроится под выбранную структуру. Такой подход ещё называют визуальным программированием.

Работа No-code и Low-code сервисов построена на шаблонах и готовых блоках. С их помощью можно «запрограммировать» практически любые элементы: корзину на сайте интернет-магазина, форму обратной связи, кнопки, текстовые блоки, таблицы и много других элементов.

Благодаря широкому функционалу No-code и Low-code инструменты используют для создания:

● многостраничных сайтов и лендингов;

● интернет-магазинов;

● блогов и медиа;

● баз данных;

● мобильных приложений;

● сервисов — например доставки еды;

● чат-ботов;

● таск-менеджеров;

дашбордов;

● простых игр.

Разберём No-code и Low-code платформы для создания сайтов и лендингов.

Материал по теме:
Кто такой дизайнер лендингов и как им стать

Чем отличаются No-Cod и Low-Code технологии

Если переводить термины дословно, то No-code — это создание продукта совсем без кода. Такой подход ещё называют Zero-Code, потому что кода там ноль.

No-code платформа предоставляет столько шаблонов и готовых блоков, что полностью закрывает потребность в усовершенствовании продукта «вручную». Но для кастомизации сайта или выполнения сложных задач этого функционала может не хватить.

Например, для сайта по продаже посуды возможностей No-code технологий будет достаточно: карточки товара, описание, кнопка заказа и интеграция с платёжной системой, сложного функционала нет.

Если же сайт разрабатывают для страховой компании, то вряд ли получится обойтись возможностями No-code. Скорее всего, придётся встроить на сайт калькулятор с расчётом страхового взноса, а ещё подтянуть клиентскую базу данных. Для таких случаев больше подходит Low-code программирование.

Low-code в переводе с английского дословно означает «низкий код». В сервисах, которые используют эту технологию, есть возможность дописать код вручную. Если No-code не предлагает шаблона калькулятора для расчёта страховки, то в Low-code сервисе его можно написать и встроить на сайт, и всё будет работать.

Чаще всего No-code решениям не хватает интеграций с разными CRM-системами. Это такие системы, которые помогают контролировать поток входящих заявок, текущие сделки, товары на складе, документооборот. В Low-code сервисах можно «дописать» эту интеграцию вручную.

Написанием кода занимается программист. В крупных компаниях техническое задание для него составляет тимлид, проджект- или продакт-менеджер. В небольших компаниях техзадание для разработчика может составить и дизайнер, но такой порядок работы — скорее исключение, чем правило.

Узнать больше про возможности Low-Code и No-Code сервисов можно на курсе «Дизайнер интерфейсов». Во время прохождения вводной части можно создать с нуля и опубликовать свой первый лендинг.

Особенности Low-code и No-code

У платформ для No-code и Low-code много общего:

Высокая скорость разработки
На разработку сайта с помощью No-code и Low-code требуется от недели до месяца. В классической разработке процесс может длиться месяц, два и три, а в сложных проектах и дольше.

Сроки так отличаются, потому что в классической разработке больше этапов. Сначала дизайнер рисует макет сайта и адаптирует его для мобильной версии. Потом прописывает спецификации для разработчика, то есть объясняет, куда ведёт каждая кнопка, какой должна быть анимация и где используется механика наведения или скролла.

Если визуальных эффектов много, дизайнер тратит время и на разработку интерактивного прототипа. Потом макет отдают в разработку фронтенд- и бэкенд-разработчикам. И только после этого сайт отправляется в продакшн и к пользователям.

Дешевизна
Средняя зарплата мидл фронтенд-разработчика — от 150 000 рублей. Для многих компаний малого и среднего бизнеса нанять даже одного такого специалиста в штат — дорого.

В No-code и Low-code сервисах простейший функционал доступен бесплатно. Стоимость подписки на один из самых популярных No-code сервисов Tilda начинается от 750 рублей в месяц.

Доступность
Платформы No-code и Low-code подходят для непрофессиональных пользователей. Интуитивно понятный интерфейс позволяет собрать первый сайт без курсов и обучения.

Гибкость
Не нужно привлекать разработчиков, чтобы поменять на сайте текст, кнопки или фотографии. Любой элемент можно изменить за пару кликов.

Сообщество
Крупные No-code и Low-code платформы формируют вокруг себя сообщество пользователей и профессионалов. Для новичков предлагают библиотеки знаний и инструкции, чтобы быстрее освоить функционал.

Несмотря на простоту и доступность, у сервисов визуального программирования есть недостатки:

— Зависимость от площадки
У сервиса могут измениться стоимость подписки, условия пользования или доступный функционал. Все проекты, реализованные на платформах No-code и Low-code, зависят от их работоспособности. Не работает платформа — не работают или сбоят построенные на ней сайты.

Сервис может закрыться, и тогда придётся решать, что делать с сайтом и как сохранить пользователей. В некоторых конструкторах есть возможность скачать сайт, чтобы потом развернуть его на отдельном сервере. Например, в Тильде эта функция доступна в самом дорогом тарифе Business и стоит 1000 рублей в месяц. После скачивания исходного кода траты не закончатся: придётся докупить собственный хостинг и домен.

Перенесённый с сервиса сайт будет работать, но управлять его содержимым станет сложнее: менять элементы придётся через код.

— Ограниченность возможностей
С технической точки зрения у платформ неограниченная власть: они сами определяют, какой объём информации может хранить сайт, сколько карточек товара можно создать и сколько пользователей могут зарегистрировать через личный кабинет.

Иногда получается так, что компания начинает разработку на No-code или Low-code сервисе, но постепенно его перерастает. Хорошо, если есть возможность выгрузить код и продолжить его доработку за пределами сервиса. Но если нет, придётся писать сайт с нуля или переносить его на более подходящую платформу.

— Кастомизация
С каждым годом возможности No-code и Low-code программирования растут. Разработчик может дописать код, а дизайнер — изменить внешний вид блоков и шаблона, но эти возможности всё равно ограничены. Если не приложить усилий, сайт будет выглядеть типично и потеряется на фоне тысяч похожих.

На сайте без кастомизации — узнаваемая анимация по скроллу и типичное расположение блоков с текстом и картинками
У сайта с кастомизацией блочная структура сохранена, но шрифты, цветовое оформление и анимация смотрятся лучше, чем в предыдущем примере. Чтобы сделать такой дизайн, требуется больше времени

— Безопасность данных
Особенность No-code и Low-code разработки в том, что код не принадлежит владельцам сайтов. Никто не знает, кто со стороны сервиса имеет доступ к информации компании или её клиентов.

Плюс No-code сервисы часто работают в связке с Google таблицами, а это тоже небезопасно. Если аккаунт в Google взломают, ссылку на таблицу может получить посторонний человек и, например, увидеть всю историю заказов с адресами пользователей.

Преимущества и недостатки No-code

No-code решения позволяют быстро проверить, какой дизайн больше понравится пользователям сайта, какой текст на кнопке даст больше заявок или продаж, какая форма регистрации привлечёт больше зрителей на вебинар. Всё благодаря тому, что элементы легко менять.

Крупные компании используют No-code лендинги и сайты в маркетинговых целях. Например, собирают лендинг под акцию, быстро набирают заявки и снимают страницу с публикации. Через некоторое время её можно опубликовать ещё раз, поменяв условия и даты акции.

В целом у No-code сервисов преимуществ намного больше, чем недостатков.

Преимущества

— Много готовых шаблонов. Так как нет возможности дописать код вручную, платформы стараются предугадать и реализовать все потребности пользователей.

— Идеально подходит для тестирования гипотез. Это важно малому бизнесу и стартапам — часто у них нет лишних ресурсов на проведение тестов, а узнать о предпочтениях покупателей нужно.

— Нет дополнительных затрат на программистов. Создать сайт может любой сотрудник компании, например маркетолог.

Недостатки

— Стандартизация блоков и шаблонов. Формы, шрифты и анимация часто повторяются, и это мешает сайту выделиться среди конкурентов.

Преимущества и недостатки Low-code

Low-Code сервисы по простоте использования мало чем отличаются от No-code. Базовым функционалом Low-Code платформ также могут пользоваться любые сотрудники. С их помощью тоже удобно проводить быстрые тесты и проверять гипотезы. Но кроме этого, у Low-Code сервисов есть свои преимущества и недостатки.

Преимущества

Гибкость. Если на сайте не хватает формы для отзывов, чата, интеграции с CRM — всё это можно дописать вручную.

Если дизайнеру не хватает эффектов, анимации или микромеханик для взаимодействия с пользователем, их можно добавить через код.

Недостатки

Необходимость в профессиональном разработчике. Для полноценного использования Low-Code требуется программист, а в сложных проектах — целая команда разработчиков. Из-за этого создание сайта обходится дороже и длится дольше.

Основные No-Code сервисы

Wix
Международный конструктор сайтов, хорошо адаптированный для русскоязычных пользователей. В конструкторе можно выбрать сайт с готовыми текстами и картинками, а можно взять такой же, но пустой, и заполнить его контентом самостоятельно.
В стартовом меню Wix конструктор предлагает выбрать один из шаблонов для продолжения работы
В Wix можно добавлять как целые блоки, так и отдельные элементы — заголовки, кнопки, списки. Рабочая зона в конструкторе разбита на три секции: хедер, основной блок и футер. Элементы и блоки можно встроить в любой, а потом адаптировать под потребности сайта.
Чтобы добавить блок на страницу, нужно выбрать одну из трёх секций и нажать на кнопку «Добавить секцию» слева

В Wix реализованы все функции для создания полноценного сайта. Но так как сервис международный, им не всегда удобно пользоваться. Например, сложно перемещаться внутри сервиса: чтобы попасть со страницы разработки в личный кабинет, нужно сделать много кликов.

У Wix три тарифа, бесплатных нет. Самый дешёвый тариф «Базовый» стоит 10 евро в месяц и предоставляет пользователю 3 Гб для хранения данных сайта.

Tilda

Пожалуй, самый популярный и простой Low-code сервис. Тильда появилась позже Wix, но это российская компания и в ней проще работать благодаря более понятному интерфейсу.

Тильда использует блочный механизм редактирования. Для создания сайта можно использовать более 550 готовых блоков или взять один из 210 шаблонов страниц и адаптировать для задач компании.

После добавления блоков в Тильде их содержимое можно редактировать, а сами блоки менять местами
Если стандартных блоков не хватает для создания сложной композиции на сайте, можно воспользоваться Zero Block — это инструмент для детальной настройки. В нём задают сетку и создают направляющие, чтобы добавить сложную типографику, прозрачность элементов и наложение слоёв.
После создания Zero Block можно не просто настраивать параметры элементов, а полностью изменять их форму, расположение и внешний вид

Zero Block помогает при создании анимации: можно настроить появление элементов через увеличение или «вылет» снизу, сверху, справа или слева экрана. Есть возможность добавить микромеханики — например анимацию по клику, скроллу или наведению.

У Тильды три тарифа, и есть бесплатный. В нём можно создать один сайт — максимум из 50 страниц. Сервис предоставляет 50 Мб для хранения данных сайта.

Перспективы Low-Code и No-Code

Технологии Low-Code и No-Code быстро развиваются по нескольким причинам:

● совершенствуются технологии в IT — с каждым годом сервисы Low-Code и No-Code предлагают пользователям всё более продвинутый функционал;

● растёт спрос на создание «быстрых сайтов» — таких, которые можно запустить за несколько недель, а не месяцев;

● нет тенденции к удешевлению классической разработки с привлечением фронтенд- и бэкенд-разработчиков. Напротив: из-за нехватки профессионалов стоимость их услуг на рынке растёт и компании ищут способы сэкономить.

Аналитическая и исследовательская компания Gartner прогнозирует, что к 2024 году 65% деятельности по разработке приложений будет вестись с использованием технологий низкого кода.

Информационное агентство GlobeNewswire прогнозирует рост мирового рынка Low-Code и No-Code платформ

Информационное агентство GlobeNewswire прогнозирует рост мирового рынка Low-Code и No-Code платформ до 187 млрд долларов к 2030 году. По сравнению с 10 млрд долларов в 2019 году это рост рынка почти в 19 раз

Совет эксперта

Анна Грязева

Перед тем как принимать решение о создании своего сайта, не спешите сразу делать дизайн и писать код с нуля. Возможно, стоит присмотреться к No-Code и Low-Code и платформам.

Многие скептически относятся к конструкторам сайтов, считая их своего рода «фастфудом». Но точно так же в прошлом люди предпочитали готовить домашнюю еду, а не питаться полуфабрикатами. Сейчас быстрая еда может быть одновременно полезной и вкусной. С No-Code всё точно так же: разработка без кода может значительно сэкономить ресурсы и время компании и при этом дать хороший результат.

Статью подготовили:

Анна Грязева
Яндекс Практикум
Наставник на курсе «Дизайнер интерфейсов»
Мария Соболева
Яндекс Практикум
Редактор

Дайджест блога: ежемесячная подборка лучших статей от редакции

Поделиться

Успейте начать учебу в Практикуме до конца ноября со скидкой 20%

Mon Jul 15 2024 22:03:10 GMT+0300 (Moscow Standard Time)