Почему Webflow сейчас лучшая программа для веб-дизайна

Почему Webflow сейчас лучшая программа для веб-дизайна

Дисклеймер: Я никак коммерчески не связан с Webflow — ни сейчас, ни ранее. Но я уже почти полгода пользуюсь этой платформой и настоятельно рекомендую ее.

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

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

Webflow — редкое исключение из этого правила. Это инструмент сайтостроителя, созданный по принципу «код в первую очередь», который позволяет пользователям визуально создавать дизайн вебсайта, верстать и запускать его.

Испытав многие другие платформы, я в течение последнего года регулярно работал на Webflow, и с уверенностью могу сказать, что это без сомнения лучший конструктор, который есть сейчас на рынке.

Совершенен ли он? Конечно, нет. Моя бы воля, я кое-какие вещи изменил бы в этом ПО, и о некоторых из них я расскажу ниже.

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

Что такое Webflow?

Webflow стартовал в 2013, пройдя через инкубатор стартапов Y Combinator. Это инструмент для создания качественных адаптивных сайтов без знания кода, простым перетаскиванием объектов мышью.

Он пытается заполнить собой пространство между ресурсами-конструкторами сайтов наподобие Wix и Squarespace, традиционными системами управления контентом (CMS), такими как WordPress, и полноценной фронтенд-разработкой.

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

И вот как это ему удается.

Дизайнер и редактор

Webflow Designer представляет собой интерфейс в духе Photoshop’а, где пользователь может автоматически сгенерировать семантическую разметку путем перетаскивания на холст элементов HTML и задать им свойства CSS.

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

С виду интерфейс у Designer’а довольно сложен, особенно для тех, кто не обладает знанием основ разработки. Однако преодолевшим эту начальную стадию обучения такой инструмент принесет громадную пользу — тем, что может научить их многому.

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

Вместо того, чтобы «абсолютно позиционировать» группы элементов на чистом холсте, он создает контейнеры <section> и <div>, назначает классы CSS и использует такие инструменты современной разметки, как flexbox и grid. И всё это происходит в визуальном редакторе.

В результате сам процесс верстки здесь в сочетании с прекрасными видеоуроками от Университета Webflow может послужить для дизайнера своего рода ступенью для перехода к фронтенд-разработке.

Более того, платформа укомплектована простеньким редактором, с помощью которого клиент может внести несложную правку на свой сайт, не нарушая по ходу дела его структуры!

Система управления контентом Webflow

Возможно, при создании блога на Webflow на подготовительную работу у вас уйдет больше времени, чем потребовалось бы на «родной» блог-платформе вроде WordPress, но результат с лихвой окупит все усилия.

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

Зачастую пользователи скованы ограничениями шаблонов и стилей своих тем, и поэтому для настройки отдельных элементов, например, поля для статьи, приходится либо добавлять сторонние плагины, либо переписывать исходные файлы шаблона вручную.

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

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

Потом, пользователи могут создавать свои Коллекции (Collections), иначе говоря, шаблоны многоразового использования для различных типов динамического контента.

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

Интеракции 2.0

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

Функцию Interactions 2.0 ввели в действие в конце 2017. Она позволяет дизайнеру создавать индивидуальные стили CSS и анимации JavaScript для различных состояний страницы и/или взаимодействий с пользователем.

По сути, это попытка значительно снизить головную боль от манипуляций с деревом DOM в JavaScript, и, по большей части, работает она хорошо.

Создавать интеракции в Webflow гораздо легче (и быстрее!), чем писать индивидуальные анимации JavaScript вручную. Однако, даже после недавнего обновления, на практике это превращается не в самую интуитивно понятную задачу в мире.

Если раньше вы никогда не работали с кодом, особенно в JavaScript, эта функция при освоении Webflow, скорее всего, станет для вас настоящей болевой точкой, поэтому приготовьтесь.

Тем не менее, с помощью этого инструмента вы сможете создавать поразительные анимации, если потратите достаточно времени на его изучение. (Просто познакомьтесь со статьей, где представлены возможности Interactions 2.0!)

Хотя я не могу сказать, что панель Interactions удобна мне на все 100%, я скорее стану работать в ней, чем писать с нуля функции on.Click.

Размещение и хостинг

Хостинг для Webflow предоставляется Сервисами облачных вычислений Amazon (AWS), в чем им оказывает содействие глобальная Сеть доставки содержимого (CDN), управляемая Fastly и Amazon Cloudfront.

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

Все тарифы на хостинг включают в себя бесплатный сертификат SSL, соответствие стандарту HTTP/2, поиск по сайту, управление формами, защиту паролей, автоматическую генерацию карты сайта и автоматическое резервное копирование.

Какая здесь оборотная сторона медали? Хостинг на Webflow не дешев, хотя это все равно меньше, чем вы бы заплатили на других управляемых хостингах вроде WPEngine или Kinsta.

Цена на тариф Basic составляет $15 в месяц и включает в себя большинство доступных функций. Но для того, чтобы воспользоваться системой управления контентом Webflow, вам придется раскошелиться посерьезней, заплатив $20 в месяц за тариф CMS.

Однако вот что радует — если вы придете к выводу, что ни один из этих тарифов вам не подходит (или вы просто не захотите тратить свои деньги) — здесь никаких проблем!

Так как все веб-страницы кодируются в обычных HTML, CSS, и JavaScript, вы не скованы привязкой к какой-либо одной платформе или теме. Просто скачиваете файлы своего сайта и размещаете их у любого провайдера, который придется вам по душе.

Ecommerce (beta)

Последним и самым ожидаемым дополнением к набору инструментов Webflow стал Ecommerce, вышедший в общедоступной бета-версии в ноябре прошлого года.

Дистанцируясь от таких платформ со сравнительно ограниченным функционалом, как Shopify и WooCommerce, Ecommerce от Webflow предоставляет возможность полной настройки всех визуальных компонентов, обычных для типичного Интернет-магазина.

Сюда входят катрочки товаров, страницы их категорий, галереи, корзины для покупок и список просмотренных страниц. На Webflow вы не ограничены в выборе существующих решений в структуре Ecommerce.

Чтобы достичь равного уровня настроек на такой платформе, как Shopify, вам потребуется каждый месяц платить по нескольку тысяч долларов за тариф Shopify Plus и потом еще тратить свое время, чтобы привыкнуть к используемому там языку оформления темы Liquid.

Помимо этого, Webflow Ecommerce предоставляет простые решения для управления комплексными административными функциями — определения региона доставки, высчитывания налогов, учета ассотримента товаров и выполнения заказов.

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

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

Окончательный вердикт

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

Такие функции, как Webflow Designer, CMS и Ecommerce позволяют с легкостью создавать эффективные, обладающие полным функционалом сайты — при этом у пользователя нет нужды знать код самому или обращаться за помощью к разработчикам.

У платформы есть свои недочеты, включающие в себя недостаточно интуитивный интерфейс для анимации и ограниченную функциональность Ecommerce. Но все равно это лучшая платформа для создания сайтов, которая есть сейчас на рынке, и она в полной мере заслуживает вашего внимания.

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

Вы все еще не там? Прекрасно. Поспешите на www.webflow.com и испытайте платформу сами!

Алекс Санчес-Олвера

Источник: https://blog.prototypr.io/why-webflow-is-the-best-web-design-program-right-now-f128aef8b45

Перевод: Hi-Tech English


Комментарии для сайта Cackle
Автор поста:
Соколов Максим
Основатель академии