Створення вебсайтів доволі актуальна тема в сучасному світі. Основними проблемами тут можуть стати тонкощі та нюанси верстки вебсторінок. Анастасія Свереняк, Head of Design at Innovecs, поділилася власним досвідом у роботі з No-code/Low-code технологіями, а також розкрила міфи та підводні камені, повʼязані з веброзробкою.

Я постійно слідкую за трендами та новинками в креативній індустрії, намагаюся всіма силами встигати за ними, постійно розвиватися та вивчати щось нове. Вважаю, що в роботі дизайнера немає зайвих скілів і кожна опанована технологія допомагає принести щось свіже в робочі процеси.

Для мене, 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-технології будуть дедалі ширше використовуватися серед технічних та нетехнічних експертів, бізнесів та дизайнерів.