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

Что такое Webflow?

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

Иными словами, если у вас имеется хотя бы некоторое понимание, как работать в инструментах дизайнеров, проблем с Webflow не возникнет.

Вместо того, чтобы увеличивать шрифты и отступы при помощи CSS, здесь достаточно воспользоваться уже встроенными в инструмент фичами. Минимальные знания верстки будут преимуществом, но даже это необязательно. Например, в «‎Зерокодере» мы учим студентов использовать функционал конструкторов без строчки кода. Можете убедиться сделав свой первый проект на нашем интенсиве по созданию сайтов. Это бесплатно.

Возвращаясь к Webflow: представьте, что вы собираете из «‎Лего» домик. Вам не нужно вытачивать блоки, потому что они уже есть в наборе. Так и тут: не нужно создавать блоки при помощи кода, потому что они уже написаны и визуализированы. В этой экономии времени заключается огромное преимущество конструкторов сайтов и приложений — и причина, по которой ими пользуются даже программисты.

Основной функционал

После авторизации пользователь автоматически попадает в раздел Dashboard, где можно выбрать основу под будущий сайт. Можно начать как с нуля, сделав полностью уникальный проект, так и воспользовавшись любым из шаблонов. Шаблоны бывают платными и бесплатными.

Дальше — интереснее. Разделов в конструкторе несколько:

🎨 Designing: непосредственно рабочее поле, в котором вы конструируете свой проект, тот самый упомянутый выше визуальный редактор.

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

📝 Editing: здесь сайт наполняется контентом — картинками, информацией из базы данных, контактами и другими необходимыми вещами. Вебфлоу легко подключается к разным БД и автоматически подтягивает из них контент. Например, если вы хотите создать сайт с галереей своих работ, то его можно подключить к облачному сервису Airtable, где вы храните данные. При грамотной настройке все фотографии или иллюстрации будут заливаться на сайт-портфолио автоматически при обновлении исходной базы данных.

Вот и все. Считайте, сайт уже практически готов. Но для помощи начинающим у Webflow есть и другие фичи.

Дополнительный функционал

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

Что в этом поможет:

  • библиотека шаблонов с платными и бесплатными вариантами. В поиск можно вбить «‎portfolio», тогда система выдаст шаблоны по теме. Их достаточно доработать — поменять картинки и цветовую гамму, — чтобы превратить в свой сайт;
  • компоненты, в том числе разработанные другими пользователями. Чем хорош Webflow, так это сплоченным сообществом, которое постоянно создает что-то новое. Библиотека компонентов — это разные фичи, доступные к встраиванию в свой сайт;
  • интеграции, или приложения. Если чего-то не хватает в штатном функционале, это «‎что-то» можно просто подключить. Например, определенного вида иконки, нейросети, Figma, Make и что угодно еще;
  • CMS Collections, или встроенная база данных от Webflow, доступная в платных версиях инструмента. В полях есть все нужное — картинки, видео, редактор картинок, текстовые поля разного рода;
  • возможность экспортировать код. Допустим, вы создали идеальный сайт, раскрутили его, пользователи к нему привыкли и в целом довольны функционалом, но пришла пора перенести его на другой хостинг и в другую админку. В такой ситуации Webflow позволяет все экспортировать для дальнейшего использования.

Вебфлоу может похвастаться визуальным интерфейсом, адаптивностью, чистым кодом без спагетти-элементов, а еще он дружелюбен к SEO-продвижению. У него есть favicon, Meta Title и Meta Description, возможность подключения аналитических инструментов, в том числе Яндекс Вебмастер.

Ложка дегтя

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

Во-вторых, оплатить подписку из России непросто. Придется или получить каким-то образом карту иностранного банка, или воспользоваться услугами посредников. Оплатить Webflow можно, например, через покупку предоплаченной виртуальной карты с фиксированным номиналом. Главное тут — не ошибиться в посреднике. Можно и завести карту дистанционно в банках Казахстана или Турции.

И раз речь зашла об оплате, стоит сказать пару слов о тарифах. ****У Webflow есть бесплатный тариф, позволяющий запустить два сайта. Платные начинаются с $19 ежемесячно. Имеется возможность набрать кастомные функции, общую стоимость которых менеджеры рассчитают отдельно.

Что говорят

На платформе GetApp конструктор Webflow получил 4,6 звезд из 5 на основе 232 отзывов. Плюсами инструмента пользователи называют удобный интерфейс и CMS, возможность интеграции с другими сервисами, мощность, доступность, низкий порог вхождения и практическую пользу для начинающих дизайнеров. Некоторые прямо говорят, что это «‎лучший инструмент для дизайнера из всех, которыми мне доводилось пользоваться».

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

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