Embacy
Daniel Eskin

Почему мы верстаем только на WebFlow

Мы в Embacy делаем лендинги и сайты, но в нашей команде нет верстальщиков и фронтэндеров. Дизайнеры верстают сами в WebFlow. Обосновываем свой выбор в статье.

О WebFlow

Согласно «Вордстату», запросов WebFlow в 18 раз меньше чем Tilda и почти в 100 раз меньше чем Wordpress. Поэтому рассказываем.

Если в двух словах, WebFlow — это конструктор, в котором можно делать сайты, лендинги, блоги и всё остальное. Это умеют и другие конструкторы, но в WebFlow можно закодить кастомно отдельные элементы, если нужно.

Процесс создания сайта простой, как на любом конструкторе: перемещаешь дизайн-элементы в редактор, задаешь им классы, располагаешь, как нужно, делаешь адаптивы — и сайт готов.

Панель редактирования WebFlow​

Что ещё есть

  • WebFlow University и отзывчивая поддержка. Все вопросы, которые у нас когда-либо возникали, решались одним из этих путей.
  • CMS для управления контентом на сайте. Для управления большими сайтами. К ней можно прикрутить бэкэнд.
  • Набор шаблонов для сайтов по типам бизнеса. Как бесплатных так и платных, которые удобно разделены по категориям. Удобно для не-дизайнеров. Поэтому в этот раздел мы даже не заходим

Мы пользуемся этим инструментом уже три года.

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

Мария Юркина
CMO for PRAVO TECH, Case.one, 2nd.law

Нам нужен был инструмент под задачи агентства

Мы работаем по спринтам. 1 неделя = 1 спринт, за который мы успеваем сделать дизайн и верстку.

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

  1. Сайт должен быть сверстан самим дизайнером. При любых других подходах не всегда получается перенести дизайн из макета в верстку пиксель к пикселю.
  2. Нам нужно верстать быстро. Потому что скорость — наше главное оружие.
  3. Финальная работа должна быть кастомной. Другие конструкторы не подходят, потому что сделать что-то, не соответсвующее шаблону платформы, — трудно.
  4. Мы не хотим вносить правки в контент после завершения проекта. Поэтому мы учим клиентов работать с 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, куча шаблонов с трендовыми визуальными эффектами, приятный интуитивный интерфейс.

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

Дима Джаман
«FarFor» digital crew

Минусы WebFlow

Порог входа

Разобраться в WebFlow сложнее, чем в других конструкторах.

Стоимость.

Мы платим $70 месяц, чтобы два члена нашей команды могли одновременно находиться в WebFlow. Минимальная стоимость — $18 (есть тариф за 12, но он не функциональный). Другие конструкторы стоят в несколько раз дешевле.

WebFlow vs вёрстка кодом

В WebFlow есть лучшие стороны от визуального редактора и чистого HTML.

Дизайнерам удобно работать с понятным интерфейсом, а верстальщикам — с привычными элементами и стилевыми свойствами.

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

Даниил Мельничук
frontend Qlean

Плюсы WebFlow

Кодинг без кодинга

В WebFlow дизайнер показывает программе, как расположены блоки на макете, и она пишет за него код, который потом можно экспортировать на свой хостинг.

Дешевле

Для сравнения зайдите в раздел с вакансиями на vc.ru и посмотрите зарплату фронтендеров.

Финальная ответственность на дизайнере

Дизайнер и верстальщик — одно лицо, поэтому:

  • не размывается ответственность;
  • результат такой, как задумывалось;
  • нет траты времени и нервов на битву с верстальщиками.

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

Минусы WebFlow

Технические ограничения WebFlow

Если вы умеете верстать, то их нет. Если не умеете, то не сможете сделать то, что выходит за базовую функциональность WebFlow кастомно: поиск, слайдер, сложную анимацию.

Абсфуцированный JavaScript

Если вы хоститесь не на WebFlow, а выгрузили код к себе на хостинг, то в него будет сложно внести коррективы, потому что он будет упрощенным.

Одно разрешение для десктопа и одно разрешение для мобайла

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

С WebFlow можно жить, но есть инструменты лучше.

Из минусов:

— Нет нормального превью изменений. Только катишь в прод и смотришь уже по факту.

— Нет нормальной истории изменений. Хотя бы относительно текущей версии. Сейчас изменения выглядят как «что-то изменилось на главной».

— Нет возможности откатить эти самые изменения, когда они висят в черновике (точнее staged for publish).

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

Дмитрий Шмаков
frontend Revolut, соорганизатор MoscowJS

Вывод

Мы верстаем на WebFlow, потому что нам важен кастомный результат при высокой скорости работы.

Рекомендуем WebFlow, если:

  • вам важно делать нешаблонные решения быстро;
  • у вас сильные дизайнеры и слабые верстальщики;
  • давно хотели попробовать что-то кроме Tilda и Readymag.

Не рекомендуем, если:

  • у вас сильная команда вестальщиков и фронтов;
  • наоборот, никто даже в дизайне не разбирается, а лендинг на Tilda и так конвертит.
{ "author_name": "Daniel Eskin", "author_type": "self", "tags": [], "comments": 22, "likes": 23, "favorites": 102, "is_advertisement": false, "subsite_label": "embacy", "id": 102841, "is_wide": true, "is_ugc": true, "date": "Thu, 23 Jan 2020 20:02:49 +0300", "is_special": false }
0
22 комментария
Популярные
По порядку
Написать комментарий...
5

Да, это классная штука. Сделана дизайнерами как и Фигма, гораздо больше возможностей чем в тильде и редимаге.

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

Ответить
1

Добрый день. Спасибо за статью. Ни разу ни с одним конструктором не работал, но слышал, что например в тильде нормально нельзя работать с оптимизацией сайта. Так ли это? И как с этим обстоит дело в webflow?

Ответить
5

Спасибо за фидбек по статье ^^

 
По вопросу: и в Тильде и в Webflow можно оптимизировать сайт. И у обоих сервисов есть достаточно понятные гайды, как это делать: 

 1. Tilda: https://tilda.cc/ru/lp/seo/ 

2. Weblow: https://university.webflow.com/topic/seo 

Ответить
1

Спасибо большое. Возьму на заметку этот инструмент, так как часто надо быстро сделать дизайн и сайт. 

Ответить
2

В тильде можно делать экраны для мобильного и для пк

Ответить
2

Привет! Спасибо за статью. Верстаем на вебфлоу довольно много, классный инструмент со своими плюсами и минусами. Вот одна из недавних работ — www.yachty.co 

Ответить
0

Классный сайт

Ответить
2

Я сейчас в webflow делаю эталонный прототип со всеми страницами нашего сервиса m2 https://m-2.webflow.io это просто невероятный продукт!

Ответить
0

Привет. Дизайн клевый, а формы у меня не работают. Это он не доработан еще или забросили? 

Ответить
0

Нет не забросил, понемногу дорабатываю и формы пока не прикручивал, это же прототип для обкатки разных продуктовых гипотез и для показа руководству в каком направлении двигаемся и проверка UI и дизайна в целом, но у меня был опыт прикрутки webflow-форм и к Wordpress и к Webasyst и даже к Mailchimp, чтобы все присылалось и работало, сейчас даже почти получилось сделать кастомный инпут-слайдер, в вебфлоу нет слайдеров и нормального управления селектами, приходится тянуть кастомный js и css

Ответить
0

и дизайн от супрематики отлично вписался)

Ответить
0

Суперматика?

Ответить
0

Привет, зашел на платформу, она не работает. Вроде с мая много времени прошло.. проект запустится? хотелось бы на таком сервисе недвижимость посмотреть :)

Ответить
0

Пока можно смотреть тут https://www.cian.ru/

Ответить
2

"В Tilda на мобильной версии отображаются все элементы десктопа, ты не можешь их убрать, только за экран"

Это не правда. Видимо вы давно не заходили в Tilda. Там настраиваешь видимость блока под разрешение, соответственно для мобилы делаешь одного вида блок, для десктопа - другой блок. И на мобиле ничего лишнего не грузится, только то, чему ты сказал быть видимым на мобильном разрешении. Единственное, в этом моменте есть неудобство: настройка брейкпойнтов отсутствует ибо у них свой набор точек.

Ответить
0

Этот Webflow громоздкий с перегруженным интерфейсом "для избраных", чисто технарский продукт, от технорей для технорей. На самом деле он вообще не конкурент конструкторам. Это визуальный редактор "для слабых верстальщиков".

Сложный продукт будет делать фронт энд+бэкэнд. Для всего остального хватит конструкторов сайтов и Тильда в ряду лидеров.

В Тильде осталось чуток дотюнить векторные инструменты и считай Figma.
Автор статьи вероятно не видел, что можно "творить" в Тильда и как видно плавает в знание её продвинутого функционала.

Ответить
1

Работаю на вф года с 14 и Что мне всегда нравилось в вф так что у него на выходе нормальный читаемый код, в отличии от той же тильды, который легко потом править или натягивать

Ответить
1

А как подвязать российские платежные системы в Webflow? 

Ответить

Комментарий удален

0

Все, решено, теперь буду на вебфлоу верстать. Попробовать точно стоит. К тому же давно в закладках лежит на изучение

Ответить
0

Вопрос : А как вы реализовываете «Блог» ? Это делегирование для программиста или вы сами cms может прикручиваете ?

Ответить
0

Выгрузить код и натянуть на WordPress. Если хостить сайт на флоу дорого ( + если сделать блог на флоу, он в коде не выгружается)

Ответить

Блоги компаний

Комментарии
null