Даниїла Мунтян, продакт-дизайнерка в компанії Universe, що входить у Genesis, на власному досвіді розповідає, як графічній дизайнерці стати продуктовою. Про необхідні навички та як їх набути, а також про створення першого портфоліо та підготовку до інтерв’ю – читайте в колонці для Telegraf.Design.

Моя кар’єра розпочалася з графічного дизайну – мріяла займатися дизайном книг і шрифтів. До того, як перекваліфікуватися, я встигла попрацювати у Студії Лебедєва, Hooga та взяти участь у проєкті, який отримав Red Dot («Парк Корупції»).

У якийсь момент я зрозуміла, що в продакт-дизайні можу принести набагато більше користі бізнесу та користувачеві.

У створенні книги або айдентики дизайнер здебільшого не керується конкретними метриками. Не ставить запитання про те, як його робота вплине на прибутковість продукту, чи буде книжка зручна читачам. Особисто для мене це стало причиною фрустрації в роботі.

Перехід у продакт-дизайн я планувала півтора року. У цей час зробила свої перші прості сайти на Tilda та в ​​Readymag, а згодом почала вивчати Webflow. Це дозволило мені більше зануритися в те, як сайти створюються і верстаються.

Також читала гайди і безліч публікацій, намагалася розібратися в тому, як працює продакт-дизайнер. Після самостійної підготовки я вирішила піти на курси, щоб структурувати знання.

Першу роботу продакт-дизайнерки я отримала в одній із глобальних технологічних компаній. А потім потрапила у Universe. Ми займаємося розробкою мобільних застосунків, ігор і вебпроєктів.

У мої обов’язки входить проведення досліджень, розробка та редизайн поточних продуктів, підтримка та створення дизайн-системи на проєктах, наставництво та навчання молодших дизайнерів.

Які навички графічного дизайнера стануть в нагоді?

Багато навичок графічного дизайнера при переході вам будуть корисними. Серед них:

• Вміння малювати іконки – ви зможете створювати кастомні іконки для додатків і сайтів. Завжди можна звернутися за допомогою до ілюстратора або графічного дизайнера, але якщо продакт-дизайнер може створити це самостійно, ви заощадите в часі.
• Досвід розробки айдентики – знадобиться в пошуці візуального стилю застосунку або сайту, щоб краще комунікувати з аудиторією. Я все ще створюю мудборди із загальним стилем для пошуку мови візуальної комунікації.
• Уміння верстати – допоможе зрозуміти, як створюються інтерфейси UI.
• Робота з анімацією – потрібна для створення переходів між екранами, іконок, компонентів.

Які навички треба здобути?

Однак фокус продакт-дизайнера не в тому, як виглядатиме інтерфейс, а в тому, як створити успішний досвід користувача – UX. Завдання фахівця – зробити так, щоби бізнес був у плюсі, а юзери – щасливими.

У цьому продакт-дизайнер схожий на режисера: він може створювати що завгодно, але в рамках бюджету і показувати результат. Потрібно, щоби фільм зірвав касу.

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

Хард-скіли продакт-дизайнера:

• Проєктувати продукти під IOS, Android, MacOS, Web і враховувати всі технічні особливості цих платформ. Часто в продукті дизайнер має фокус на якусь одну платформу – iOS або Android, наприклад. Але корисно вивчати, як працюють кожна із них. Багато патернів поведінки можуть вам стати в нагоді там, де можна не очікувати. У проєктуванні ios додатків можуть знадобитися патерни з macOS і навпаки. Таким чином, можливо принести щось нове в проєктування інтерфейсів.
• Створювати візуальну мову продуктів, яка передбачає вміння знаходити стиль продукту, застосовувати його і масштабувати.
• Тестувати свої дизайн-рішення. Для цього треба навчитися проводити інтерв’ю, збирати базові прототипи в Figma, працювати з даними якісних досліджень. Тут допоможе лише практика. Ви можете вчитися проводити тести на вже готових додатках, щоби покращити свої навички.
• Формувати гіпотези на базі user research та аналітики. Дослідженнями часто можуть займатися продакт-менеджери або окремі команди UX-дослідників. Продакт-дизайнер повинен вміти працювати з даними якісного або кількісного дослідження, а в ідеалі – проводити самостійно інтерв’ю з користувачами, брати участь у формуванні гіпотез. Цьому ви можете навчитися в команді або на курсах.
• Працювати з Figma, Sketch, Adobe тощо. Базові технічні знання інструментів Figma, Sketch, Adobe є обов’язковими. Ви можете самостійно освоїти ці інструменти за допомогою уроків на Youtube. Краще сконцентруйтеся на Figma, тому що більшість продуктів або перейшли вже на неї, або в процесі переходу. Постійно вдосконалюйтеся у базових інструментах і не забувайте проходити всі туторіали від Figma у випадку оновлення.
• Анімувати та збирати прототипи. Основні інструменти – After Effects та Principle. Важливо вміти працювати з JSON анімацією, а також вміти передавати анімацію в розробку. Навчитися цьому можна на курсі в Projector.
• Дизайн-менеджмент – управління проектом та вміння налагоджувати процеси в дизайн команді. Більше про дизайн-менеджмент можно почитати тут. Ця навичка вам буде необхідна при роботі з декількома дизайнерами на великих продуктах.
• Знання англійської (не нижче рівня Intermediate). Велика частина профільних статей, туторіалів, безкоштовних курсів – англійською мовою. Замовники або клієнти також швидше за все будуть англомовними, тому знання цієї мови необхідне.

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

На цьому шляху вам допоможуть курси, практики, комунікації з розробниками та іншими дизайнерами. Зокрема, рекомендую курси в Projector, Apollo, Kama, а також читати статті на сайті Nielsen Norman Group. Багато навичок до вас прийде уже в процесі роботи.

Не менш важливими є софт-скіли:

Уміння користуватися принципами ненасильницького спілкування.

• Здатність навчатися новому у колег, розуміти як працюють аналітики, продакт-менеджери, розробники, дослухатися до їх експертизи. Продакт-дизайнер комунікує з великою кількістю людей на проєкті.
• Спроможність «продавати» свої ідеї та презентувати їх.
• Можливість швидко навчатися.

Як скласти план розвитку?

1. Почніть багато читати. Не варто нічого малювати перший час, досить кілька тижнів провести на Medium, вивчити Human Interface Guidelines, Material, статті на Nielsen Norman Group. Посилання на конкретні статті залишу в кінці матеріалу.
   Перший час вам буде складно, але ці знання будуть для вас безцінними в майбутньому. Не турбуйтеся, якщо вам щось незрозуміло або ви щось не запам’ятали. Я досі регулярно заходжу на сайт Material, щоб згадати, як працює певна функція. Головне, щоб ви знали, де знайти інформацію.
2. Коли з гайдами стає зрозуміліше, варто переходити до інтерфейсів. Візьміть додаток або сайт, який вам до вподоби, і спробуйте зробити скріншоти, скласти з них шлях користувача. Так ви розберетеся з тим, як працює інтерфейс і як проєктувати такі флоу.
   
3. Далі спробуйте перемальовувати. Тут все просто – що більше, то краще. Намагайтеся не повторювати один в один, а додавати якісь свої рішення. Потім спробуйте створити архітектуру особистих проєктів і малюйте варфрейми.
   
4. Обов’язково тестуйте свої рішення на знайомих та друзях. Так ви зрозумієте, працює ваше дизайн-рішення чи потребує доопрацювання.
5. Створюйте багато варіантів. У мене бували проєкти, на яких потрібно було створювати по 200 варіантів одного екрану. Ідеального рішення ніколи не буває і завжди можна зробити краще.
   
6. Намагайтеся тримати макети в чистоті та дотримуватися 8-піксельної сітки. Розробники в майбутньому скажуть вам спасибі.

Де навчатися?

1. UX Design в KAMA – проходила сама і дуже раджу для початківців. На курсі ви зможете опанувати базові навички, які необхідні для початку роботи дизайнером.
2. PRODUCT INTERFACE DESIGN PROFESSIUM в Projector – рекомендую якщо у вас вже є досвід в дизайні. Ви зможете структурувати свої знання та глибше зрозуміти процеси
3. UX / UI: проектування призначеного для користувача інтерфейсу в bangbangeducation – великий за обсягом курс для систематизації знань. Краще, якщо у вас вже є досвід в дизайні.

Інші корисні курси можна знайти за посиланням, а також у моїй бібліотеці корисних курсів.

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

А якщо немає можливості навчатися на курсах?

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

Я часто звертаюся за допомогою до дизайнерів Wetransfer, Dropbox та інших продуктових компаній у Twitter. Також є багато українських телеграм-каналів, де можна ставити будь-які запитання. Наприклад, R9. Research Community, kyivux, Фигма-чат.

Як зробити перше портфоліо?

Є багато варіантів та дискусій щодо того, як оформляти портфоліо, чи потрібно робити кейси, отримувати нагороди на Behance. Мені здається зараз це безглузда історія.

Оптимальний, як на мене, варіант – створити профіль у Figma Community і публікувати свої роботи там. Потенційний роботодавець зможе відразу побачити макет та оцінити ваші навички.

Також ви можете створити сайт і описати кейси. Кейси описувати обов’язково, оскільки важливо бачити не лише те, що ви спроєктували, але й чим керувалися при цьому.

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

Як підготуватися до першого інтерв’ю?

CV обов’язково створюйте у PDF-форматі. У багатьох компаніях їх друкують, тому на форматі А4 воно повинно мати хороший вигляд.

Не пишіть про те, який відсоток знань у вас у Figma. Краще чесно розкажіть про те, де працювали і що вмієте.

Коли проводила співбесіди дизайнерів, звертала увагу на те, як кандидат збирає макет, чим керується, коли проєктує, і скільки варіантів показує.

Якщо ви подаєтеся на позицію Junior, ваші софт-скіли грають ключову роль.

Великий фокус приділяють здатності кандидата сприймати критику і добре пояснювати логіку рішень у дизайні. У деяких продуктових компаніях почали застосовувати практику white board замість тестового завдання. White board – це тест на п’ять-десять хвилин з UX-завданням на білій дошці. Вам потрібно швидко спроєктувати дизайн-рішення у стресовій ситуації і пояснити, чому ви саме його пропонуєте. Тут оцінюється не результат, а те, як ви мислите.

Коли вас візьмуть на першу роботу в продукт, ставте багато запитань, будьте уважні та цікавтеся в усіх учасників команди, хто, чим, і як займається. Уважно ставтеся до вимог і намагайтеся не просто закрити завдання в Джирі, а знайти й розв’язати проблему, яка виникає у користувачів. Будьте активні та уважні до дрібниць.

Корисні лінки

• Human Interface Guidelines – гайд Apple, який допоможе розібратися в принципах проєктування для платформ iOS та macOS.
• Material Design – гайд від Google. Містить дуже багато інформації про базові правила проєктування. Корисно для платформ під Android.
• Nngroup – дослідження Nielsen Norman Group про різні патерни в інтерфейсах.
• Полное руководство по процессу продакт-дизайна – корисна стаття про роботу продакт-дизайнера.
• Webframe.xyz – референси та патерни в інтерфейсах.
• Як вибрати правильні метрики для продукту на Medium.

Чек-лист для проєктування можна знайти за посиланням.

Також раджу користуватися застосунками, які допоможуть розвинутися професійно.

• Adaptivity (iOS), MaterialX – Android Material Design UI (Android) – додатки для дизайнерів і розробників, щоб краще розібратися в усіх патернах взаємодії.

Книги: 

1. Поведінкова економіка. Як емоції впливають на економічні рішення (Річард Талер) – інформація в книзі дає детальне розуміння логіки користувача.
2. Карта Птолемея (Герц Франк) — корисно для розуміння того, як викликати у користувачів певні емоції.
3. Дизайн для реального світу. Екологія людства та соціальні зміни (Віктор Папаньок) – корисно для початкіців у дизайні. Простою мовою розповідається про складні речі.
4. Опанувати складність (Дональд А. Норман) – книга  про те чому інтерфейси бувають складними та коли ця складність може бути корисною.

Telegraf.Design працює за підтримки спільноти. Підтримуйте Telegraf.Design на Patreon.