Целевая аудитория

Webflow – это в первую очередь инструмент для профессионалов. Несмотря на отсутствие прямой работы с кодом, справиться с интерфейсом админ-панели и рядом дополнительных функций, таких как CMS-система или инструменты дизайнера, смогут только опытные специалисты. Зато они получают очень удобный инструмент, который позволяет гибко настраивать формы, логику привязки баз данных, связи между объектами, а также быстро генерировать дизайн, анимации и т.п. в несколько кликов мышкой. Плюс, сразу можно видеть результат своих действий, шансов ошибиться – минимум. Основные фишки для профи: код страниц можно выгружать в HTML-формате (для использования на своём хостинге), прототипы интерфейсов можно демонстрировать заказчикам без полной публикации проекта, а самое главное – можно организовывать ведение сайтов нескольких разных заказчиков, и каждый из них будет оплачивать свои функции и свой хостинг.

Вторая категория клиентов – бизнес-сегмент. Дело в том, что крупные корпоративные клиенты могут нанимать новых специалистов, менять их, сокращать штат и т.д., а кодовую базу при этом поддерживать не нужно. Вы фактически работаете только с интерфейсом сайта, весь бэкенд предоставляется «как сервис». Хостинг работает на базе Amazon Web Services (AWS), это один из столпов облачных услуг. Здесь есть максимальное быстродействие и неограниченные возможности роста. Начинающим web-мастерам Webflow можно использовать разве что для обучения. Наличие готовых шаблонов в каталоге ускоряет процедуру запуска, но не упрощает её.

Функциональные возможности

Логически элементы интерфейса для управления проектами внутри платформы Webflow разделены на три части (три самостоятельных раздела):

Панель управления (Dashboard), сюда вынесены настройки аккаунта и всех проектов пользователя (их можно создавать, клонировать, удалять, передавать в другие аккаунты, перемещать между папками и т.п.).
Интерфейс дизайнера (Design), фактически это web-IDE с массой продвинутых функций для работы с холстом и элементами интерфейса, здесь же задаются основные шаблоны страниц и настройки для CMS-системы, параметры магазина и т.д.
Интерфейс редактора (Editor) – используется для управления содержимым сайта: текстовое наполнение страниц, содержимое блога, управление заказами и товарами магазина, коллекциями баз данных и т.п.

Соответственно, при работе над проектом целыми командами, вы можете разделять права доступа к тем или иным функциям управления. Дизайнеры будут работать только со своими инструментами, редакторы и копирайтеры – со своими, и т.д.

Стоит учитывать, что Webflow не имеет русскоязычной локализации. Интерфейс только на английском. Основное преимущество сервиса: свобода в создании, размещении и настройке внешнего вида как целых секций, так и отдельно взятых элементов (кнопок, иконок, контейнеров для текста и прочего). Конструктор сопоставим по своему функционалу с Adobe Muse и другими профессиональными редакторами. Возможна визуальная вёрстка макетов практически с нуля. Никаких ограничений, минимум шаблонных элементов. Можно вплоть до пикселя выверить параметры слоёв, переходов и прочего. Также здесь очень много возможностей для создания анимаций и интерактивных элементов.

Webflow – это, скорее, сервис для вёрстки макетов, а не конструктор в привычном понимании. Вместе с тем, здесь можно выбрать готовый шаблон, заменить или добавить блоки, настроить цветовую схему и запустить проект своими руками. Но с Webflow вам всё равно придётся учиться работать, пошагово разбирая приёмы оформления и правила взаимодействия между элементами. Можете рассматривать платформу как онлайн-редактор веб-страниц или как web IDE. Сервис подойдёт в первую очередь тем, кто понимает, как верстать дизайн под конкретные проекты с нуля.

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

Ключевые функции Webflow можно описать так:

Генерация чистого HTML/CSS кода с возможностью экспортирования.
Полная свобода для профессиональных дизайнеров.
Готовые эффекты анимации и всё для моушн-дизайна.
Масса бесплатных и платных шаблонов, витрина готовых проектов для примера с возможностью копирования.
Доступ к большому количеству встроенных шрифтов, загрузка своих, интеграция с Google Fonts и Typekit.
Автоматическое масштабирование и адаптация изображений.
Тонкая настройка мобильной версии и поддержка адаптивной вёрстки из коробки для всех готовых элементов.
Аналоги сквозных блоков («символы»), которые подразумевают централизованное управление содержимым и свойствами.
Встроенный функционал CMS системы (гибкие структуры данных, которые можно настроить под свой проект) и возможность выгрузки данных в CSV-таблицы.
Готовый API и интеграции (популярные платёжные системы, системы рассылок и поддержка Zapier, который сам по себе позволяет интегрировать тысячи внешних сервисов без написания кода).
Полная готовность к SEO.
Готовый модуль для интернет-торговли, ведения блога и создания RSS-каналов.
Вставка своего HTML-кода.
Готовая интеграция с CDN-сервисом.
Возможности создания интерактивных прототипов интерфейсов с закрытой демонстрацией заказчикам.
Ведение проектов нескольких клиентов (у каждого из них будет свой план хостинга и изолированный аккаунт).
Функционал групповой работы над сложными проектами с разделением ролей исполнителей.
Автоматическая генерация карты сайта в xml формате и создание robots.txt.
Встроенный поиск по сайту.
Интерактивные обучающие курсы, полностью бесплатные.

Теперь разберём подробнее наиболее важные технические моменты.

Панель управления (Dashboard)

Сюда вы попадаете сразу после авторизации в системе. Плюс, в панель управления можно быстро перейти из Редактора или Инструментов дизайнера (в левом верхнем углу web IDE или в левом нижнем меню Редактора есть пункт переключения между основными интерфейсами).

В панели управления размещаются все ваши проекты (свои сайты или сайты клиентов). Вы можете создавать новые проекты, удалять их, переименовывать, делиться ими, дублировать, раскладывать по папкам и т.д.

Тут же находятся настройки аккаунта, в которых можно:

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

Вокруг Вебфлоу образовалось плотное сообщество дизайнеров, анкеты которых вы можете увидеть, перейдя из дашборда во вкладку «Designers». Здесь их можно нанять для работы над проектом. Примеры классных работ лежат в разделе «Showcase». Многие «кейсы» можно бесплатно форкнуть (скопировать), чтобы не начинать полностью с чистого листа. В разделе «Обучение» (Learn) можно не только пройти бесплатные курсы по работе с платформой, но и повысить свои скиллы в отдельных специальностях.

Плюс, есть также раздел техподдержки (Support), шаблоны (Temlates), сообщество (Community), книги (Ebooks), форум (Forum) и блог (Blog). Они не относятся напрямую к панели управления, но в работе с платформой могут пригодиться.

В настройках выбранного проекта (пункт меню «Settings») можно управлять параметрами конкретного сайта:

имя (название);
технический домен (бесплатный интернет-адрес сайта);
основной часовой пояс и язык;
фавиконка;
отключение копирайта платформы;
статистика сайта и объём израсходованных ресурсов хостинга;
управление подписками на хостинг;
покупка доменов;
базовые оптимизации (минификация HTML/CSS/JS-кода, поддержка SSL, редиректы и т.п.);
настройки прав доступа для редакторов и дизайнеров (при командной работе или при привлечении наёмных специалистов);
управление своими подписками на хостинг или просмотр подписок клиентов;
SEO-параметры (генерация карты сайта, robots.txt, разрешение индексирования и т.п.);
управление формами ввода и уведомлениями из них (включая настройку интеграций);
управление шрифтами (подключение аккаунтов в сторонних сервисах или загрузка своих шрифтов);
просмотр и восстановление бэкапов;
подключение кодов аналитики, пикселей соцсетей и настройка других интеграций;
добавление своих глобальных HTML/JS-кодов.

Структура и возможности визуального редактора (инструментов дизайнера, Designer)

Это не классический WYSIWYG-редактор, это полноценная среда разработки (IDE).

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

В системе широко используется система классов для идентификации объектов с определённым набором свойств. К примеру, можно создать 2 кнопки с разными параметрами, а потом присвоить каждой из них название класса. В итоге, вы сможете добавлять эти кнопки на макет через имя класса, чтобы не переделывать с нуля, соблюдая нужную стилистику. Такое можно проделывать с любыми объектами. Главное – не запутаться в созданных классах. При наведении на объект вы можете выбрать для него класс в поле «Selector» – там будут отображаться и шаблонные, и ваши заготовки.

Правый сайдбар содержит 4 вкладки: первая с классами и опциями стилей объектов, вторая – с настройками для присвоения ID div-блокам и добавления кастомных атрибутов, третья – менеджер стилей с перечнем всех использованных на странице классов элементов (и своих, и стандартных), а четвёртая позволяет добавлять триггеры для объектов и целых страниц, то есть задать их поведение при активации (открытии или наведении мыши). Совокупно такой набор свойств позволяет гибко настраивать дизайн для всех версий (ПК, смартфон, планшет) адаптивного макета.

В левом сайдбаре значок «+» скрывает то, что мы привыкли называть виджетами в других конструкторах. Основными элементами, с которых начинается разметка холста являются: секция, контейнер, сетка и колонки. Среди базовых – div-блок, ссылка, кнопка и маркированные списки. Далее идут заголовки и другие вариации текстовых элементов. Есть возможность подключения коллекций – наборов динамически изменяемых элементов вроде блога или галерей. Это прямой аналог баз данных с контентом в коробочных CMS-системах.

Очень интересный для дизайнеров тип элементов – Символы (Symbols). Они вынесены отдельным разделом. Их ключевое преимущество – возможность централизованного редактирования. Все остальные копии этого же Символа (аналог Ссылки или сквозных блоков) на других страницах или внутри одного макета будут в точности повторять содержимое и стиль родителя. С помощью Символов легко сделать общий футер, шапку, определённую форму, призыв к действию и т.п.

Большое внимание уделено формам – здесь множество виджетов для их подачи и настройки. Есть также привычные медийные элементы вроде картинок, видео (фоновое тоже) и анимаций. Карта, выпадающее меню, табы, слайдер, поиск, виджеты социальных сетей – все в наличии и корректно работают. Также можно вставить свой HTML-код для добавления каких-то кастомных функций либо интеграции сторонних сервисов (калькуляторов, онлайн-консультантов, счётчиков, сервисов уведомлений и т.п.).

Во вкладке со страницами (Pages) вы можете видеть текущую структуру вашего сайта и управлять параметрами конкретной страницы:

выбор в качестве домашней (главной),
название,
SEO-теги (для удобства все изменения отображаются как в результатах поисковой системы),
настройки Open Graph разметки,
индексирование страницы для участия в системе поиска по сайту,
добавление своего HTML-кода.

В общих параметрах редактора есть раздел с бэкапами, которые создаются с заданной периодичностью или при внесении изменений в проект. Пошагово отматывать изменения можно стрелочками в верхнем меню редактора. Текущие изменения в макете перенесутся на работающий сайт только после нажатия кнопки сохранения (Save).

В разделе настроек почты можно выбрать превью и цвета для оформления писем. На бесплатном тарифе в футере писем будет приписка «Powered by Webflow».

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

В верхней панели можно настроить параметры холста (ширины макета) и брейкпоинтов (масок переключения между типами устройств). Тут же можно активировать направляющие макета, показ контуров отдельных объектов и пустых элементов, а также поменять вариант отображение вашей страницы для слабовидящих людей (опция Vision preview).

Если тип вашей подписки позволяет, то вы можете экспортировать код страницы вместе со всеми скриптами и файлами прямо из редактора – кнопка «Export code» (с обозначением ‘< >’).

Возможности редактора материалов (Editor)

Когда макеты дизайна всех страниц готовы к работе, вы можете передать их для ведения копирайтерам и редакторам. Для продуктовой команды предоставляется свой интерфейс управления – Editor.

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

В этом режиме очень удобно добавлять товары и публикации блога, поскольку интерфейс гораздо более простой в сравнении с web IDE для дизайнеров: есть привычный многим WYSIWYG, не нужно отвлекаться на направляющие, CSS-стили, контейнеры и прочие технические составляющие макетов.

Плюс, в этом интерфейсе можно управлять заказами интернет-магазина, добавлять категории, настраивать автоматические уведомления для покупателей и т.п., управлять другими коллекциями данных. Некоторые функции, например, SEO-атрибуты страниц и наполнение настройки магазина, аналогичны функциям в web IDE для дизайнеров.

Возможности eCommerce на Webflow

У Webflow очень функциональный и гибкий в настройках модуль магазина. При его активации система автоматически создаёт коллекции данных (это элемент CMS-подсистемы), страницы для вывода категорий и макеты для отображения отдельных товаров.

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

Подходит для продажи физических и цифровых товаров, услуг.
Товары можно экспортировать/импортировать в формате CSV, причём, образец таблицы для наполнения система выдаёт по нажатию на кнопку «Export».
Есть возможность добавлять поля для категорий и отдельных товаров, менять параметры URL-адреса (для формирования ЧПУ).
В товарном каталоге можно задать разные варианты товаров, комплекты и т.п. А способ оплаты и расчёта доставки привязывать к выбору клиента.
SSL-сертификаты подключаются автоматически. При желании можно загрузить и настроить работу сторонних (профессиональных) сертификатов.
Можно настраивать работу с разными валютами, способами доставки, системами оплаты и т.п. Уже интегрированы платёжные систем Stripe и PayPal.
При желании вы можете задействовать API или Zapier (позволяет интегрировать многие внешние сервисы без написания кода).
Все активные и выполненные заказы легко отследить в интерфейсе редактора.
Благодаря гибким возможностям для работы с дизайном вы можете создать отдельные посадочные страницы для всех своих товаров.
Имеется система рассылки автоматических уведомлений для покупателей и владельца магазина. Шаблоны легко настраиваются. При желании можно интегрировать сервисы массовой рассылки и запустить комплексные маркетинговые кампании.
В каталоге масса готовых шаблонов для интернет-магазинов. При желании можно импортировать купленные макеты из ThemeForest.
Для ускорения массовой работы с SEO-атрибутами можно задействовать шаблоны формирования тайтлов и описаний.
Системы аналитики и интеграции с социальными сетями подключаются в пару кликов.
Имеется встроенная система работы со скидками и купонами.
Процесс работы с модулем магазина сопровождается специальным интерактивным мастером с разбивкой на шаги с подсказками и примерами.

Из минусов: пока нет готовых интеграций с российскими платёжными системами и некоторыми популярными сервисами для электронной коммерции (включая доставку и востребованные CRM-системы), отсутствует работа с платными подписками (этот функционал только планируется). Ну и пока у платформы нет своих мобильных приложений, хотя при полностью адаптивном дизайне это несущественный недостаток.

Обратите внимание: у Webflow действуют ограничения на количество страниц, но этот параметр не распространяется на количество записей в CMS-модуле, к которому и относятся наборы данных магазина. Этот лимит определяется тарифом для хостинга.

Вместо встроенного интернет-магазина вы можете использовать сторонние решения, такие как Ecwid.

Создание блога в Webflow

В отличие от многих профильных блогинг-платформ, у Webflow просто неограниченные возможности работы с дизайном.

Как и все аналогичные CMS-функции, модуль блога добавляется с помощью новой коллекции данных (в интерфейсе дизайнера) – Blog Posts. Параллельно с коллекцией для блога можно добавить наборы данных для работы с категориями (Categories) и авторами (Authors). Хотя они являются необязательными.

В настройках коллекции Blog Posts можно:

задать имя коллекции;
установить начальный префикс всех материалов в блоге (slug);
добавить свои поля (например, для вывода похожих материалов);
удалить ненужные (например, основной цвет для конкретной записи).

Поля «дата создания», «дата публикации» и «дата редактирования» создаются автоматически и не засчитываются в общем лимите для любого тарифа.

Шаблон страницы отдельной записи можно настроить по своему усмотрению. Соответствующий макет можно найти в разделе со страницами – CMS Collection Pages -> Blog Post Template.

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

переходите в интерфейс редактора (Editor);
выбираете вкладку «Blog Posts»;
нажимаете кнопку «New Blog Post»;
в открывшемся окне задаёте свои параметры: название, URL-записи, изображение для превью, основной текст, сокращённый и т.д.;
нажимаете «Publish» («Опубликовать»).

Готово! Вместо немедленной публикации вы можете выбрать вариант с черновиком (Draft), публикацией по расписанию (Schedule) или просто с созданием материала (Create), чтобы опубликовать его позже, например, после утверждения редактором.

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

Для блогов имеется достаточное количество готовых шаблонов, часть из них предоставляется полностью бесплатно.

Новостную ленту внутри ваших страниц можно встроить с помощью готовых виджетов из раздела «CMS Collections».

Единственный недостаток Webflow для ведения блогов – отсутствие встроенной системы работы с комментариями. Но проблема легко решается с помощью интеграции кода сторонних сервисов, таких как Tolstoy Comments или Disqus. Виджет для отображения ленты комментариев и формы ответа достаточно добавить в нижнюю часть макета записи блога (например, после основного текста поста).

Так как функционал блога в Webflow относится к коллекциям данных в CMS, то записи можно экспортировать или импортировать в CSV-формате. Поэтому вы с лёгкостью можете мигрировать сюда с любых других платформ. Или, наоборот, переехать обратно, например, на WordPress-сайт. Интересная фишка для разработчиков – данные можно получать по API, поэтому вы сможете интегрировать сайт на Webflow с любой другой CMS-системой или с мобильным приложением.

Итак, подведём итоги по функциональности Webflow. Порядок работы примерно такой:

Создаётся новый проект.
Верстаются макеты страниц в режиме дизайнера (Designer).
Макеты наполняются или редактируются в WYSIWYG-интерфейсе (Editor).
Проект публикуется.

Данные внутри макетов могут быть статичными или динамическими (функционал CMS и задействование коллекций данных). При необходимости задействуются интеграции и/или подключаются нужные внешние сервисы (аналитика, CRM, сервисы рассылки и т.п.).

Да, Вебфлоу довольно сложен для новичков. Без профильных навыков и знаний здесь не обойтись. Писать код не нужно, а вот проектировать структуру сайта и взаимодействие элементов интерфейса придется. Качество итоговых проектов полностью зависит от навыков разработчика и почти не ограничивается самой системой.

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

Дизайны и работа с шаблонами

Webflow содержит огромное количество готовых шаблонов: их несколько сотен, есть одностраничные и многостраничные варианты, для статических сайтов и для проектов с CMS-функционалом, специально для блога или для интернет-магазина и т.п. Большинство шаблонов платные, стоят от $24 до $149. Бесплатных чуть более сорока.

С помощью шаблонов вы можете быстро запустить:

сайт агентства;
визитку/портфолио специалиста;
интернет-магазин (есть деление шаблонов на разные тематики);
лендинги;
блог;
сайты учебных заведений или онлайн-обучения;
и т.п.

Многие платные шаблоны поставляются вместе с макетами для Figma.

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

Третий, но не менее важный момент – шаблоны можно покупать на сторонней площадке ThemeForest. Приобретённые позиции можно импортировать после настройки интеграции аккаунта ThemeForest по API.

Любой шаблон вы можете изменять и дополнять по своему желанию уже внутри интерфейса для дизайнеров (в web IDE Webflow – инструмент Designer).

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

Вы можете скачать код созданного макета, но не бесплатно. Для этого придется оплатить соответствующую подписку с доступом к экспортированию кода. Вебфлоу может работать в качестве онлайн-редактора визуальной верстки с платной подпиской по модели распространения Adobe Muse.

C полученными HTML-файлами можно делать что угодно. Есть, к примеру, инструменты, позволяющие адаптировать Вебфлоу-шаблоны для WordPress или для других CMS/CMF-систем. А можно просто разместить страницы на хостинге для статичных сайтов, например, на бесплатном GitHub Pages.

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

Какие именно функции будут полезны профессионалам:

Сквозные блоки Symbols (их содержимое меняется одновременно на всех страницах).
Свободное размещение элементов на холсте (без обязательной привязки к секциям, как у многих других онлайн-конструкторов).
Ведение единой структуры элементов внутри выбранной страницы – очень удобно перемещаться и находить нужный блок.
Интеграция с популярными сервисами для получения шрифтов (Google Fonts и Typekit), возможность загрузки своих шрифтов.
Полный доступ к CSS-атрибутам элементов и объединение их с помощью CSS-классов.
Автоматическая адаптивная вёрстка.
Действительно чистый и читаемый код, который генерируется сервисом при выгрузке (экспортировании).
Можно добавить блоки со своим кодом и скриптами.
Доступ к триггерам и продвинутым эффектам анимации (After effects и Lottie).
Встроенная система аудита, которая укажет на проблемные места и пропущенные атрибуты.
Система автоматического резервного копирования.
Адаптивные изображения, которые оптимизируются под размеры контейнера и разрешение экрана пользователя.

Оптимизация (SEO) и продвижение

Webflow автоматически пишет HTML-код страниц на основе макетов, создаваемых в режиме дизайнера и WYSIWYG-редакторе. Код довольно высокого качества, сайты адаптивные, что любят поисковые системы. У каждого проекта есть свои SEO-настройки: правка robots.txt, генерация sitemap.xml, выключение индексирования сайтов на временных поддоменах (формата mysupersite.webflow.io), а также принудительный запрос на верификацию сайта Google.

Каждая страница позволяет задать значения мета-тегов заголовка, ключевых слов и описания содержимого, есть опции для разметки OpenGraph. Каждый блоговый материал и товар магазина тоже содержит SEO-настройки. Можно подключить внешние системы аналитики через вставку кода (Google, пиксель Facebook и т.п.).

Плюс, Webflow поддерживает интеграцию с глобальными CDN-провайдерами, что решает проблему быстрой загрузки сайта в отдельных регионах мира, а также увеличивает их устойчивость к DDoS и другим видам атак.

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

Ценовая политика Webflow (цены на тарифы)

Webflow – сервис с отличным визуальным редактором вёрстки (режим дизайнера) и неплохим WYSIWYG-редактором. Оба инструмента можно использовать бесплатно для тестирования возможностей и тренировки новичков. Но некоторые опции, особенно те, что касаются SEO-оптимизации, вставки своего HTML-кода и привязки с своему домену, окажутся неактивными. Если вы желаете использовать сервис на максимуме и публиковать сайты из личного кабинета на фирменном хостинге – придётся заплатить.

Webflow предусматривает 2 сценария использования - в качестве SaaS-платформы (создание и размещение сайтов на хостинге внутри сервиса) либо в качестве редактора для дизайнеров с возможностью экспорта кода полученных макетов с последующим использованием их где-угодно.

Тарифы для конструктора делятся на обычные и планы для интернет-магазинов, цены за месяц при оплате за год вперёд (20% скидка):

Website Basic ($12/мес) – подключение своего домена, бесплатный SSL, CDN, 100 статических страниц, 25 000 уникальных посетителей в месяц, 100 отправок данных из web-форм.
Website CMS ($16/мес) – активация CMS (динамического контента), 100 статических страниц, 100 000 уникальных визитов, 1 000 отправок данных в формы, 2000 элементов для базы CMS (Collections), доступ к CMS API, поиск по сайту, возможность привлечения 3 контент-менеджеров к проекту.
Website Business ($36/мес) – трафик 500 тыс. посетителей в месяц, 100 статических страниц, 10 000 элементов CMS, 10 контент-менеджеров, возможность загрузки файлов в формы и увеличенные лимиты для запросов по API.

Технические лимиты для всех магазинных тарифов соответствуют плану для CMS. Отличаются комиссии и объём продаж:

Standard ($29/мес) – все возможности тарифа «CMS», а также настройки оплаты, доставки, налогов, 3 аккаунта для менеджеров, интеграция витрины в Facebook/Instagram, настройка форматов Email, ограничение до $50k продаж в год, 2% комиссии с транзакций.
Plus ($74/мес) – все возможности тарифа «Business», а также отсутствие комиссии с транзакций, порог прибыли в $200k/год, отсутствие подписи сервиса в почтовых рассылках, 10 аккаунтов менеджеров.
Advanced ($212/мес) – всё, что в тарифе «Plus», а также 15 аккаунтов для менеджеров магазина, безлимитный годовой оборот, нулевая комиссия с продаж.

Тарифы с доступом к экспорту кода (Account plans) позволяют временно публиковать проекты на бесплатном хостинге для демонстрации, а потом продавать их клиентам. Есть бесплатная версия, на которой начинают все новые пользователи в системе. Она допускает создание 2 проектов, но без экспорта кода. Платные пакеты следующие (оплата за месяц при условии подписки на 1 год вперед):

Lite ($16/мес) – 10 проектов, выставление счетов клиентам, экспорт кода, трансфер проектов на другие аккаунты системы, публикация до сотни статических страниц и 50 динамических элементов на бесплатном хостинге.
Pro ($35/мес) – неограниченное количество проектов, доступ к White Labeling (снятие копирайтов), защита сайтов паролем.

Есть еще Team-планы для командной разработки сайтов. Там разблокировано и разрешено делать все, стоимость в месяц за 1 члена команды - $35. Если нужно добавить более 25 человек, то вступают в силу другие условия, о которых нужно договариваться индивидуально с менеджером сервиса. Это уже Enterprise-тариф.

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

Плюсы и минусы

Webflow хорош в качестве web-редактора сайтов. Он является отличной альтернативой Muse и прочим программам для вёрстки:

Удобный интерфейс web IDE (инструмент для профессиональных дизайнеров).
Отдельный интерфейс для работы с контентом (Editor).
Поддержка встроенной CMS-системы для работы с многостраничными сайтами (блогов, магазинов и т.п.).
Коллекции данных гибко настраиваются под требования клиентов (за счёт произвольного создания дополнительных полей).
Сквозные блоки (Символы) и поддержка сложных анимаций.
Возможность интеграции внешних сервисов (готовые интеграции, API-интерфейс и поддержка Zapier).
Достаточный выбор готовых шаблонов с удобной фильтрацией по тематике и сфере применения. Есть платные и бесплатные варианты.
Поддержка вставки своего HTML-кода и переопределение CSS-классов.
Возможность полностью бесплатного тестирования без ограничений по времени.
Отличные справочные материалы.
Все получаемые макеты являются адаптивными.
Возможность выгрузки (экспортирования) HTML-кода.
Внутри платформы можно вести несколько сайтов разных заказчиков.
Поддерживается работа команд с трекингом активности.
Профессиональных дизайнеров для работы над своим проектом можно нанять прямо из личного кабинета.
Есть встроенный модуль для интернет-магазина и комплексного блога.

Минусы связаны, прежде всего, с тарифами:

Сложные и фрагментированные условия тарифных планов.
Высокая стоимость, особенно у магазинов.
Только англоязычный интерфейс (включая документацию и обучающие видео).
Слабая поддержка российских сервисов для онлайн-коммерции (нет интеграции с платёжными системами, CRM и т.п.).
Бесплатных шаблонов в каталоге в реальности немного (всего около 40 штук).
Высокая сложность интерфейса для дизайнеров (подходит только для профессионалов).
Очень сложно интегрируются и настраиваются функции CMS (с динамическим контентом и коллекциями данных).
На всех тарифах устанавливаются чёткие лимиты, рано или поздно вы можете в них упереться – придётся менять платформу (а сделать это будет крайне сложно, если не задействован функционал CMS).

В целом, Webflow с технической точки зрения – отличный продукт. Но многим новичкам покажется сложным или дорогим – более доступных и удобных альтернатив достаточно. Дизайнеры могут верстать в нём макеты, оплатив минимальный индивидуальный тариф с доступом к экспорту кода, а потом адаптировать их для других CMS. Тарифы с хостингом понравятся только крупным клиентам с большими бюджетами и пониманием того, на чём можно сэкономить (фактически кодовую базу поддерживать не нужно, работу с сайтом могут вести один-два дизайнера или front-end разработчика).

Альтернативы и конкуренты

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

Лучшие аналоги Webflow:

uKit – конструктор, в котором легко создавать бизнес-сайты. Лендинги, визитки, портфолио – те же дисциплины, в которых силён Webflow. Магазины тоже поддерживаются. Да, всё это с шаблонным дизайном, но симпатичным и адаптивным. В удобном визуальном редакторе, без кодинга, непонятных настроек и платных шаблонов. Эти сайты хорошо индексируются, нормально продвигаются, быстро работают. И, что важно, доступны по цене каждому. Сервис подходит и новичкам, и разработчикам клиентских сайтов.

uCoz – мощный конструктор магазинов и блогов. Всё остальное он тоже может, но лучше использовать для больших, перспективных проектов. Тоже довольно сложный и гибкий, требует знаний кодинга. Большие сайты получаются легче, более удобны в администрировании и стоят намного дешевле на фоне Webflow. Готовых шаблонов масса, платных/качественных в том числе. Уступает лишь гибкостью визуального редактора, практически во всём остальном превосходит героя обзора вполне ощутимо.

Wix – хороший конструктор для творческих людей. Его редактор предоставляет приличный простор для настройки дизайна макетов по множеству параметров. Размеры, цвета, ориентация элементов, слои, эффекты, анимации и прочее здесь тоже есть. Зато интерфейс не в пример более простой. Встроенный магазин приложений позволит в пару кликов добавить возможности, а также интеграции сторонних сервисов без кодинга. Шаблоны красивые, их много, редактировать несложно. Дизайнерам и новичкам вариант подходит одинаково хорошо. Здесь тоже есть web IDE (Wix Velo).

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

Примеры сайтов, созданных в Webflow

Проект существует с 2013 года. Дизайнеры со всего мира облюбовали его почти сразу. Примеров работ за 6 лет накопилось множество. Мы взяли некоторые из них для демонстрации возможностей редактора.

Выводы и рекомендации

Webflow — зарубежный SaaS-сервис для дизайнеров. Интерфейс только англоязычный. Может быть использован в качестве платного веб-редактора для создания/экспорта своих шаблонов дизайнерами (от $16/мес) и в роли полигона для упражнений новичков – бесплатно. В формате CMS стоит неоправданно дорого. Функциональность отличная, можно воплотить что угодно. Но для реализации этого потенциала нужны навыки в обязательном порядке – кодинг HTML/CSS и вёрстка макетов.

Стоит ли использовать? Да, для верстки уникального дизайна клиентских сайтов за $16/мес на минимальном индивидуальном тарифном плане. В бесплатной версии пригодится новичкам в качестве редактора веб-страниц – полигона для обкатки навыков в процессе изучения HTML/CSS и пробы сил в дизайне. В формате с хостингом для публикации сайтов сервис нерентабелен, учитывая цену и возможности конкурентов. Учить редактор новичку ради создания 1 сайта для себя – не стоит, это трудозатратно и дорого.

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

Автор: Дмитрий Луценко

Обзор и отзывы о конструкторе сайтов Webflow