Преимущества Webflow для веб-дизайна без кода — пример из практики

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

Многие платформы веб-разработки без кода в последнее время приземлились на ландшафте дизайна, как манна небесная. Дизайнеры, стремящиеся «сломать кодовый барьер», наконец-то могут осознать реальность утопического будущего без кода. Если звезды сойдутся, отпадет необходимость передавать проекты разработчикам переднего плана с подробными спецификациями. У дизайнеров будет возможность визуально расположить элементы на артборде и нажать «опубликовать» со вздохом облегчения.

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

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

Большинство профессиональных дизайнеров жаждут возможности быстро проектировать и создавать адаптивные сайты с абсолютным творческим контролем и без касания кода. Этот день может быстро приближаться, поскольку поле битвы за отсутствие превосходства в коде сейчас изобилует горсткой серьезных соперников: Editor X, Bubble, Ceros и Webflow.

Webflow вступил в бой в 2013 году и с годами превратился в зрелый продукт. Запущенный в качестве выпускника акселератора стартапов Y Combinator, Webflow надеется разрушить ландшафт веб-дизайна без кода и представляет мир, «где каждый может создавать мощные, гибкие веб-сайты так же легко, как и документы».

Как заручиться поддержкой заинтересованных сторон

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

Как это удается дизайнерам? Я был продуктовым дизайнером в стартапе B2B, где один разработчик сосредоточился на основном продукте. Компании нужен был маркетинговый веб-сайт, но не было ресурсов разработчика. Мы столкнулись с загадкой: как создать сайт без разработчика? Изучив Webflow и освоив его, я понял, что могу делать это в одиночку .

Я провел выходные, внедряя проекты в Webflow для встречи с заинтересованными сторонами в понедельник. Во время встречи я описал преимущества Webflows и продемонстрировал, как легко перейти от дизайна к коду, создать адаптивный дизайн и быстро что-то изменить. Разработка и запуск веб-страниц займет всего несколько дней.

Я также продемонстрировал возможности CMS Webflow и простоту интеграции SEO. Затем я изложил экономию затрат одного дизайнера, реализующего все без дополнительных затрат на привлечение нашего разработчика. Они были проданы.

Это также была возможность восстановить полный творческий контроль. Я больше не был просто дизайнером, создающим макеты в Sketch и передающим дизайн разработчику. Эта новая парадигма превратила меня в локомотив веб-разработки: я мог проектировать, создавать, тестировать, настраивать, внедрять SEO, A/B-тестирование и публиковать сайт. Это придало мне сил и дало мне более сильный голос в компании.

Практический пример дизайна веб-потока

В Upvest, помимо разработки основных продуктов компании, я также отвечал за визуальный брендинг. Это включало адаптивный веб-сайт компании, который должен был обеспечивать частые обновления. Upvest был стартапом на ранней стадии, и продукт все еще развивался. Таким образом, нам нужно было создать и A/B-тестировать различные маркетинговые страницы. Нам также нужно было размещать статьи в блогах с помощью системы CMS и запускать специальные целевые страницы для различных рекламных акций.

Кроме того, дело осложнялось тем, что в первые дни компания совершила несколько разворотов. Он прошел путь от продажи API до создания кошельков с блокчейном и предложения «токенизации активов» компаниям, занимающимся недвижимостью. Следовательно, по мере того, как мы продвигались вперед, мне пришлось разрабатывать различные целевые страницы в Webflow.

Нажмите, чтобы увидеть полноразмерное изображение.

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

Как только все согласились с визуальным оформлением веб-сайта, я создал руководство по стилю в Webflow, которому мы все могли следовать. Я также настроил различные классы и многоразовые символы для последующих сборок страниц. Символы Webflow работают аналогично символам Sketch и основным компонентам Adobe XD. Когда символ обновляется, все остальные экземпляры этого компонента в проекте отражают это обновление.

После запуска первого веб-сайта я становился все более и более удобным с Webflow. Чтобы отслеживать различные показатели, я научился устанавливать инструменты измерения, такие как Google Tag Manager и Hotjar. Скорость, с которой я мог собирать различные маркетинговые активы, также улучшилась. Компании нужно было тестировать различные макеты и контент по мере развития продукта, а Webflow позволял менять дизайн и быстро запускать его, не полагаясь на разработчиков.

Нажмите, чтобы увидеть полноразмерное изображение.

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

Как и в случае со многими другими дизайнерами, я предпочитаю Sketch. Когда все было готово, я делился проектами с различными заинтересованными сторонами для ознакомления. Как только они их одобряли, я реализовывал их в Webflow. Через некоторое время я настолько освоился с Webflow, что мне не нужно было использовать Sketch. Всякий раз, когда появлялся новый проект, я сразу запускал Webflow. Этот новый рабочий процесс сэкономил стартапу, испытывающему нехватку денег, много времени и денег. Например, я создал следующие целевые страницы полностью в Webflow для маркетинговой кампании по привлечению потенциальных клиентов.

Для нужд нашего блога я поделился с заинтересованными сторонами некоторыми основами Webflow и показал им, как использовать его CMS. Как только им это стало удобно, они стали сами загружать статьи в блоги. Воспользовавшись функцией Webflow CMS Collections, я уже настроил систему; им просто нужно было добавить контент для статей и сделать их живыми.

Нажмите, чтобы увидеть полноразмерное изображение.

Включение Webflow в процесс проектирования

Включить Webflow в процесс проектирования очень просто. Более того, многие этапы традиционного проектирования можно исключить, особенно в конце. Нет передачи разработчика. Исключение только этого последнего этапа значительно экономит время — больше не нужно «красных черточек» и работы над спецификациями.

Если дизайнеры привыкли создавать каркасы, прототипы и дизайн пользовательского интерфейса с помощью Sketch/XD/Figma, они могут чувствовать себя более комфортно в этом рабочем процессе. Тем не менее, они могут захотеть перейти прямо в Webflow , собрать проекты и протестировать их в браузере с помощью промежуточной ссылки, особенно для небольших проектов. Все дело в балансе потребностей, так как в зависимости от масштаба создание проектов в Webflow может занять больше времени, чем при использовании другого метода. Для экспериментов с дизайном, таких как A/B-тестирование или многовариантное тестирование, также может иметь смысл перейти непосредственно в Webflow — спроектировать, построить и протестировать там.

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

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

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

Отсутствие инструментов кодирования сокращает количество времени и навыков кодирования, необходимых для воплощения идеи в то, что люди могут использовать. Вам больше не нужно становиться программистом, чтобы создавать вещи, расширяя возможности новой волны разработчиков с разным опытом и взглядами. Райан Гувер, основатель Product Hunt, в книге «Восхождение без кода»

Преимущества Webflow для веб-дизайна

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

Преимущества вебфлоу:

• Сжатая временная шкала. Более быстрый путь от идеи к дизайну, прототипированию и MVP.
• Webflow устраняет разрыв между дизайном и контентом. Он позволяет писателям, редакторам и маркетологам мгновенно обновлять контент на веб-сайтах.
• Дизайнеры могут создавать прототипы низкой или высокой точности в Webflow, пропуская Sketch или другой инструмент прототипирования. После того, как прототипы протестированы, их можно быстро превратить в конечный продукт и разместить в Интернете.
• Создавайте, размещайте и обслуживайте несколько сайтов и целевых страниц.
• Включите инструменты измерения, такие как Hotjar или Google Tag Manager.
• Снизьте входной барьер для маркетологов и других нетехнических специалистов.
• Простое редактирование контента другими прямо на странице через редактор Webflow.
• Webflow Ecommerce обеспечивает быстрое проектирование и масштабирование онлайн-бизнеса.
• Webflow обеспечивает единообразие дизайна и скорость с помощью шаблонов Team.
• Дизайнеры могут создавать сайты с реальным контентом и использовать коллекции CMS Webflow — шаблоны контента, которые другие команды могут использовать без технических навыков.
• Автоматическое резервное копирование сайта (версия) и промежуточные URL-адреса.
• Сайты не обязательно размещать с помощью Webflow. Поскольку все веб-сайты написаны с использованием стандартных HTML, CSS и JavaScript, сайты можно экспортировать и загружать на любой хост.
• При выходе из Webflow можно экспортировать базу данных для будущего использования вместе с файлами HTML и CSS.

Резюме

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

Я в одиночку спроектировал и запустил веб-сайт компании с помощью Webflow менее чем за два месяца. Webflow обеспечил беспрецедентную гибкость в процессе проектирования, предлагая более творческий контроль, не беспокоясь о коде. Быстрый рабочий процесс веб-дизайна без кода ускорил запуск и вдвое снизил производственные затраты по сравнению с традиционной веб-разработкой.

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

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

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• Веб-анимация в эпоху после Flash
• Простота — это ключ — изучение минимального веб-дизайна
• Отзывчивый дизайн — лучшие практики и рекомендации
• Бруталистический веб-дизайн, минималистский веб-дизайн и будущее веб-UX
• Все ли тренды того стоят? 5 самых распространенных ошибок UX, которые допускают веб-дизайнеры