Почему мы верстаем только на WebFlow
Мы в 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
Комментарий недоступен