Webflow для No Code сайтів. Кому і чому варто обрати цей інструмент?
Webflow – це візуальний інструмент вебдизайну, який переводить дизайн-рішення у чистий, готовий до використання, код. Він створений, щоб дозволити дизайнерам, розробникам і взагалі будь-якій людині створювати повністю адаптивні вебсайти. Це інструмент, який дозволить тобі: – створювати сайти без допомоги розробника – оживити власноруч свої дизайни не лише на рівні прототипу, а і на рівні готового сайту – не використовувати обмежений функціонал звичайних конструкторів сайтів – розширити свої професійні можливості та створювати для клієнта не лише дизайн, а повноцінний сайт – швидко створити нешаблонні рішення Якщо бодай одна із цих задач є для тебе актуальною, тоді ти у правильному місці. 🌟
Йой, та годі вже використовувати русняву Tilda, не надто функціональний Wix чи перейматись тим, що досі не вмієш писати код.
На головній сторінці сайту Webflow найкраще описана мета цього та подібних безкодових інструментів: «Сайт, який ти хочеш – без часу на розробку». Отже, Webflow – візуальний редактор коду для верстки сайтів. На відміну від no-code інструментів старого покоління, він дозволяє створювати не лише односторінкові сайти зі стандартних шаблонів, а має значно ширші можливості. Окей, можна нескінченно розказувати про те, який корисний Webflow та давай краще перейдемо до прикладів – ситуацій, коли він незамінний. Ситуація 1. Ти – дизайнер і відчуваєш, що кар’єрна чи грошова «стеля» вже близько або вже зараз тисне на тебе. Куди рухатись далі. Webflow – інструмент, який допоможе «пробити стелю» і збільшити твої можливості. Ти зможеш створювати не лише дизайни та прототипи у Figma.
З Webflow ти розшириш спектр своїх послуг і зможеш збільшити чек за них. Оскільки ринок досі формується, це чудова можливість стати частиною дизайн спільноти, що диктуватиме нові правила гри на цифровому ринку, в тому числі, впливатиме на ціноутворення веб-розробки та прототипування.
До речі, адаптивка у Webflow просто космос. Швидкість верстки дизайн-макетів у 10Х більша, ніж в аналогів на ринку. Завдяки функціям autoscale та можливості налаштовувати auto-fit для елементів, ти можеш створювати по-справжньому адаптивні сайти та fluid інтерфейси. Так виглядає all inclusive для дизайнера, який не хоче залежати від розробників та хоче розвивати додаткову цінність своїх послуг.
Як Webflow допоможе зекономити час та гроші?
У фронтенд-розробці беруть участь дизайнери та програмісти. Перші – створюють макети, другі – верстають та надають дизайну функціональності. Зазвичай саме цим і займаються верстальники. Проте чи завжди це доцільно? В теорії це повинно підвищити якість продукту, проте на практиці процес часто лише ускладнюється – необхідно більше часу на узгодження проміжних результатів.
Хіба не диво?
То що, може тобі варто познайомитись з Webflow поближче?
Webflow – це візуальний інструмент вебдизайну, який переводить дизайн-рішення у чистий, готовий до використання, код. Він створений, щоб дозволити дизайнерам, розробникам і взагалі будь-якій людині створювати повністю адаптивні вебсайти.
Завдяки появі такого сервісу навіть з’явилася нова професія Webflow Developer (а ще їх називають low-code розробниками). Ціна за найпростіші роботи на Webflow стартує від $200. А вартість лендингу вже забагато вища.
3,5 млн. дизайнерів та команд у всьому світі використовують Webflow.
Це візуальний редактор коду просунутого рівня, де можна створювати: – багатосторінкові корпоративні сайти – інтернет-магазини – продуктові лендинги – блоги та портфоліо Ти можеш будувати сайт з нуля або використовувати будь-який із готових шаблонів. Webflow пропонує більше 30 безкоштовних та 100 преміум шаблонів. Webflow має ширші можливості у порівнянні зі скромною функціональністю інструментів старого покоління. Давай розберемось що до чого – переходимо до функціоналу Webflow. Для роботи з Webflow у користувачів платформи є все необхідне: 1. Панель керування (Dashboard) – налаштування облікового запису та всіх проєктів користувача (їх можна створювати, клонувати, видаляти, передавати в інші облікові записи, переміщувати між папками тощо). 2. Інтерфейс дизайнера (Designer) – середовище розробки з безліччю просунутих функцій для роботи з канвас та елементами інтерфейсу. Тут створюються статичні сторінки та динамічні шаблони для CMS-колекцій. 3. Інтерфейс редактора (Editor) – використовується для керування вмістом сайту: текстове наповнення сторінок, вміст блогу, керування замовленнями та товарами магазину, колекціями баз даних тощо. Це ready to use адмінпанель для клієнта чи контент-менеджерів, яка не потребує додаткового часу на розробку. Сподіваємось, ти ще тут. І обіцяємо, це був єдиний теоретичний блок на цій сторінці 😉 Ми – практики, тому топимо за те, що знання потрібно застосовувати, а інструменти – тестувати. І тут Webflow – просто топчик. Для безкоштовного тестування платформа надає майже 90% свого функціоналу. Тому, якщо хочеш затестити чи підходить цей інструмент для твоїх потреб – спробуй і дізнайся на практиці. Важливо: у Webflow немає жодних обмежень щодо термінів тестування. Тобто, trial не триває, наприклад, лише 14 днів. Це дуже важливо як для команд та бізнесів, так і для дизайнерів, Webflow дає можливість зробити повноцінний краш-тест.
Wix
Wix – простий drag&drop-конструктор для тих, хто тільки пробує створювати сайти.
Інтерфейс зрозумілий, без зайвих кнопок та параметрів. Новачки зазвичай відразу приступають до роботи – беруть готові шаблони та редагують під власні потреби.
Елементи в Wix можна рухати мишею куди завгодно, не замислюючись про верстку.
Платформа взагалі заточена під недизайнерів. Проте великі проєкти Wix не потягне – немає ні функцій, ні швидкості завантаження.
Webflow
Webflow, навпаки, підходить дизайнерам та верстальникам.
Можна збирати сайти будь-якої складності, створювати анімацію та керувати контентом. Але тут потрібна підготовка.
Немає обмежень щодо оптимізації та роботи з кодом.
Завдяки відсутності drag&drop, згенерований код більш оптимізований, ніж у Wix. Це дає високу швидкість завантаження сторінок.
Підходить для чого завгодно, але весь потенціал платформи відкривається у великих проєктах. Наприклад, щоб змінити стиль компонента на всіх сторінках, достатньо 1 раз прописати це у налаштуваннях CSS-класу.
Tilda
Почнемо з недоліків. Tilda – руснявий сервіс (а це за замовчуванням – зрада).
Цей конструктор сайтів підходить для лендингів, невеликих корпоративних сайтів та онлайн-магазинів.
Потрібно витрачати багато часу на адаптивну верстку. Її важко редагувати, а сам дизайн-процес при цьому незручний.
Девізом роботи Webflow є «зробимо все, що завгодно, тільки б ти не використовував Tilda». Жарт 😜
«Розумна відсутність коду» – це принцип роботи Webflow. Інструмент розроблений спеціально для людей, які хочуть створювати повноцінні сайти без акценту на технічний аспект. Це про тебе? Якщо так, продовжуй читати. Адже зараз переходимо до найцікавішого – КЕЙСИИИ.
Які проєкти вже створено на Webflow
Великий бізнес давно використовує Webflow у своїх проєктах.
Найкращі кейси зібрані на сайті платформи. Та ми поділимось з тобою двома найцікавішими. Dell побудували міст між дизайном та розробкою «Відділ Dell по customer experience створює на Webflow прототипи сторінок головного сайту та окремих проєктів. У компанії кажуть, що платформа допомагає подолати «прірву» між дизайном та розробкою. Раніше Dell використовували внутрішню систему розробки та прототипування. Але її підтримка коштувала дорого: потрібна була ціла команда розробників. А для нетехнічного відділу – це було не під силу. Після шести місяців вивчення ПЗ обрали Webflow. На думку дизайнерів, він привносив ясність і точність у їхнє спілкування з інженерами – тепер дизайнери передавали прототипи з кодом, а не просто гарні макети. Зараз кожен проєкт у Dell починається з прототипів на Webflow, а розробникам та інженерам залишається лише перевірити код. Скоротився час між дизайном та проєктуванням. Дизайнери власноруч створюють повноцінні сторінки» Lattice повернули контроль над сайтом «Платформа Lattice виховує бізнес-лідерів та надає послуги тимбілдингу великим компаніям, серед яких Reddit, Slack та Asana. Раніше Lattice платила фрілансеру, який займався техпідтримкою сайту та оновлював контент через свою CMS. Якось компанія вирішила повернути контроль над власним сайтом: відмовилась від дорогого розробника та перенесла сайт на Webflow. З переходом на Webflow Lattice економить 50 000 $ на рік та тижні на розробку та публікацію нових сторінок. Маркетологи працюють із контентом у CMS, а дизайнери втілюють ідеї у конструкторі та публікують їх самостійно в один клік»
Цікаво, які ще сайти були створені за допомогою Webflow? Для цього у них на сайті навіть є окрема сторінка – Made in Webflow. Тут ти можеш знайти приклади та впевнитись чи буде цей інструмент корисним для твоїх задач.
Ти вже знаєш ЩО можна створювати завдяки Webflow. Настав час розібратись, ЯК це зробити.
Які знання тобі точно стануть у пригоді, щоб користуватись Webflow?
Box model – основа теорії та практики, без якої ніяк. Box model – це базова концепція про те, як елементи та лейаути працюють у вебі. У графічних редакторах ми звикли розміщувати елементи де завгодно, в цьому і сенс етапу прототипування – швидке тестування візуальних рішень. Натомість у Webflow все відбувається згідно правил вебу, які і регламентують відображення кожного елементу чи блоку. У чому ж основна різниця між Sketch/Figma/XD та Webflow? У графічних редакторах ми звикли розміщувати елементи де завгодно, а у Webflow блоки розміщуються один над одним.
А ще тобі точно допоможе: – Бути впевненим користувачем ПК. – Вміти базово користуватись Figma (макет проєкту необхідно створювати саме в Figma, щоб потім перенести на Webflow). – Мати опосередкований або прямий досвід створення сайтів за допомогою інших конструкторів. – Базове розуміння HTML / CSS. Розуміємо, усі ці пункти (особливо, базове розуміння верстки) можуть трохи лякати. Та камооон, ти будеш вражений(-а) від результатів, які отримаєш натомість. – Можливість експорту готового коду. – Можливість інтеграції зовнішніх сервісів (готові інтеграції, API-інтерфейс та підтримка Zapier). – Готові пресети інтерекшенів та можливість створювати кастомні анімації та все для моушн-дизайну. – Доступ до великої кількості вбудованих шрифтів, завантаження своїх, інтеграція з Google Fonts та Typekit. – Достатній вибір готових шаблонів зі зручною фільтрацією за тематикою та сферою. А ще: – Можливості створення інтерактивних прототипів інтерфейсів із закритою демонстрацією замовникам. – Ведення проєктів кількох клієнтів (у кожного з них буде свій план хостингу та ізольований обліковий запис). – Функціонал групової роботи над складними проєктами із поділом ролей виконавців. – Дешевше, ніж верстальник на фрілансі. – Дизайнер може самостійно зробити готовий повноцінний сайт. І це ще не все… Але ми не хочемо змушувати тебе читати це полотно до ночі, тому вчасно себе зупиняємо. Але плюсів у Webflow багацько!
Все супер, але чи є недоліки у роботі з Webflow?
Не хочемо тебе лякати та, щоб розібратись з Webflow, потрібен час. Проте результат того вартий! Щодо мінусів. Якщо ти вмієш верстати – їх немає. Якщо не вмієш, то не зможеш зробити те, що виходить за межі основної функціональності Webflow, кастомно: пошук, слайдер, складну анімацію. Видихай, ці знання завжди можна отримати. Ти можеш навчитись цього самостійно чи на курсі разом з Choice31. Давай розглянемо обидва варіанти.
Де отримати знання з Webflow…безкоштовно
Ще одна фішка Webflow – величезна база знань, яка регулярно поповнюється. На сторінці Webflow University є відеокурси для початківців та досвідчених фрілансерів. Там навчать робити дизайн, будувати онлайн-магазини та налаштовувати SEO.
У блозі компанії є понад 100 навчальних матеріалів з покроковими інструкціями щодо роботи з інтерфейсом та порадами. А ще є матеріали з дизайну, гайди та надихаючі історії користувачів. А ще є Forum – це місце, де можна ставити питання про будь-яку проблему, з якою ти стикаєшся під час роботи з сервісом, або просто переглядати матеріали з питань, які вже вирішили інші користувачі. Базові знання – ✅ Проте не забувай, що Webflow – це про необмежені (майже) можливості, тому використовувати його на 10% – неповага до людей, які його розробили і власного потенціалу. Не треба так 😉 Професія Webflow Developer актуальна – так. Розібратись з сервісом трохи складно – є таке. Курс Webflow Developer в Choice31 створений саме з цих причин. Він зекономить твій час на опанування інструменту, допоможе розібратись з інтерфейсом та функціоналом і не залишить по собі запитань.
Що вміє студент після закінчення курсу?
– Будувати вебсайти з нуля у Webflow. Вільно використовує цей інструмент для різних ніш: від e-commerce до креативних індустрій. – Проєктувати вебінтерфейси. Робить це без знань коду, незалежно від попередньої професії. Webflow підходить для будь-якого напряму. – Швидко створювати різні сайти. Робити їх адаптивними, інтерактивними та керувати своїм сайтом без залучення розробників. – Перетворювати свій сайт на інструмент маркетингу. Вміє просувати будь-який продукт чи проєкт.
Навчання на курсі у Choice31
– Зручний доступ до всіх уроків, матеріалів курсу, а також практичних завдань на нашій платформі, зможеш навчатися у будь-який бажаний для себе час.
– Практичний досвід роботи у Webflow з нуля – жодної нудної теорії, після кожного уроку на тебе чекає практичне завдання для відпрацювання навички.
– Додаткові матеріали та мануали створені лектором спеціально для тебе, вони допоможуть ефективніше засвоювати знання.
– Портфоліо на основі домашніх завдань, яке ти зможеш додати до резюме або на фріланс-платформу, щоб продемонструвати свій досвід
Якщо вирішиш опановувати Webflow разом з Choice31 вже найближчим часом – отримаєш спеціальну пропозицію щодо ціни, яка тебе дуже потішить.
Вартість участі – 200$
Не будемо тебе квапити, бо ми за те, щоб рішення приймались виважено і свідомо. Повернись ще раз до сторінки з ситуаціями та порівняй зі своїми потребами, перечитай інформацію про можливості Webflow – і лише тоді роби висновки щодо участі. Якщо вже точно є відчуття, що це твоє? Мерщій переходь за посиланням та опановуй нову професію. 💬 Якби майстер Йода знав про Webflow, то він сказав би: «Компанією успішною чи дизайнером стати хочеш ти – Webflow вміти маєш».Читати наступну