Embacy
Daniel Eskin
4990

Почему мы верстаем только на 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": 11, "likes": 12, "favorites": 29, "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 }
Создать объявление на vc.ru
Вебинар «Словения: потенциал инвестирования в недвижимость»
10 апреля Онлайн Бесплатно
0
11 комментариев
Популярные
По порядку
Написать комментарий...
5

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

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

Ответить
1

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

Ответить
4

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

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

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

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

Ответить
1

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

Ответить
2

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

Ответить
2

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

Ответить
0

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

Ответить
1

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

Ответить
1

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

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

Ответить

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

0

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

Ответить
0

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

Ответить

Прямой эфир