Інсайти за 1.5 роки роботи дизайнером. Шпора 1 для джуна від джуна

Привіт, мене звуть Дарина, я працюю джуніор UX UI дизайнером в продуктовій компанії, котра спеціалізується на туристичному бізнесі. Мій шлях типовий для більшості дизайнерів з пострадянського простору, закінчивши одну з відомих дизайн-шкіл, я вирушила на пошуки роботи мрії. І ось якими інсайтами я можу поділити через 1.5 роки роботи:

1. Зеленому джуну необхідний сенсей

Для молодого і незміцнілого джуна, щотижневе дизайн рев'ю від кваліфікованого ліда - основа для планомірного зростання. Чим професійніший кругозір і знання ліда, которий виконує арт-нагляд, тим крутіше це позначиться на одержуваних знаннях. Дизайн-лід відповідає за якість дизайну которий здається в експлуатацію. В обов'язки ліда входить підтвердження придатності роботи дизайнера в усіх аспектах, за якими вимірюється якість дизайну. Чим частіше будете отримувати зворотний зв'язок по створюваному продукту, тим нижча ймовірність допуску помилок в проєктуванні. В інтересах ліда вирівняти групу за базовою компетенцією. Але якщо у ліда немає мотивації бути наставником для junior-а, ставте питання самостійно. Беріть зворотний зв'язок від інших колег, шукайте альтернативу, питайте стейкхолдерів - чи подобається їм запропоноване вами рішення, не бійтеся отримати критику. Як казав мій перший сенсей "Наша робота - це череда постійних змін”.

2. Проєктування починається з ... питань

Перш ніж відкрити Figma і кинутися малювати варфрейм (а того гірше збирати готовий макет), переконайся, чи правильно ти зрозумів завдання. На початкових етапах раджу створити чек-лист, в якому ти виділиш ключові питання: 1. Яке завдання ми хочемо вирішити? 2. Чи опрацьована логічно основа рішення? (раптом вже готове рішення, а тобі потрібно тільки натягнути UI ) 3. Для кого ми вирішуємо задачу ( яка кількість сценаріїв \ їх доступність) ? 4. Чи реалізується рішення в рамках технічних можливостей розробки? Правильно визначена задача, економить дні, іноді цілі тижні.

3. Швиденько не вийде. Від ідеї до фінального макета

Перший етап. Опрацюй ідею мінімально глибоко. Куди на поточному екрані буде додана нова ідея? Який шлях буде вести до неї? Які її основні частини? Куди вона в кінці приводить?

Другий етап - або товстий маркер. Етап на якому накидаються ключові компоненти, зв'язки в інтерфейсі . Виділимо три моменти: місця - це частини інтерфейсу в які можна потрапити - екрани, поп-апи. Дії - це частини екрана з якими можна взаємодіяти - кнопки, інпути. Зв'язки - це невидимі лінії, які демонструють, як дія переносить нас з одного екрану на інший. Описуючи місця, дії і зв'язки, ми можемо швидко опрацювати принципові дизайнерські рішення не відволікаючись на дрібниці. Суть цього процесу не витрачати багато часу на промальовування дрібних елементів, а зрозуміти чи в правильному напрямку ми рухаємося або чи варто ще трохи побрейнштормити.

Третій етап. Варфреймінг. Hi Fi layout

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

Четвертий етап. Фінальний макет

P.S. забула сказати, що кожен з етапів апрувиться лідом (або іншим учасником процесу которий несе відповідальність за дизайн). На останньому, фінальному етапі, можемо застосовувати стилі наявної дизайн системи, слідувати гайдлайнам компанії, упорядковувати артборд для подальшої передачі макетів в розробку.

4. Порядок на макеті - порядок в голові дизайнера

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

Правильно організований дизайн простір в Figma безпосередньо впливає на два показники:

1. виконання дизайнерами проєктування підіймається на рівень вище, за рахунок дизайн системи з якою легко взаємодіяти ( легко - означає, що всі стилі зафіксовані в окремій папці UI KIT. Продукти компанії це живі організми, які постійно змінюються, доповнюються. Ти повинен бути в курсі всього, що вноситься в дизайн систему, для цього найкраще підходять невеликі зідзвони з колегами, для уточнення нюансів. Налагодивши цей процес ви швидко і ефективно будете закривати рутинні таски.)

2. розробникам набагато простіше взаємодіяти з макетами в Figma які логічно структуровані, розбиті на підгрупи, розбиті за сценаріями, відповідаю дизайн системі.

P.S. Дизайн це прикладне мистецтво, кращий спосіб перейняти навики - спостерігати за “майстром своєї справи". Працюйте з кращими, вчиться у кращих.