Webflow что это такое
Сервис Webflow — конструктор сайтов, который будет писать код за вас
Webflow — современный конструктор сайтов
Конструктор сайтов на английском языке, имеет весьма широкий функционал и отличается качественными анимационными эффектами.
Ищите альтернативу российским сервисам для создания веб-страниц? Предлагаем вашему вниманию конструктор сайтов Webflow, отличающийся широкими возможностями для создания потрясающих элементов веб-дизайна путем переноса блоков в режиме drag-and-drop. Мы уже поработали над несколькими проектами в данном сервисе и ниже поделимся обзором его возможностей с вами.
Что такое Webflow
Webflow.com — это платформа для создания веб-страниц и их публикации, основанная 5 августа 2013 года разработчиками в Сан-Франциско, штат Калифорния. Она отличается от популярных конструкторов сайтов на русском языке таких, как Wix или uKit, тем, что предоставляет пользователю гораздо больше возможностей.
Уникальная особенность Webflow в том, что здесь можно создавать потрясающие анимационные эффекты. Кроме того, в рамках платформы объединены: визуальный редактор веб-страниц, встроенная CMS для быстрого управления контентом и товарами магазина, а также сервис для работы с HTML, CSS и JS-кодом сайта при помощи функции экспорта.
Для каких задач Webflow будет оптимальным выбором
Хоть сервис и работает по всему миру, конструктор лучше всего подойдет в русскоязычном сегменте, чтобы создать проект, а затем перенести его на другой хостинг.
Вебфлоу подойдет для решения следующих задач:
Тем не менее, даже за рубежом многие пользователи предпочитают переносить сайты к другим хостинг-провайдерам, поскольку для этого есть соответствующие сервисы, например, Udesly.
Функциональные возможности платформы
Чтобы подробно рассмотреть возможности Webflow, обратимся к интерфейсу редактора, он во многом напоминает Photoshop.
На панели слева располагаются следующие пункты меню:
Панель справа позволяет изменять любые свойства выбранных объектов на веб-странице. Например, можно переместить объект, сменить размер, шрифт, фон, прозрачность, тени и т.д.
Остальные функции Webflow находятся в разделе Project Settings. Обратить внимание стоит на следующие моменты:
В итоге, Webflow предоставляет пользователю довольно много возможностей. В первую очередь, это продвинутый редактор веб-элементов страницы в режиме drag-and-drop, который имеет массу уникальных инструментов. С другой стороны, есть и стандартные функции: настройки SEO, интеграция с различными сервисами, использование собственного кода.
Стоимость и бесплатный тариф
Цена на Webflow зависит от вида услуги. Всего предусмотрено три варианта оплаты:
Рассмотрим каждый пункт более подробно.
Account
Для аккаунта есть четыре тарифа, включая бесплатный, на котором можно сделать два проекта.
Website
Для контентных проектов есть три тарифа + один бесплатный.
Стоит заметить, что каждый вариант ограничен определенным объемом трафика. Например, через Free-пакет вы можете привлекать не больше 500 визитов в месяц, через Basic — 25 000, CMS — 100 000, Business — 1 000 000.
Ecommerce site
Для интернет-магазинов бесплатного обслуживания нет, только три тарифных плана.
Примеры сайтов на Webflow
На официальном сайте Webflow есть целый раздел «Showcase», где выложены примеры удачных проектов. Разберем несколько из них.
Пример №1. Инновационная продукция для спорта — https://www.leadsportsaccelerator.com/.
Сайт отличается потрясающими анимационными эффектами, которые одним изображением не передать, поэтому вам обязательно стоит увидеть качество самим. Сверху располагается обратный отсчет, чтобы «подогреть» желание клиентов воспользоваться услугами. Ниже уже идет подробное описание проекта, его основателей и участников.
Пример №2. Сайт-визитка битмейкера — http://mecca83-site.webflow.io/.
На фоне главной страницы располагается видео музыканта, который играет на драм-машине, создавая композиции для хип-хоп исполнителей. В разделе Samples можно послушать их примеры, интегрированные с Soundcloud.
Пример №3. Сайт профессионального велосипедиста Скотта Дэвиса — http://scottdavies.co.uk/.
Проект сделан скромно в плане анимационных эффектов, но содержит массу фотографий и довольно качественное портфолио c заездами.
Пример №4. Интернет-магазин кофе — http://ariosacoffee.com/.
Различных визиток на Webflow Showcase очень много, но онлайн-ритейлеры встречаются не часто. Сайт по продаже кофе имеет интересные анимационные эффекты в меню, качественный слайдер. Товары оснащены особым оформлением с различными значками и картой мест, где собраны кофейные зерна.
Пример №5. Сервис по организации активных развлечений — https://www.fit4adventure.com/.
Главная страница имеет слайдер, где показываются видео различных видов отдыха: катание на байдарках, лошадях, подъем в горы и т.д. На сайте можно заказать путешествие на Аляску, в Норвегию, Марокко и другие места.
Плюсы и минусы
Как конвертировать Webflow в WordPress
Отдельно стоит выделить уникальный сервис — конвертер Webflow to WordPress, позволяющий в пару кликов получить готовую тему. В России возможность предоставляется онлайн-школой дизайна Максима Соколова. Чтобы купить ключ активации для этого инструмента, вам нужно будет записаться на бесплатный тренинг. Политика компании такова, что продажи осуществляются только в его рамках.
На момент написания этой статьи конвертер — это единственный вариант реализации CMS для Webflow. Точная стоимость продукта устанавливается онлайн-школой и афишируется только на тренинге, но на сервисах для складчиков часто встречается сумма в 7 000 руб. Как им пользоваться на практике вы можете ознакомиться в следующем видео.
Заключение
В итоге, Webflow — это конструктор сайтов на английском языке, который отличается довольно широким функционалом и качественными анимационными эффектами. В русскоязычном сегменте его чаще используют для того, чтобы сделать проект, а затем экспортировать код, либо конвертировать в WordPress. Судя по урокам онлайн-школы Максима Соколова, таким образом зарабатывают некоторые веб-дизайнеры. По остальным параметрам Webflow почти не превосходит популярные российские конструкторы, да и стоит довольно дорого (от 1300 руб. в месяц).
The site you want — without the dev time
Your website should be a marketing asset, not an engineering challenge.
Webflow is used by more than 3,500,000 designers and teams to create, collaborate on, and scale beautiful websites in a completely visual canvas — noВ coding needed. В
So everyone can focus on what they do best.
Whether you’re a solo designer or an agency team, Webflow gives you the controls you need to build any project that comes your way.
Launch campaigns faster, supercharge your content marketing, and iterate faster with a tool that lets you own website publishing.
Webflow writes clean, semantic, standards-compliant code for you. Push projects further by easily integrating custom code or leveraging our CMS API.
Обзор Webflow: фотошоп для сайтов и Тильда на стероидах
Во фронтенд-разработке участвуют дизайнеры и программисты. Первые придумывают дизайн и рисуют макеты, вторые верстают и программируют клиентскую логику. В сложных проектах или студиях версткой занимаются отдельные специалисты — верстальщики.
В теории это должно повысить качество продукта, но на практике процесс становится сложнее, и нужно согласовывать работу дизайнеров и разработчиков, что может отразиться и на качестве. Получается дорого, долго и нет гарантии качества.
Проблему могут решить конструкторы сайтов. На рынке десятки платформ, и каждая предлагает «собрать красивый сайт за 15 минут». Есть совсем простые решения, есть более функциональные. Но почти все рассчитаны на людей, далеких от разработки и дизайна. Среди них выделяется Webflow, который позволяет собирать страницы со сложным профессиональным дизайном.
В этом обзоре мы разобрались в возможностях платформы и тарифах, сравнили ее с конкурентами и традиционной разработкой сайтов.
Что такое Webflow
Webflow — это облачная платформа, на которой дизайнеры собирают веб-страницы без глубоких знаний в веб-программировании. Страницы можно сразу размещать на хостинге или экспортировать HTML-код и работать с ним дальше.
Нужно владеть HTML и CSS на базовом уровне, чтобы быстрее освоиться и полностью раскрыть возможности платформы. Webflow, в первую очередь, подходит профессиональным дизайнерам и верстальщикам. Для первых это хороший способ повысить стоимость услуг, для вторых — сократить время создания проекта. Но даже если вы делаете первые шаги в дизайне или верстке, освоить Webflow несложно.
В первой версии можно было верстать только лендинги, но позже появилась CMS для блогов и интернет-магазинов. А еще добавили инструменты для работы с анимацией, скриптами на JavaScript и стилями. Основатели Webflow говорят, что одна из целей — передать дизайнерам полный контроль над версткой сайтов.
Что умеет Webflow
На Webflow можно создавать:
Управляют рабочим процессом в дашборде, в котором создают, ищут и удаляют проекты, а также собирают команду для совместной работы. Платформа позволяет прямо из дашборда подключать к проектам дополнительные возможности и делиться ссылками на них. Оттуда же переходим в конструктор.
Как устроен конструктор страниц
Интерфейс конструктора напоминает Photoshop. Основные элементы и действия расположены слева, а инструменты для работы с текстом и эффекты — справа.
Страницы строятся из готовых элементов —чтобы добавить элемент на рабочую область, достаточно на него нажать. Для работы в конструкторе пригодятся базовые знания верстки — в частности, нужно знать разницу между строчными и блочными элементами. А еще не помешает знание основных тегов HTML и свойств CSS.
В разделе Add elements стандартные компоненты, с которыми работают верстальщики и фронтенд-разработчики:
Webflow позволяет создавать динамические страницы с помощью компонента Collection list, в котором отображается содержимое CMS-коллекции. Чтобы управлять контентом на странице, добавьте Collection list и подключите его к CMS во вкладке CMS Collections. Оттуда можно создавать поля с данными, менять их содержимое и добавлять фото и видео.
Во вкладке Navigator отображена иерархия компонентов страницы. Она напоминает DOM-дерево — только проще и нагляднее. Кстати, чтобы узнать место произвольного элемента страницы, нажмите на него, и внизу увидите цепочку родительских элементов.
Сделать онлайн-магазин из страницы можно во вкладке Ecommerce. Платформа автоматически создаст коллекции с товарами и скидками, а также проведет вас за руку с нуля до готового магазина с помощью пошагового гайда.
Витрина и раздел Designers
В разделе Showcase — работы других пользователей. Многие из них можно скопировать и перестроить под свои задачи. Макеты сортируются по темам, популярности и дате публикации.
Webflow, как и другие крупные лоукод-платформы, например, Adalo, поддерживает профессиональное сообщество вокруг себя. Сервис ведет рейтинг дизайнеров, который зависит от количества подписчиков. Работы дизайнера можно посмотреть и прокомментировать в его профиле.
Библиотека шаблонов
Экспорт кода
В разделе Export code отображается HTML-, CSS- и JS-код страниц. В бесплатной версии доступен только просмотр. Работать с кодом или экспортировать можно на одном из платных тарифов.
Webflow генерирует исходники в удобочитаемом формате. Для каждого языка — своя вкладка. Код строго структурирован: переменные вынесены в отдельную область, а вложенность обозначена отступами. Это заметно упрощает работу кодера и верстальщика.
Ограничения Webflow
Webflow — это инструмент веб-дизайнера. На нем нельзя строить ИТ-системы со сложной логикой: в конструкторе нет инструментов для построения сценариев, API и управления базами данных. Чтобы реализовать крутую идею без кода, соберите фронт на Webflow, а серверную часть на Directual или Bubble.
Сколько стоит Webflow
Тарифные планы подобраны таким образом, чтобы пользователь платил только за нужные инструменты. В бесплатном тарифе доступны:
Он подходит для знакомства с платформой и обучения верстке. Но собрать «живой» проект не получится.
Истинная мощь Webflow раскрывается на платных тарифах. Тут платформа предлагает два вида тарифов: site plans и account plans. Site plans подключаются отдельно к конкретному проекту, а account plans расширяют набор инструментов и возможности дизайнера в целом.
Site plans
Эта группа тарифов подключается к конкретным сайтам и расширяет их возможности. У Webflow есть тарифы для блогов, лендингов и интернет-магазинов. Например, одностраничникам, которым не нужна система управления контентом, подойдет минимальный тариф Basic.
Блогу или информационному ресурсу — тариф CMS. Крупному онлайн-магазину с большим количеством товаров нужен тариф Plus с платежной системой и расширенными возможностями для магазинов.
В таблице сравнили три тарифа из линейки Site plans. Больше тарифов и опций на сайте Webflow:
Если предложенных опций не хватает, можно связаться с менеджерами и подключить тариф Enterprise. Как и другие no-code-платформы, Webflow позволяет настроить набор опций под ваши задачи.
Account plans
Вторая группа тарифов открывает дополнительные возможности для специалистов. Эти опции не связаны с Site plans — вы можете оставаться на бесплатном тарифе, но подключить к сайту LIte или Plus. Комбинируйте тарифы, чтобы получить необходимые функции по нужной цене.
Есть планы для фрилансеров и команд:
Нужно больше инструментов? Снова обращаемся к менеджерам Webflow и оформляем тариф Enterprise с дополнительными функциями безопасности, более высокими лимитами посещений и гарантированным временем безотказной работы сайта.
Webflow vs. традиционная разработка
Webflow не претендует на замену языкам разметки и таблицам стилей. Он помогает дизайнерам самостоятельно сверстать сайт с простой механикой, не углубляясь в технические вопросы, и упрощает работу верстальщика.
Раньше дизайнеры создавали макеты в Photoshop и передавали разработчикам, которые превращали их в веб-страницы: верстали на HTML и CSS и строили клиентскую логику на JavaScript. Webflow позволяет дизайнерам собирать, как из кубиков, страницы на языке разметки, минуя отрисовку и согласования с техническими специалистами.
Зачем менять порядок работы, если без кодеров все равно не обойтись? Дело в том, что сверстанная страница не всегда на 100% соответствует макету. А ведь это распространенное требование к работе верстальщика, есть даже такое понятие — pixel perfect.
В Webflow контроль над макетом полностью в руках дизайнера. Он работает в конструкторе почти как в Photoshop, но на выходе получает код. Программисту нужно только «оживить» страницы с помощью JavaScript. Адаптивность тоже на плечах дизайнера: конструктор позволяет отдельно собирать макеты для десктопа, планшета и смартфона.
Задать вопросы по Webflow и пообщаться с экспертами можно в русскоязычном коммьюнити.
Weblflow и конкуренты
Сравним Webflow с другими популярными конструкторами сайтов.
Webflow vs. Wix
Wix — простой drag&drop-конструктор для тех, кто только пробует создавать сайты. Интерфейс понятный, без лишних кнопок и параметров. Новички обычно сразу приступают к работе — берут готовые шаблоны и перекраивают под свои нужды.
Элементы в Wix можно двигать мышью куда угодно, не задумываясь о верстке — еще один плюс для новичков. Платформа вообще заточена под недизайнеров. Большие проекты Wix не потянет — нет ни функций, ни требуемой скорости загрузки. В разделе SEO можно добавить сайт в поисковую выдачу Google.
Webflow, напротив, подходит дизайнерам и верстальщикам. На нем можно собирать сайты любой сложности, рисовать анимацию и управлять контентом. Но с наскока платформу не возьмешь. Профессионалу для уверенной работы понадобится несколько дней, а новичку — до месяца.
В Webflow нет ограничений по оптимизации и работе с кодом. Кроме того, благодаря отсутствию drag&drop сгенерированный код более оптимизирован, чем у Wix — нет лишнего кода для позиционирования компонентов. Отсюда и высокая скорость загрузки страниц.
Webflow vs. Тильда
Тильда — профессиональный конструктор сайтов с растущими возможностями. Платформа приветлива к новичкам: у нее есть drag&drop-конструктор и интерфейс на русском. Webflow пока не локализован, а drag&drop в нем вряд ли появится — это усложнит исходники и ударит по оптимизации сайтов.
Профессионалы любят Тильду за обилие интеграций и виджетов. К сайту на Тильде можно подключить:
Есть и своя CRM-система, а с недавних пор на платформу можно переносить макеты из Figma.
Тильда больше подходит для лендингов, небольших корпоративных сайтов и онлайн-магазинов. Webflow подходит для чего угодно, но весь потенциал платформы раскрывается в крупных проектах. Например, чтобы поменять стиль компонента на всех страницах, в Webflow достаточно сделать это один раз, прописав настройки. В Тильде параметры пришлось бы менять вручную на каждой странице, где есть компонент.
Как компании используют Webflow
Крупный бизнес уже давно использует Webflow в своих проектах. Лучшие кейсы собраны на сайте платформы. Мы расскажем о трех самых интересных.
Dell построили мост между дизайном и разработкой
Отдел Dell по customer experience создает на Webflow прототипы страниц главного сайта и отдельных проектов. Как говорят в компании, платформа помогает преодолеть разрыв между дизайном и разработкой.
Когда-то Dell использовали внутреннюю систему разработки и прототипирования. Но ее поддержка обходилась дорого: нужна была целая команда разработчиков. А для нетехнического отдела это было не под силу.
Cайт dell.com
Тогда решили перейти на внешнюю платформу. У команды было три требования к ПО:
После шести месяцев изучения ПО выбрали Webflow. По мнению дизайнеров, он привносил ясность и точность в их общение с инженерами, поскольку дизайнеры передавали прототипы с кодом, а не просто красивые макеты.
Теперь каждый проект в Dell начинается с прототипов на Webflow, а разработчикам и инженерам остается лишь проверить код. Сократилось время между дизайном и проектированием. Дизайнеры создают полноценные страницы вместо нарисованных симуляций.
Lattice вернули контроль над сайтом
Платформа Lattice воспитывает бизнес-лидеров и предоставляет услуги тимбилдинга крупным компаниям, среди них Reddit, Slack и Asana.
Раньше Lattice платила фрилансеру, который занимался техподдержкой сайта и обновлял контент через свою CMS. Однажды компания решила вернуть контроль над собственным сайтом: рассталась с дорогим разработчиком и переработала сайт на Webflow.
Cайт lattice.com
Команда Lattice content создала обширную библиотеку ресурсов для HR-специалистов, в которой менеджеры сами загружают материалы, без помощи разработчиков и дизайнеров. За два года с момента перехода на Webflow органический трафик на сайте вырос на 280%.
Rakuten SL сэкономили время и деньги
Логистическая компания Rakuten SL сотрудничает с Amazon, Ebay и Shopify, крупными и средними ритейлерами. Офисы компании расположены по всей США.
Команда Rakuten переключилась с WordPress на Webflow, чтобы сэкономить время, деньги на поддержке сайта и заодно решить проблемы с безопасностью.
Cайт rakutensl.com
Глава маркетингового отдела Сара Смит утверждает, что в компании сэкономили тысячи долларов за несколько месяцев после перехода с WordPress на Webflow.
Теперь маркетологи Rakuten SL вносят изменения в сайт всего за 20 минут, а у дорогого программиста это заняло бы 4-5 часов.
Вот каких показателей добились в Rakuten SL благодаря Webflow:
Где научиться работать с Webflow
Еще одна фишка Webflow — богатая база знаний, которая регулярно пополняется.
На странице Webflow University есть видеокурсы для начинающих и опытных фрилансеров. Там научат делать дизайн, строить онлайн-магазины и настраивать SEO.
В блоге компании более 100 обучающих материалов с пошаговыми инструкциями по работе с интерфейсом и советами. А еще есть материалы по дизайну, гайды и вдохновляющие истории пользователей. Все материалы на английском языке, поэтому можно воспользоваться онлайн-переводчиком, если не знаете язык.
Открытых источников на русском пока мало, но есть платные курсы. Учиться по курсам или самостоятельно — решать вам. Опытные фрилансеры, которые хотят познакомиться с платформой, часто разбираются самостоятельно. Тем же, кто только осваивает профессию и хочет правильно в нее войти, лучше учиться по курсам.
Консультировал Денис Бугров — UI/UX-дизайнер, эксперт по Webflow
Webflow — это лоукод-платформа. Тех, кто создает ИТ-решения с помощью ноу- и лоукода, называют зерокодерами. Они за недели создают зполноценные приложения, на которые в стандартной разработке понадобилась бы целая команда и полгода работы. В нашем университете ZEROCODER можно научиться зерокодингу и зарабатывать сотни тысяч рублей в месяц.