В этой статье мы представим руководство для начинающих по Webflow, инструменту веб-дизайна без кода для дизайнеров, исследуя, как вы можете начать его использовать сегодня.
Инструменты без кода помогут вам разрабатывать и создавать веб-сайты, не зная, как кодировать. Они становятся все более популярными, поскольку уровень интереса к этим инструментам неуклонно растет.
Webflow — один из самых популярных онлайн-инструментов без кода. Он помогает вам проектировать и создавать веб-сайты, не зная таких языков, как CSS, или писать собственный код JavaScript, но при этом дает вам возможность создавать потрясающие веб-сайты.
Веб-дизайн для Non-coders
Такие инструменты, как Webflow, отлично подходят для тех, кто не занимается программированием, например, для широкой публики, и для тех, кто работает в творческой сфере, которые хотят иметь больший контроль над своими сайтами, не тратя кучу времени на изучение языков программирования (например, графические дизайнеры, которые хотят заняться веб-дизайном. ).
Webflow, похоже, позиционирует себя таким образом, чтобы обслуживать широкую публику, вплоть до опытных веб-дизайнеров и разработчиков, которые уже знают, как кодировать, но ищут решения, которые помогут им стать лучше и эффективнее.
Webflow делает большую часть (если не всю) тяжелой работы за вас, когда дело доходит до разработки вашего веб-сайта. Разработанный с помощью пользовательского интерфейса (UI), называемого конструктором, который больше похож на дизайн приложения «что видишь, то и получаешь», он пишет код для вас в фоновом режиме, когда вы начинаете размещать свои элементы. и настройка ваших стилей. В Webflow есть бесплатные шаблоны, которые помогут вам начать работу (что отлично подходит для начинающих пользователей и тех, кто не считает, что их дизайнерские навыки лучше, чем шаблоны), но вы также можете начать с нуля, если вы более опытный пользователь или разбираться в языках программирования переднего плана.
Webflow как инструмент визуального веб-дизайна
С Webflow, вероятно, есть два разных типа пользователей, которые будут регулярно использовать Webflow: те, у кого нет ноу-хау для кодирования своего собственного сайта и нуждаются в помощи, которую предоставляет Webflow и его визуальный редактор, и те, кто умеет проектировать и кодировать их собственные веб-сайты и стремятся ускорить / упростить этот процесс.
Тем, кому нужна помощь в разработке собственного веб-сайта, Webflow поможет вам с помощью шаблонов и руководств, которые сделают большую часть работы по кодированию за вас. Однако вы, вероятно, узнаете, что захотите начать приобретать некоторые навыки программирования, чтобы действительно настраивать вещи по своему вкусу и полностью понимать широту функций, которые предлагает Webflow.
Для веб-дизайнеров / разработчиков, имеющих опыт разработки собственных сайтов, Webflow может уйти с дороги и позволить вам сразу приступить к работе внутри своего визуального дизайнера. Однако из-за того, что некоторые из их функций ограничены, вы, скорее всего, быстро столкнетесь с вещами, которые вы не можете сделать, что вы хотели бы, и, вероятно, в какой-то момент по пути вы погрузитесь в код.
Ценообразование
Webflow предоставляется по ежемесячной цене, в зависимости от того, как вы хотите использовать платформу. Вы можете платить ежемесячно за сайт или ежемесячно за отдельную учетную запись с несколькими проектами. Хотя с самого начала это не было ясно, эти два тарифных плана ориентированы на два разных типа пользователей, о которых говорилось выше.
Для тех, кто владеет своим сайтом и хочет только один или два сайта, план сайта, вероятно, будет там, где вы хотите быть. Для тех, кто является веб-дизайнерами / разработчиками, которые планируют использовать Webflow в качестве инструмента для разработки сайтов для передачи клиентам, планы учетных записей, вероятно, больше подходят (особенно если вы хотите загрузить свой сайт из Webflow и использовать его где-нибудь еще., например, на вашем собственном сервере или с помощью CMS, например WordPress).
В любом случае, вы получаете бессрочный тарифный план, который позволяет вам экспериментировать и работать с Webflow, чтобы ваш сайт был там, где вы хотите, прежде чем вы решите перейти на новую версию. (Однако бессрочный план ограничивает то, что вы можете и не можете делать. Например, вы не можете подключить свой сайт к личному домену.)
Цены на Webflow отлично подходят для тех, кому нужен всего один или два сайта. Однако это может обойтись довольно дорого для тех, кто хотел бы иметь сразу несколько сайтов. В некоторой степени связан с ценообразованием еще один недостаток (возможно, в большей степени недостаток для более опытных пользователей): возможность спроектировать, а затем экспортировать свой сайт для последующего использования / изменения для другой платформы (такой как WordPress) — не самый лучший вариант, и требует, чтобы вы ежемесячно платили за эту возможность, даже если вы решите не запускать / размещать свой сайт в Webflow.
В целом популярность Webflow означает, что люди извлекают выгоду из инструмента без кода, и он продолжает привлекать внимание не только широкой публики, но и тех, кто достаточно новичок в веб-разработке, вплоть до тех, кто имеет опыт. веб-дизайнеры и разработчики.
Поскольку вы, вероятно, попали в эту статью, потому что вас тоже интересует Webflow и то, как он может быть полезен для вашей ситуации, давайте погрузимся в то, как начать работу с Webflow, чтобы вы познакомились с платформой и как вы могли бы ее использовать для твои нужды. Затем мы закончим информацией о том, какой путь лучше всего выбрать, если вы продолжите свое путешествие по Webflow.
Уровень мастерства
Несмотря на то, что Webflow объявлен инструментом «без кода», следует отметить, что это не означает «без навыков». Webflow нужно понять даже опытному веб-разработчику. Те, у кого нет большого опыта в веб-дизайне / разработке, могут найти эту кривую обучения более крутой, чем они ожидали, когда пробовали инструмент, заявленный как «без кода». Некоторое базовое понимание веб-сайтов (таких как макеты и блочная модель) и того, как стилизовать вещи (например, поля, отступы, поплавки, позиции и т. Д.), Полезно и сокращает время обучения, но не обязательно для использования Webflow..
Хотя я бы сказал, что Webflow легко освоить и изучить (что является предвзятым мнением, поскольку за свою карьеру я закодировал десятки веб-сайтов), будьте готовы некоторое время изучать веревки и понимать не только, как работает Webflow, но и принципы веб-дизайна и разработки. Те, у кого есть опыт создания веб-сайтов, вероятно, лучше справятся с начальным этапом обучения, чем те, кто плохо знаком с созданием веб-сайтов с помощью инструментов без кода.
Однако замечательно то, что Webflow понимает это и потратил много времени на создание того, что они называют «Университетом Webflow», чтобы помочь вам изучить их инструменты и развить свои навыки веб-дизайна и разработки на их платформе. Это также отличный ресурс, выходящий за рамки этого руководства по началу работы, если вы хотите вывести свой эксперимент / набор навыков Webflow на новый уровень.
Регистрация и адаптация
Зарегистрировать учетную запись в Webflow так же просто, как и на большинстве других сайтов, на которых вы создавали учетные записи. Нажав «Начать» в верхней части домашней страницы, вы пройдете через процесс регистрации и адаптации. Процесс адаптации поможет вам правильно настроить свою учетную запись, задав вопросы, чтобы узнать о вас больше.
После того, как вы пройдете анкету для адаптации, вы попадете в визуальный редактор Webflow, называемый конструктором, чтобы начать обучение. Независимо от того, насколько вы опытны в веб-разработке, я настоятельно рекомендую вам потратить время на изучение руководства, так как это поможет сократить время обучения по мере того, как вы переходите к своему первому проекту.
Некоторые из наиболее важных частей учебного пособия, которое проводит вас Webflow, — это панель элементов, классы, как сделать ваш сайт адаптивным с помощью точек останова и заканчивая информацией о том, как продвигать ваш проект вживую. Именно во время обучения вы, вероятно, получите хорошее представление о необходимых навыках, особенно потому, что оно объясняет вам различные веб-принципы (например, каскадные таблицы стилей).
После того, как вы закончили краткое руководство, самое время начать свой первый проект (как будет предложено, когда вы закончите вводные темы). Нажав » Создать новый проект«, вы попадете прямо в визуальный редактор Webflow.
Отсюда это тип установки «выбери свое собственное приключение», по которому вы хотите двигаться вперед. Чтобы узнать и понять, как работает Webflow, я настоятельно рекомендую выбрать шаблон для редактирования вместо того, чтобы сразу переходить к пустому проекту сайта.
В этом практическом руководстве мы собираемся отредактировать существующий шаблон Webflow, чтобы узнать, как работает конструктор, и основные функции основного интерфейса, которые вы будете использовать внутри Webflow.
Дизайнер
Конструктор в Webflow — это визуальный редактор, в котором, вероятно, вы будете большую часть времени работать в Webflow. Чтобы получить опыт работы с Дизайнером, давайте отредактируем существующий шаблон. Для этой статьи я выбираю шаблон «Business Starter» из списка проектов. Наведите указатель мыши на шаблон, нажмите » Выбрать», дайте ему имя, затем нажмите » Создать сайт«.
Ваш недавно созданный сайт с использованием шаблона Business Starter откроется в конструкторе Webflow. Вы увидите панели инструментов слева и сверху, а также панель параметров справа. Несмотря на то, что Дизайнер может помочь вам редактировать свой шаблон и работать с ним, мы собираемся сосредоточиться на нескольких наиболее важных, наиболее часто используемых частях Дизайнера, чтобы вы могли научиться редактировать свой сайт по своему вкусу.
Давайте рассмотрим наиболее важные части конструктора Webflow, те, которые вы, вероятно, будете использовать чаще всего: панель элементов, панель стилей, панель навигатора и панель страниц.
Панель элементов
Основные строительные блоки вашего веб-сайта, такие как заголовки, изображения и кнопки, в Webflow называются «элементами». В верхнем левом углу под логотипом Webflow находится значок плюса, где вы можете просматривать все возможные элементы и выбирать те, которые вам нужны.
Например, я хочу добавить дополнительную кнопку в раздел героев этого веб-сайта, рядом с той, которая там сейчас находится. Я могу щелкнуть элемент кнопки и перетащить его туда, где я хочу. Под элементом, который я добавил, появляется меньшее окно, чтобы дать мне больше возможностей — в основном, в этом случае, чтобы добавить ссылку для работы кнопки.
На панели «Элементы» также есть другие типы элементов, которые, возможно, не были уже загружены и готовы к использованию, например, цитаты блоков, загрузка файлов, вкладки, ползунки и элементы социальных сетей. Все это общие элементы на веб-сайтах, но Webflow сделал большую часть тяжелой работы, когда дело доходит до кодирования этих элементов, предоставляя эти типы веб-элементов, готовых к добавлению на ваш сайт по желанию.
В дополнение к элементам на той же панели есть макеты. Нажав «Макеты» вверху, вы переключитесь на доступные макеты, которые вы можете использовать, например галерею или контактную форму. Это удобно в тех случаях, когда вам нужен определенный макет, но вы не хотите индивидуально собирать каждый элемент, чтобы это произошло. Webflow позволяет легко вставлять эти макеты на ваш веб-сайт и настраивать их по своему усмотрению.
Панель «Элементы» довольно плотная, с множеством элементов и макетов, которые можно использовать на вашем сайте.
Панель стилей
Вы, вероятно, заметили, что, когда мы добавили кнопку в раздел героев сайта, панель с правой стороны изменилась и предоставила гораздо больше возможностей для вашей кнопки. Эта панель называется панелью стилей, и именно здесь происходит большинство настроек и изменений дизайна.
Эта панель, в зависимости от элемента, с которым вы работаете, предоставляет вам такие параметры, как типы и размеры шрифта, выравнивание, цвета, поля и отступы (для создания пространства между элементами). Другими словами, эта панель содержит все настройки, необходимые для «стилизации» ваших элементов (отсюда и название, и намек на использование таблиц стилей CSS в современной веб-разработке для «стилизации» или дизайна вашего веб-сайта). Вот где некоторые знания веб-разработки пригодятся, чтобы уменьшить кривую обучения и понять, что означают все эти элементы, такие как поля, отступы, переполнение и позиционирование.
Однако, если у вас нет такого опыта, экспериментирование с этими различными вариантами поможет вам узнать, что делает каждый из них и как их изменение влияет на элементы, с которыми вы работаете. Некоторые из них более понятны и работают аналогично другим типам программ, например шрифтам и цветам, в то время как другим потребуется немного проб и ошибок или экспериментов, чтобы полностью понять, что они могут делать, например, позиционирование и переполнение.
Панель навигатора
Еще одна важная часть конструктора, которую вы будете часто использовать при использовании Webflow, — это панель «Навигатор». Эта панель позволяет группировать элементы вместе, видеть, какие элементы объединены в группы, и при необходимости изменять порядок элементов на странице.
В левой части конструктора щелкните значок с тремя полосами (значок «Навигатор»). Это открывает панель со всеми вашими элементами, найденными на текущей странице, на которой вы находитесь. Двойной щелчок по любому элементу выделяет его в главном окне, чтобы вы могли его увидеть.
Щелкнув здесь «Нижний колонтитул», вы сразу попадете в нижний колонтитул, где вы сможете начать работу с этим конкретным элементом. Вы можете щелкнуть, удерживать и перетащить элемент на панели «Навигатор», чтобы реорганизовать страницу или поместить элементы в разные места на странице. Это поможет вам увидеть, где все ваши элементы находятся на странице и как они связаны друг с другом.
Панель страниц
Наконец, последняя основная часть конструктора, которую вы часто используете, — это панель «Страницы». В левой части конструктора щелкните значок «Страницы» (вверху), чтобы открыть панель «Страницы».
Здесь находятся все ваши статические страницы, а также другие типы страниц, которые могут быть на вашем сайте (например, страница 404). Здесь вы можете организовать свои страницы и контент, а также изменить любые конкретные настройки, которые могут быть у вас для каждой конкретной страницы, такие как заголовок страницы и слаг (или постоянная ссылка). Вы также можете добавлять и удалять страницы на этой панели.
Просмотр всех ваших страниц вместе на одной панели помогает вам оставаться организованным и видеть, какой контент есть на вашем веб-сайте по мере его создания.
Четыре панели, описанные выше, едва ли охватывают всю функциональность, которую Webflow может предложить в конструкторе.
Какой путь вы выберете?
Webflow помогает обслуживать два разных типа пользователей: тех, у кого ограниченный опыт, у кого есть много шаблонов для начала, и у тех, у кого больше опыта, у кого есть возможность начать проект с нуля. Я упоминал выше, что лучше всего, независимо от уровня навыков, начать с шаблона и работать над его настройкой, чтобы вы могли узнать, как работают все панели, и все возможности, которые может предложить Webflow.
В зависимости от вашего набора навыков вам может быть удобно брать существующие начальные шаблоны, а затем настраивать их по своему усмотрению, или вы можете захотеть начать проект полностью с нуля. Когда вы будете довольны, вы можете опубликовать свой веб-сайт на платформе Webflow, и все готово.
Пользователи, которые хотят создать свой собственный сайт, но не имеют большого опыта в дизайне / кодировании, лучший путь — начать с готовых шаблонов. Выберите шаблон и настройте его в зависимости от того, что вы хотите, с помощью конструктора и его панели «Элементы», чтобы попасть туда, куда вы хотите. Для пользователей, которые приходят в Webflow с дизайном в руках (наряду с опытом веб-разработки) и хотят воссоздать его в Webflow, начало с нуля может быть лучшим вариантом для полного контроля над проектом.
Если вы когда-нибудь захотите начать новый проект (закрыв шаблон или начав с пустой страницы), вы всегда можете сделать это, вернувшись на панель мониторинга Webflow, щелкнув значок с логотипом Webflow в верхнем левом углу и выбрав Панель мониторинга. Когда вы будете готовы начать свой проект, нажмите кнопку » Новый проект» в правом верхнем углу. Нажав кнопку » Новый проект «, вы попадете в список всех их шаблонов, а также сможете начать с чистого листа.
Webflow позиционирует себя как способ удовлетворить потребности как новичков, так и опытных дизайнеров / разработчиков, и позволяет свободно и гибко перемещаться между ними по мере необходимости. Однако путь, который вы выберете, будет во многом зависеть от вашего варианта использования, уровня навыков и конечного результата, которого вы хотите достичь, поэтому обязательно примите это во внимание при запуске новых проектов в Webflow.
Заключение
У Webflow есть отличная библиотека ресурсов, называемая Webflow University, которая поможет тем, кто начинает работать с Webflow, и тем, кому просто нужно понять, какие варианты им доступны. Изучение некоторых руководств в Университете Webflow, особенно их уроков, таких как «Начало работы», может помочь вам глубже погрузиться в определенные части Webflow и самой веб-разработки (что помогает уменьшить кривую обучения), особенно если вы находите удовольствие в используя инструмент без кода, и хотите узнать больше о том, что означает и может делать каждая кнопка и символ.
В целом, если вы ищете инструмент без кода (или с низким кодом), который поможет вам впервые создавать веб-сайты или упростить рабочий процесс в качестве опытного веб-дизайнера / разработчика, Webflow превратился в серьезный соперник в этом пространстве. Если вы либо решите начать с использования одного из шаблонов Webflow, либо хотите начать с нуля, конструктор Webflow поможет вам добиться того, чтобы ваш веб-сайт выглядел и функционировал так, как вы хотите, при написании кода в фоновом режиме для вас. Дизайнер позволяет легко вносить изменения в ваш веб-сайт, такие как макет, интервалы, цвета, типографика и другие, с помощью простого в использовании пользовательского интерфейса.
Webflow был создан, чтобы позволить дизайнерам создавать полностью адаптивные веб-сайты, и, независимо от уровня ваших навыков, это жизнеспособный вариант, который поможет вам создать свой веб-сайт без знания кода или ускорить рабочий процесс при написании чистого кода в фоновом режиме.. Как только ваш сайт будет готов к работе в прайм-тайм, настройте платный план с помощью Webflow для запуска вашего сайта на платформе Webflow или загрузите код, чтобы затем использовать его с такими платформами, как WordPress, чтобы разместить его самостоятельно.
