Я постійно слідкую за трендами та новинками в креативній індустрії, намагаюся всіма силами встигати за ними, постійно розвиватися та вивчати щось нове. Я вважаю, що в роботі дизайнера немає зайвих скілів і кожна опанована технологія допомагає принести щось свіже в робочі процеси.
Для мене, no code/low code технології це чудовий спосіб імплементувати веб самостійно з нуля, тобто, пройти всі етапи, починаючи від дизайн-концепції до її адаптації під різні пристрої. По-перше, такі навички для дизайнера дають змогу правильно дивитися на процес розробки дизайну веб-сайтів, а також враховувати всі можливі нюанси під час роботи та взаємодії з розробниками. Навіть якщо ти не будеш сам створювати сайти, то ти матимеш змогу зрозуміти на практиці, як правильно взаємодіяти з розробником, що краще робити, а що ні.
По-друге, це ще одна можливість прокачати свої UX-скіли, оскільки для кожного елементу дизайну ти враховуєш функціональність, взаємодію з ним з точки зору користувача та поєднуєш це з естетикою. Тому, для дизайнера у будь-якій сфері, це як додаткова можливість удосконалити свої навички.
Перші кроки: Webflow і його бенефіти
Все почалося з того, що ми вирішили замінити деякі стандартні презентації інтерактивними, щоб вони крутіше виглядали та почали шукати для цього необхідний інструмент. Однак під час пошуку зіштовхнулися з тим, що більшість інструментів були схожі на більш прокачаний PowerPoint. Тоді прийшла ідея замінити ці презентації лендингами, тож ми почали шукати конструктори для їх створення. Одним із головних завдань була оптимізація процесу створення лендингів, аби не ускладнювати та не залучати до нього розробників.
Я створила перелік необхідних функцій, що саме ми хотіли бачити в цих інструментах. І тоді ми з командою, почали порівнювати різні конструктори та тестувати їх. Фаворитом у цьому пошуку став WebFlow, який водночас дуже стрімко почав набирати популярність, оскільки багатьом українським креативникам він став заміною таким тулам, як Readymag та Tilda.
Наведу кілька конкретних пунктів, чому особисто для мене Webflow швидко став улюбленцем:
- Це потужний інструмент, який пропонує багато можливостей та інструментів.
- Доступний повністю безкоштовний Starter-план для створення веб-сторінок та їх публікації в мережі (з певними лімітами). Платний план можна обрати, коли потрібно додати кастомний хостинг, розробити content-driven сайт чи імплементувати будь-яку складнішу ідею.
- Анімація та інтерактивність. Webflow надає можливість створювати різноманітні анімації та інтерактивні ефекти на веб-сайтах. Можна використовувати, як готові пресети так і створювати власні анімації, щоб зробити свій сайт захопливим для користувачів.
- Інтеграції. У Webflow є можливість інтегрувати веб-сайти з багатьма різними веб-сервісами, типу Google Analytics та MailChimр. Також є досить крута взаємодія із Figma, що дозволяє досить швидко та легко переносити свій дизайн у редактор.
- Економія часу. Якщо нам потрібен окремий лендинг, щоб, наприклад, розповісти про експертизу компанії, то найбільш оптимальним рішенням є використання no code/low code технології та не залучати технічних експертів та додаткові ресурси.
- SEO-оптимізація. Webflow надає інструменти для оптимізації веб-сайту, що дає змогу підвищити його рейтинг та забезпечити кращу видимість для пошукових систем.
- Responsive design. Webflow дає змогу легко та швидко налаштовувати адаптивність дизайну та його вигляд для різних екранів та пристроїв.
- Візуальний редактор. Webflow дає змогу створювати веб-сайти за допомогою drag and drop елементів на екрані. Ти можеш швидко налаштовувати стилі, кольори, анімації, шрифти та всі інші необхідні елементи не використовуючи код.
- WebFlow University. У Webflow доступна повністю безкоштовна власна навчальна платформа Webflow University, де зібрані всі необхідні відеоуроки та навчальні матеріали, починаючи від базових інструментів до туторіалів у верстці веб-сайтів, створенню складних анімацій та багато іншого. Наявність таких матеріалів є дуже крутою фішкою, особливо для новачків.
Спростовуємо міфи: що не так, як гадалося
Є декілька хибних уявлень щодо no code/low code веб-розробки.
Міф № 1: Такі тули призначені виключно для новачків, а не технічних експертів.
Насправді це дуже круті та потужні технології, які загалом можуть використовуватися за необхідності досвідченими та професійними веб-розробниками. Ці інструменти дають змогу оптимізувати процеси, підвищити продуктивність та зменшити час веб-розробки. Наприклад, деякі моменти розробнику вже не потрібно кодити: вони вже prebuilt в редакторі, натомість можна детальніше зосередитися на чомусь іншому — самому інтерфейсі, інтерактивній взаємодії з елементами сайту, оптимізації тощо.
Міф № 2: Не треба розбиратися в основах веб-розробки.
Загалом, no code/low code дизайн дає змогу досить легко створювати веб-сайт не використовуючи код і, з одного боку, це так. Більшість таких інструментів побудовані на drag and drop інтерфейсі, де потрібно просто перетягнути необхідні елементи та розмістити їх на екрані редактора. Все автоматично підлаштовується під мобільну версію та інші пристрої та оптимізується під взаємодію з користувачем. Але той же Webflow трошки складніший і водночас досить потужний інструмент, при роботі з яким дуже важливо розібратися в базових принципах побудови веб-сторінок.
Він трохи відрізняється від інших звичних конструкторів своїм інтерфейсом. Якщо в більшості інструментів потрібно просто перетягнути готовий елемент на екран, наприклад, елемент слайд шоу з трьох картинок, і все працює. Тут же необхідно також керувати скелетом самого веб-сайту, який складається з базових елементів, які потрібно налаштувати — теги, класи, стилі, ієрархію і тд.
Теж саме, наприклад, стосується анімації. Просту анімацію можна створити вже з готових шаблонів, але можна також використати інші технології, підключити бібліотеки, написати чи відредагувати код, зробити 3D-анімацію тощо. Для цього всього потрібно орієнтуватися в технічні складові, та вивчити принаймні базові принципи побудови веб-сторінок — HTML-розмітку, СSS-стилі та Javascript.
Підводні камені
Для мене основним челленджем було розібратися з усіма тонкощами та нюансами верстки веб-сторінок, власне, чим я досі займаюсь. Цей процес займає багато часу й ресурсу та потребує постійної уваги. Спочатку, ти приділяєш купу часу вивченню теорії та практиці, пробуєш працювати з базовими інструментами, розбираєшся як вони функціонують та потроху переходиш на щось складніше.
Другий челлендж — це імплементація певних елементів, що потребують технічних знань. Наприклад розібратися в шматочку коду чи написати його, підключити external бібліотеку, імплементувати складну анімацію тощо. Якщо це все просто для того, хто із цим постійно працює, то для тих, хто тільки починає свою роботу, це може стати викликом. З одного боку, сам інструмент може ставати складнішим під час роботи, а, з іншого боку, ти сам із ним стаєш досвідченішим і це круто.
З думкою про користувачів
Потрібно турбуватися про те, щоб елементи веб-сайту були доступними для всіх користувачів. Для цього є декілька простих правил, які мусять бути в нашому чек листі. Вони здебільшого зводяться до двох площин: принципи дизайну та верстки веб-сайту. Ділюся кількома головними та простими пунктами:
- Використовувати контрастний фон для тексту.
- Не використовувати понад три різних шрифтів для одного веб-сайту (хіба що це спеціальна дизайнерська задумка). Переконайтеся, що обрані шрифти є добре читабельними.
- Потрібно впевнитися, що всі дизайн-елементи є повністю функціональними — не варто перевантажувати свою веб-стрінку зайвими декорованими елементами.
- Необхідно правильно організовувати візуальну ієрархію та використовувати вільний простір.
- Під час роботи з текстом, не робити рядки речень занадто довгими, а великі тексти розбивати на абзаци чи блоки. Інакше є ризик ускладнити користувачу їх сприйняття та зчитування.
- Обов’язково розробити просту та зручну навігацію по веб-сайту, та правильно організувати структуру веб-сторінки за допомогою базових HTML тегів типу <header>, <footer>, <body>, <section>, та інших. Це дасть змогу правильно розуміти та відображати веб-сайт різними програмами зчитування.
- Не забувати ставити alt text (alternative text) для зображень. У випадку, якщо зображення не відображається у користувача, цей опис однаково дозволить зрозуміти йому, що воно собою представляє.
- Рекомендую підготувати транскрипцію для аудіо- та відеоконтенту для користувачів, які можуть мати вади слуху. А якщо ми вже говоримо про повністю адаптований веб-сайт для користувачів із певними вадами зору чи іншими порушеннями, можна передбачити окрему версію веб-сайту із дотриманням правил інклюзивного дизайну.
Поради для новачків
Своє знайомство з технологією бажано розбити на декілька чітких кроків, щоб все відбувалося поступово та послідовно:
- Перед початком роботи обов’язково ознайомтеся з основами веб-дизайну. Треба мати чітке розуміння, як будується веб-сайт, з чого він складається та, як правильно формувати його структуру. Базове розуміння HTML, CSS JavaScript — усе це допоможе розробити простий веб-сайт чи лендинг.
- Обери для себе найзручніший інструмент, який відповідає саме твоїм потребам. Мені, наприклад, зручно робити порівняльні таблички, виписувати необхідні функції та забаганки, необхідні для роботи. І вже після аналізу обирати інструменти, порівнювати їх, тестувати на практиці. Якщо в деяких інструментів немає безкоштовного плану для ознайомлення з ними, то дуже часто є принаймні безкоштовний трайл-період.
- Не треба одразу намагатися зробити супер складний, комплексний та трендовий веб-сайт. Натомість починайте з простого. Наприклад, спробуйте зверстати простий лендинг. На цьому етапі ознайомтеся з інструментом, всіма його технологіями та функціями, пройдіть усі етапи роботи від початку до виходу в мережу.
- Не починайте одразу робити дизайн у редакторі. Спочатку краще розробити його повністю в Figma, продумати всі дизайн-елементи, їхню анімацію, ефекти тощо. І тільки після цього можна переносити прототип у редактор. Це допоможе розробити цілісний веб-сайт зі зручним дизайном.
- Підпишіться на всі можливі блоги та медіа з релевантним контентом, відслідковуйте новини окремих дизайнерів та компаній. Читаючи професійний контент, ви постійно будете слідкувати за новинками індустрії, знаходити підказки, лайфхаки та різні туторіали для роботи. Тримайте себе в курсі новинок, інтеграцій та інших новин про інструмент, з яким ви працюєте та про веб загалом.
- Приготуйтеся до тривалої практики. Розвиток приходить тільки з досвідом та працею. Тому важливо приділяти практичній роботі певний час, розвивати навички та поступово ставати крутішим і складнішим.
Декілька висновків
Ми бачимо, що no code/low code технології сьогодні досить популярні, і вони й надалі будуть досить стрімко розвиватися. Швидше за все, у майбутньому це буде мікс AI-технологій та машинного навчання, які вже зараз вбудовуються в no code-інструментах. На нас точно чекає купа інструментів на базі AI з можливістю генерації тексту, формування зображень за промптами та покращення взаємодії користувача з веб-сайтом, навчаючись на його поведінці. Також очікую колаборацію із СhatGPT, Midjourney та іншими популярними сучасними інструментами — це 100 % незабаром відбудеться.
Також ще більше буде розвиватися автоматизація різних функцій, щоб користувачу менше потрібно було робити щось руками натомість ще швидше й ще ефективніше створювати оптимізовані responsive веб-сайти.
Загалом, з огляду на популярність та велику кількість позитивних аспектів, на мою особисту думку, no code/low code-технології будуть дедалі ширше використовуватися серед технічних та нетехнічних експертів, бізнесів та дизайнерів.
Ця стаття була вперше опублікована на Telegraf.deisgn