Webflow — один із найбільш гнучких інструментів вебдизайну, який дозволяє працювати на межі дизайну та програмування. Ця платформа трансформує розробку цифрових продуктів, проте новачкові на її опанування знадобиться чимало зусиль.
Які ідеї та концепції здатні прискорити процес навчання? Що у Webflow може зацікавити українців? Розповідає британський дизайнер Джозеф Беррі, який виступає членом журі в Awwwards.
Як Webflow впливає на створення цифрових продуктів?
По-перше, Webflow — це просто дивовижний інструмент! Webflow дозволяє дизайнерові бути вільним, більш креативним, миттєво втілювати свої ідеї. Особливість Webflow полягає також у тому, що ви можете плавно переходити від дизайну до розробки, і в процесі все перебуває під вашим контролем. Якщо ви вагаєтесь, чи стати розробником Webflow, зробіть це! Так звучить мій головний меседж.
Які інші переваги Webflow спадають на думку?
Список цих переваг нескінченний. Webflow навчає розумінню HTML, CSS, анімації та інтерекшенів. Особисто мене всі ці знання зробили кращим дизайнером. Думаю, коли ви вивчаєте професію розробника вебпроєктів, ви змінюєте спосіб мислення та підхід до роботи. Передусім, ви посилюєте саме розуміння засад цифрового дизайну.
Завдяки Webflow я став вивчати HTML та CSS, і у мене це добре виходило. Якщо ви прагнете бути хорошим вебдизайнером, спочатку варто зрозуміти, як працює все інше поза дизайном. Webflow не лише допоміг мені підняти рівень своїх знань, а й помістив їх у зрозумілий візуальний контекст. Оскільки я сприймаю інформацію візуально, ця наочність є для мене необхідним складником.
Розкажи про свій дизайн-процес.
Мій дизайн-процес починається з генерування ідей, підготовки структури і дизайну, після чого я беруся власне за розробку на Webflow. Як дизайнер UI/UX, я маю заздалегідь розуміти, як саме мої ідеї перейдуть у вебплощину.
Усвідомлення таких тонкощів приходить із практикою. Щойно ти починаєш вивчати цей перехідний момент від проєктування до створення, ти вчишся робити кращий вибір на ранніх стадіях роботи.
Сьогодні дизайнер має у вільному доступі потужний візуальний арсенал шаблонів, завдяки чому втілювати круті проєкти стало простіше. Для мене вивчення ідей означає досліджувати інтернет, намагатися дивитися на речі нестандартно. Маючи референси, вивчаючи вебсайти, дизайнер отримує поштовх почати творити фантастичний UX-дизайн всередині Webflow. Однак для цього потрібні практика і час, тому завжди пам’ятайте, що вдосконалення — це поступовий процес.
На чому ти зосереджуєшся, коли структуруєш свій дизайн?
Коли я проєктую дизайн, то намагаюся зробити ідеї якомога лаконічнішими. Важливо слідкувати за послідовністю дизайну, типографією, кольорами, лейаутом. Одразу уявляю, якими будуть модулі або дизайн-патерни, і лише після цього перевожу все у Webflow. Необхідно заздалегідь продумувати структуру і семантику.
Завжди починайте зі стайл-гайду, створення шрифтів, скейлингу шрифтів, створення зразків кольорів, кнопок і будь-яких інших елементів, які сприятимуть консистентності проєкту. Коли ми вже перебуваємо всередині Webflow, саме структура буде ключовим елементом. Подбайте про підготовку системи класів (CSS) і чистоту коду. Не зловживайте CSS, надмірність у цій справі вам зашкодить.
Знову ж таки, підходьте до роботи систематично. Напрацюйте певний процес того, як ви можете повторно використовувати модулі — які з них можете перенести чи адаптувати, щоб не створювати наново. Задля ефективності роботи переробляйте готові елементи та проводьте вдумливий реінжиніринг.
Як завдяки Webflow дизайнер може створити захопливий користувацький досвід?
Ми, дизайнери, повинні дотримуватися принципів, які формують логіку, причини і мету нашої роботи. Що би ви не проєктували, що би не робили, все ставте під сумнів. Ставте під сумнів логіку, піддавайте сумніву причину і мету. Будьте прискіпливим: лише так ви створите органічний, природний і автентичний цифровий досвід.
Я спостерігаю в інтернеті, як деякі дизайнери надто захоплюються вигадливими рухами, чудернацькими анімаціями і взаємодіями, які не виконують корисних функцій. Такі речі часто заплутують користувача і переважають над доцільністю.
Скажімо, якщо завдання — створити вебсайт електронної комерції, анімації вочевидь мають бути простими та лаконічними. Щось більш складне і креативне має місце бути, але лише тоді, коли в цьому є чіткий сенс. Не додавайте щось, якщо воно не покращить досвід користувача, не зробить його більш захопливим.
До речі, ставити собі критичні запитання в дизайні мене навчив бос. Я щоразу питаю себе, чи покращить це нововведення користувацький досвід? Чи не спотворює воно загальне враження, не ускладнює прийняття рішень? Не наслідуйте бездумно те, що роблять інші, і не робіть щось просто заради того, щоб зробити. Всі рішення повинні мати логіку, мету і причину.
Дай три поради українським дизайнерам, які починають свій шлях з Webflow.
- Webflow має дещо високий поріг входження, тому я наполегливо рекомендую ознайомитися з основами HTML та CSS. Це допоможе вам набагато краще зрозуміти Webflow і прискорить первинний процес навчання;
- Практика, практика, практика. Практика не робить досконалості, але сприяє вдосконаленню. Завжди пам’ятайте, що ви повинні експериментувати. Виникли нові ідеї? Запишіть їх, спробуйте на практиці. Досліджуйте попри всі невдачі. У цьому суть процесу вдосконалення;
- Останнє, що я хотів би порадити — це терпіння. Знайдіть свій власний темп і запасіться терпінням. Не треба весь час заздрісно зазирати на людей, які сильно вас випередили, і внаслідок цього цькувати себе. Ви теж колись там опинетесь, якщо продовжите практикувати.
Підсумовуючи, наведемо головні вказівки Джозефа Беррі щодо вдосконалення навичок дизайнера у Webflow:
- Наберись терпіння. Якщо ти раніше не займався веброзробкою, будь готовий, що вивчення основ займе деякий час. Доведеться перемкнути уявний світчер і подивитися на дизайн з точки зору вебструктури.
- Вивчи базову семантику. Розпочни з основ HTML та CSS; зрозумій їх взаємозв’язок і те, яким чином вони беруть участь у формуванні контенту та стилів вебпроєктів.
- Практикуйся, практикуйся і практикуйся. Роби помилки, навчайся, роби нові помилки і знову навчайся. Ідеальних цифрових продуктів не існує, тому не намагайся зробити все і відразу.
- Будь допитливим і самокритичним: став запитання, досліджуй, піддавай дизайн-рішення сумніву. Завжди намагайся зрозуміти, як і чому ти робиш те, що робиш.
Telegraf.Design працює за підтримки спільноти. Підтримуйте Telegraf.Design на Patreon.