Webflow: функционал и юзабилити платформы для создания сайтов

Webflow — это англоязычная облачная платформа для создания веб-сайтов со встроенным визуальным редактором. На ней можно создавать адаптивные, кастомизированные сайты без написания кода: например, лендинги, корпоративные сайты, портфолио или блоги. При этом на платформе есть доступ к HTML/CSS и другим элементам фронтенд-разработки.

Создатели позиционируют платформу как инструмент, который устраняет привычный разрыв между дизайнерами и разработчиками. В этом Webflow в чём-то похожа на Tilda. С её помощью можно проектировать интерфейсы, продумывать их функциональность, управлять контентом и запускать полноценные сайты.

Помимо дизайнеров и разработчиков, платформой пользуются маркетологи и предприниматели с ограниченным бюджетом на сторонних специалистов. Webflow подходит малому, среднему и крупному бизнесу. Две статические страницы с посещением не более 1000 пользователей в месяц можно создать бесплатно. Есть платные тарифы — их стоимость начинается от 14 долларов США в месяц.

Создавать сайты учат на курсе «Фронтенд‑разработчик». За 10 месяцев студенты с нуля осваивают фронтенд-разработку, учатся пользоваться сервисами для создания сайтов, изучают языки программирования и многое другое. После обучения выпускники получают диплом о профессиональной переподготовке и девять проектов для портфолио.

6. SEO-оптимизация. Для продвижения сайта в поисковых системах предусмотрена возможность ставить метатеги, заголовки, описания, URL-адреса.

Кроме того, сайты, созданные на платформе, оптимизированы под высокую скорость загрузки и соответствуют стандартам безопасности. Webflow предоставляет собственный хостинг, SSL-сертификаты и возможность регистрации домена. Это позволяет не переключаться между сервисами.

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

Интерфейс Webflow похож на редакторы Figma. Он состоит из нескольких панелей:

● Canvas — основное рабочее пространство;
● Navigator — дерево элементов;
● Style Panel — настройка стилей;
● Settings Panel — настройка элементов;
● Assets Panel — управление медиафайлами.

В Webflow, как и в Tilda, можно передвигать и добавлять элементы, передвигая курсор мыши по экрану. Также можно добавлять файлы, картинки, ссылки и т. д. В разделе Assets есть готовые визуальные блоки в стиле выбранного шаблона. Их тоже можно добавить на страницу с помощью перетаскивания.

В левой панели находится навигатор. Он показывает структуру сайта: заголовки, картинки, файлы. Чтобы найти нужный элемент, нужно нажать на строку в структуре навигатора. Тогда платформа автоматически переместит вас к нужному месту на странице.

На платформе можно создавать несколько проектов и подключать команду к их разработке. Каждый проект содержит страницы, шаблоны, коллекции, стилевые классы, компоненты. Также платформа поддерживает совместную работу, разграничение прав (редактор, комментатор, администратор), историю изменений, комментирование элементов, облачное хранение проектов.

У Webflow есть образовательный портал Webflow University. На нём размещены бесплатные видеоуроки для пользователей. Также у платформы есть сообщество Community Forum, в котором специалисты разных уровней делятся опытом.

Помимо создания простых страниц, на Webflow можно создавать полноценные сайты интернет-магазинов, интегрировать их с внешними сервисами аналитики и платёжными системами. Всего можно выделить три полезные дополнительные функции платформы:

1. E-commerce. Webflow позволяет создавать интернет-магазины с каталогом, корзиной, оплатой на сайте и управлением заказами. Платформа больше подходит для небольших и средних онлайн-магазинов. Для масштабных проектов могут понадобиться дополнительные интеграции.

2. CRM и email-маркетинг. Webflow можно интегрировать с Mailchimp, HubSpot, ConvertKit и другими системами для работы с подписками и клиентами.

3. Платёжные системы. Поддержка Stripe, PayPal и других платёжных шлюзов позволяет принимать оплату прямо на сайте.

Также на сайт можно интегрировать системы аналитики — например, Google Analytics и Яндекс Метрику (через настройки проекта или вставку кода).