Мы в Embacy делаем лендинги и сайты, но в нашей команде нет верстальщиков и фронтэндеров. Дизайнеры верстают сами в WebFlow. Обосновываем свой выбор в статье.
О WebFlow
Согласно «Вордстату», запросов WebFlow в 18 раз меньше чем Tilda и почти в 100 раз меньше чем Wordpress. Поэтому рассказываем.
Если в двух словах, WebFlow — это конструктор, в котором можно делать сайты, лендинги, блоги и всё остальное. Это умеют и другие конструкторы, но в WebFlow можно закодить кастомно отдельные элементы, если нужно.
Процесс создания сайта простой, как на любом конструкторе: перемещаешь дизайн-элементы в редактор, задаешь им классы, располагаешь, как нужно, делаешь адаптивы — и сайт готов.
Что ещё есть
- WebFlow University и отзывчивая поддержка. Все вопросы, которые у нас когда-либо возникали, решались одним из этих путей.
- CMS для управления контентом на сайте. Для управления большими сайтами. К ней можно прикрутить бэкэнд.
- Набор шаблонов для сайтов по типам бизнеса. Как бесплатных так и платных, которые удобно разделены по категориям. Удобно для не-дизайнеров. Поэтому в этот раздел мы даже не заходим
Мы пользуемся этим инструментом уже три года.
В WebFlow представлена неплохая библиотека готовых шаблонов, и при необходимости любой шаблон можно кастомизировать, собрать страницы по собственным макетам и продолжать юзать WebFlow в качестве CMS для управления контентом.
Нам нужен был инструмент под задачи агентства
Мы работаем по спринтам. 1 неделя = 1 спринт, за который мы успеваем сделать дизайн и верстку.
Поэтому у нас есть правила, которые помогают придерживаться темпа:
- Сайт должен быть сверстан самим дизайнером. При любых других подходах не всегда получается перенести дизайн из макета в верстку пиксель к пикселю.
- Нам нужно верстать быстро. Потому что скорость — наше главное оружие.
- Финальная работа должна быть кастомной. Другие конструкторы не подходят, потому что сделать что-то, не соответсвующее шаблону платформы, — трудно.
- Мы не хотим вносить правки в контент после завершения проекта. Поэтому мы учим клиентов работать с CMS и самостоятельно менять контент, если нужно.
В итоге WebFlow подошел под наши задачи лучше других решений (других конструкторов и кастомной верстки).
WebFlow vs другие конструкторы
Тем, кто не знает основ верстки, удобнее работать в Tilda и аналогах. Но на WebFlow можно делать шикарные сайты выше уровня, поэтому всем дизайнерам рекомендую изучить базу по верстке и переходить на WebFlow.
Если вы фрилансер, то WebFlow хорош большим количеством международных клиентов и, соответственно, большим заработком.
Плюсы WebFlow
Гибкость платформы
В WebFlow дизайнер не ограничен шаблонами платформы. 95% своих идей дизайнер сможет точно реализовать с помощью WebFlow. Например горизонтальный скролл. Другие конструкторы не такие гибкие.
Прямая интеграция с After Effects
С помощью плагина для After Effects можно очень просто делать сложные анимации. Нужно просто отрендерить её через плагин и прямо с рабочего стола закинуть в редактор. Мы тратим на одну анимацию 20–30 минут.
Удобная работа с классами
В WebFlow элементам можно присвоить класс. Например, нам нужен синий заголовок с шрифтом Proxima Nova 48 кегля. Мы один раз его создаем и называем «синий заголовок с шрифтом Proxima Nova 48 кегля». И каждый раз, когда нам нужен синий заголовок с шрифтом Proxima Nova 48 кегля, мы указываем название класса, и он в один клик становится синим заголовком с шрифтом Proxima Nova 48 кегля.
В других конструкторах нужно отдельно менять каждый элемент: его размер, шрифт, цвет.
Не нужно извращаться в мобильной версии
Большинство трафика приходит с мобайла, поэтому мы много работаем над мобильной версией. Например, перерисовываем иллюстрации и убираем какие-то элементы.
В Tilda на мобильной версии отображаются все элементы десктопа, ты не можешь их убрать, только за экран, в отличие от WebFlow, где есть функция «скрыть». В итоге мобильные версии на Tilda получаются костыльными и дольше грузятся из-за лишних элементов.
Большое количество интеграций
Также WebFlow поддерживает интеграцию с множеством сервисов, например Shopify, Ecwid и так далее, что позволяет встраивать функциональность магазина, CRM-системы, инструментов SMS- и email-рассылок и многое другое.
Несколько лет мы пользовались Tilda и Readymag. Эта связка на должном уровне закрывала наши задачи по созданию веб-страниц.
Но по мере роста скилов мы сталкивались с всё более изощрёнными хотелками заказчиков и всё чаще натыкались на острые углы софта: Tilda оказалась местами неповоротливой, а у Readymag довольно скромная функциональность и ряд форматных ограничений.
Появился запрос на более гибкий инструмент, так мы пришли к WebFlow. И если Tilda это скорее «про маркетинг», то WebFlow однозначно «про дизайн». Бомбический анимационный блок с возможностью импорта ключей из After Effects, куча шаблонов с трендовыми визуальными эффектами, приятный интуитивный интерфейс.
А когда вам понадобится кастомная форма заявки, и вы побежите к своему фронтендеру, он скажет вам спасибо за возможность работать с чистым кодом. На данный момент мы только начали осваивать этот инструмент, но уже видим в нём большой потенциал для реализации самых разных дизайн-задач
Минусы WebFlow
Порог входа
Разобраться в WebFlow сложнее, чем в других конструкторах.
Стоимость.
Мы платим $70 месяц, чтобы два члена нашей команды могли одновременно находиться в WebFlow. Минимальная стоимость — $18 (есть тариф за 12, но он не функциональный). Другие конструкторы стоят в несколько раз дешевле.
WebFlow vs вёрстка кодом
В WebFlow есть лучшие стороны от визуального редактора и чистого HTML.
Дизайнерам удобно работать с понятным интерфейсом, а верстальщикам — с привычными элементами и стилевыми свойствами.
Так получается очень удобный инструмент на стыке двух миров, с помощью которого можно без глубокого знания кода сделать очень приличную, производительную и чистую верстку.
Плюсы WebFlow
Кодинг без кодинга
В WebFlow дизайнер показывает программе, как расположены блоки на макете, и она пишет за него код, который потом можно экспортировать на свой хостинг.
Дешевле
Для сравнения зайдите в раздел с вакансиями на vc.ru и посмотрите зарплату фронтендеров.
Финальная ответственность на дизайнере
Дизайнер и верстальщик — одно лицо, поэтому:
- не размывается ответственность;
- результат такой, как задумывалось;
- нет траты времени и нервов на битву с верстальщиками.
Мы расстраиваемся, когда делаем дизайн без верстки. Прямо сейчас у нас идут две затяжные битвы с внешними верстальщиками.
Минусы WebFlow
Технические ограничения WebFlow
Если вы умеете верстать, то их нет. Если не умеете, то не сможете сделать то, что выходит за базовую функциональность WebFlow кастомно: поиск, слайдер, сложную анимацию.
Абсфуцированный JavaScript
Если вы хоститесь не на WebFlow, а выгрузили код к себе на хостинг, то в него будет сложно внести коррективы, потому что он будет упрощенным.
Одно разрешение для десктопа и одно разрешение для мобайла
Для десктопа и мобайла вам нужно брать за основу только одно разрешение, от которого будут отталкиваться остальные.
С WebFlow можно жить, но есть инструменты лучше.
Из минусов:
— Нет нормального превью изменений. Только катишь в прод и смотришь уже по факту.
— Нет нормальной истории изменений. Хотя бы относительно текущей версии. Сейчас изменения выглядят как «что-то изменилось на главной».
— Нет возможности откатить эти самые изменения, когда они висят в черновике (точнее staged for publish).
— Возможность изменить страницы, которые автоматически генерятся на основе контента — вообще зло. Оно меняется некорректно, выглядит вообще дико. Пишет, что собирается публиковать изменения. А в итоге не сохраняет их (к счастью).
Вывод
Мы верстаем на WebFlow, потому что нам важен кастомный результат при высокой скорости работы.
Рекомендуем WebFlow, если:
- вам важно делать нешаблонные решения быстро;
- у вас сильные дизайнеры и слабые верстальщики;
- давно хотели попробовать что-то кроме Tilda и Readymag.
Не рекомендуем, если:
- у вас сильная команда вестальщиков и фронтов;
- наоборот, никто даже в дизайне не разбирается, а лендинг на Tilda и так конвертит.
Комментарий удален модератором
Да, это классная штука. Сделана дизайнерами как и Фигма, гораздо больше возможностей чем в тильде и редимаге.
Сделали там несколько сайтов. Ну насчет того чтоб прям с нуля там верстать ну это с непривычки не просто. Сложные штуки отдаем ребятам, это быстрее получается. Поправить типографику, картинку или еще что-то в таком духе это запросто.
Комментарий недоступен
Спасибо за фидбек по статье ^^
По вопросу: и в Тильде и в Webflow можно оптимизировать сайт. И у обоих сервисов есть достаточно понятные гайды, как это делать:
1. Tilda: https://tilda.cc/ru/lp/seo/
2. Weblow: https://university.webflow.com/topic/seo
Комментарий недоступен
В тильде можно делать экраны для мобильного и для пк
Привет! Спасибо за статью. Верстаем на вебфлоу довольно много, классный инструмент со своими плюсами и минусами. Вот одна из недавних работ — www.yachty.co
Комментарий недоступен
Я сейчас в webflow делаю эталонный прототип со всеми страницами нашего сервиса m2 https://m-2.webflow.io это просто невероятный продукт!
Красота)
Привет. Дизайн клевый, а формы у меня не работают. Это он не доработан еще или забросили?
Нет не забросил, понемногу дорабатываю и формы пока не прикручивал, это же прототип для обкатки разных продуктовых гипотез и для показа руководству в каком направлении двигаемся и проверка UI и дизайна в целом, но у меня был опыт прикрутки webflow-форм и к Wordpress и к Webasyst и даже к Mailchimp, чтобы все присылалось и работало, сейчас даже почти получилось сделать кастомный инпут-слайдер, в вебфлоу нет слайдеров и нормального управления селектами, приходится тянуть кастомный js и css
и дизайн от супрематики отлично вписался)
Суперматика?
Привет, зашел на платформу, она не работает. Вроде с мая много времени прошло.. проект запустится? хотелось бы на таком сервисе недвижимость посмотреть :)
Пока можно смотреть тут https://www.cian.ru/
"В Tilda на мобильной версии отображаются все элементы десктопа, ты не можешь их убрать, только за экран"
Это не правда. Видимо вы давно не заходили в Tilda. Там настраиваешь видимость блока под разрешение, соответственно для мобилы делаешь одного вида блок, для десктопа - другой блок. И на мобиле ничего лишнего не грузится, только то, чему ты сказал быть видимым на мобильном разрешении. Единственное, в этом моменте есть неудобство: настройка брейкпойнтов отсутствует ибо у них свой набор точек.
Этот Webflow громоздкий с перегруженным интерфейсом "для избраных", чисто технарский продукт, от технорей для технорей. На самом деле он вообще не конкурент конструкторам. Это визуальный редактор "для слабых верстальщиков".
Сложный продукт будет делать фронт энд+бэкэнд. Для всего остального хватит конструкторов сайтов и Тильда в ряду лидеров.
В Тильде осталось чуток дотюнить векторные инструменты и считай Figma.
Автор статьи вероятно не видел, что можно "творить" в Тильда и как видно плавает в знание её продвинутого функционала.
Я не представляю, как можно сравнивать убогую помойку Тильду с WebFlow и тем более с Figma.
Работаю на вф года с 14 и Что мне всегда нравилось в вф так что у него на выходе нормальный читаемый код, в отличии от той же тильды, который легко потом править или натягивать
А как подвязать российские платежные системы в Webflow?
Комментарий удален модератором
Все, решено, теперь буду на вебфлоу верстать. Попробовать точно стоит. К тому же давно в закладках лежит на изучение
Вопрос : А как вы реализовываете «Блог» ? Это делегирование для программиста или вы сами cms может прикручиваете ?
Выгрузить код и натянуть на WordPress. Если хостить сайт на флоу дорого ( + если сделать блог на флоу, он в коде не выгружается)
сайт ваш кончился и ваш "новый" сервис тоже?