Як думаєте: лікар, який останні 20 років оперує на надниркових залозах, уміє робити тільки такий тип операцій? Очевидно, ні. Він бере участь у широкопрофільних семінарах, щоб тримати руку на пульсі й бути в курсі останніх технологій. А щоб не втратити навичок і ширше дивитися на власну спеціалізацію, час від часу проходить загальну практику.
Але чомусь так не думають у діджитал-професіях. Як результат, дизайнери жодного разу не пробують програмувати, програмісти — дизайнити, а проджект-менеджери не можуть детальніше розповісти, як робляться продукти в компанії. Тим часом такі кроспрофесійні навички можуть стати в нагоді. Як саме — розповідає куратор курсу з анімації інтерфейсів Антон Пінкевич на прикладі UI/UX і вебдизайнера, який уміє програмувати.
Читайте також: Генеративний дизайн: на перетині мистецтва й програмування
1. Ви зможете придумувати та розробляти крутіші рішення
Цей пункт — про розуміння можливих рішень. Уміння програмувати знайомить дизайнера з різними технологіями, які можна використовувати для досягнення своєї мети. Цей навик дозволяє подивитися на роботу очима розробника та уявити, як можна реалізувати фішки, придумані в дизайні. Наприклад, дизайнер може від самого початку продумати архітектуру сторінки та стек технологій.
Так можна придумувати дуже сміливі концепти. Наприклад, 3D-моделі, які взаємодіють з курсором користувача:
Робота британської креативної студії Green chameleon
Або впроваджувати сміливі рішення з гнучкою лінією, яка в підсумку перетворюється в checkmark.
Робота студії із Нью-Йорка Frame.io
Ось ще один класний приклад використання технологій для розв’язання проблеми:
Дизайнер Гліб Кузнєцов застосував AR-технологію, щоб показати додаткову інформацію користувачеві
2. Ваші прототипи стануть більш функціональними й будуть використовуватися на етапі розробки
Дизайнер, який вміє програмувати, збирає інтерактивні прототипи рівня «бог». Такі прототипи клієнт може встановити собі на телефон і спробувати UI-mvp, що реально працює. Це не зрівняється зі статичним дизайном, який не передає відчуття реального фінального продукту.
Зазвичай такі прототипи збирають в Xcode або Android Studio. Вони забирають більше часу на етапі pre-production, але натомість добряче економлять ресурси на дорожчому етапі production.
Для дизайнера створення подібних прототипів не вимагає багато зусиль. Однак це гарантує, що всі рішення та екрани будуть зібрані саме так, як він задумав, а не як вийшло. Опісля розробник може легко підхопити проєкт і нав’язати складну логіку та просунутіші переходи між екранами.
Проєкт студії Netguru
Трішки процесу створення прототипу від Untime Studio
3. Зможете створювати універсальні дизайн-системи
Це займе якийсь час, але ви будете впевнені, що всі потрібні стани якісно опрацьовані й користувач не побачить «зсунуті» іконки або «неправильні» кольори.
Реальний приклад розробленої дизайн-системи в студії Untime
З прикладу видно, що ми розробили суперадаптивну і продуману дизайн-систему для клієнта. Ми задизайнили й анімували стан кожного окремого елемента. А потім вирішили все це зашити в більшу дизайн-систему, аби впевнитися, що наші ідеї використовуватимуть, як ми задумали.
Приклад простішої дизайн-системи від Storybook
4. Заговорите з розробником однією мовою
Чи було у вас таке, що ви даєте свій дизайн програмісту, а на виході отримуєте зовсім не те? Щоб такого більше не траплялося, варто працювати з розробником в команді, а не один проти одного.
Уміння програмувати допоможе формулювати свої забаганки і давати повноцінний конструктивний фідбек. За це розробник вам подякує.
З лекції «Animated Design System»
5. Програмування — перший крок до системного мислення
За своєю природою дизайнер — це інженер, а програмування допомагає побачити світ крізь призму систематизації. Це повністю змінює мислення. Ви почнете розробляти дизайн більш продумано: розбивати складні компоненти на простіші, відокремлювати й підкреслювати найголовніше. Найбільше це стосується внутрішніх процесів, які не побачить ваш кінцевий користувач. Та вони дозволять вам відчути свою суперсилу.
Цей тип мислення стосується не тільки до дизайну чи розробки. В Untime він проявляється в усіх процесах: від створення структури папок на Google Drive до фінальних рендерів. Я також застосовую його і в моушн-дизайні та анімації. Тепер для мене персонажі — це рухомі системи 🙂
Коли я починав програмувати, моє мислення стало «об’єктно-орієнтованим». Тобто я намагався побачити цей світ як низку незалежних об’єктів, які взаємодіють один з одним. Коли ж дізнався про «системне мислення», мій світ перевернувся. Я почав глибше вивчати це питання, слухав лекції викладачів Стенфорда, читав суворі російські підручники 80-х. І тепер всюди бачу системи, які взаємодіють одна з одною. Можу в голові масштабувати усе: від маленького мікрокомпонента-кнопки до величезної мультисерверної архітектури. І розглядати їх не тільки як незалежні елементи, а й як частини більшої структури.
На старті нового проєкту я відразу ж обмірковую основну архітектуру, потім починаю заглиблюватися в окремі системи та розробляти їх ще на рівень нижче. Як у відомій Atomic Design Metodology, але навпаки, тобто з зовнішнього кола у внутрішнє.
6. Зможете писати плагіни та скрипти для оптимізації роботи
У доповнення попередньої теми: ви вже не зможете спокійно повторювати рутинні дії щоразу і захочете їх оптимізувати. Врешті підете вивчати те, як працює софт, і почнете писати оптимізатори для своєї роботи.
За свою кар’єру моушн-дизайнера я написав 4 великих розширення і десятки дрібних скриптів. До слова — це ще й дуже вигідно, бо ви зможете їх продавати. Я досі заробляю на скриптах, які написав ще 5 років тому.
Це прев’ю одного з таких розширень:
Автор: Антон Пінкевич
7. Уміння програмувати зробить вас цінним фахівцем
Дизайнер, який вміє програмувати, цінується значно вище, ніж вузькопрофільний фахівець. Ви стаєте універсальнішим членом команди, який готовий вести складніші проєкти та контролювати роботу розробників.
Бізнесу завжди простіше найняти універсальну людину на керівну посаду, ніж намагатися зробити вузького фахівця керівником.
8. Зможете самостійно перевіряти власні гіпотези
Так у нас з’явився мобільний додаток Flugo. Ми просто хотіли дізнатися, чи можна створити технології анімації фотографій на телефоні. Тестували, перевіряли, покращували. Коли побачили, що у нас вийшов майже готовий додаток, вирішили його доробити й викласти в загальний доступ.
Що вивчати передусім?
- Як не дивно, досі актуальне знання чистих HTML + CSS.
- Наступним етапом вивчення повинен стати фреймворк react + react native. Це один із найпопулярніших фреймворків для фронт-енд розробки. Його використовують для вебдодатків і нескладних мобільних застосунків. Також на його основі працює програма для прототипування Framer X.
- І найкрутіший етап — це базові знання Swift + Kotlin і Xcode + Android Studio. Це дозволить розкрити свій потенціал сповна.
Раніше Антон Пінкевич ділився корисними посиланнями для моушн-дизайнерів та аніматорів.