UXPUB 🇺🇦 Дизайн-спільнота: Daryna Kurdysh

Наводимо порядок в Figma. Шпора 2 для джуна від джуна

Daryna Kurdysh — Sat, 29 Jul 2023 07:43:59 +0000

Привіт, мене звуть Дарина, і ось уже 1.5 року я працюю UX/UI дизайнером в продуктовій компанії.

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

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

1. Обкладинка артборду. Перетворити хаос в порядок

Для неймінгу артборду краще всього підходить:

Синхрон назви тасків з Jira або Notion (що б зробити роботу зручною для подальшого пошуку і приємною для всіх учасників процесу, подбай про ідентичне копіювання назви таски).
Назва фічі яку будемо проектувати.
Чим буде наповнюватися папка? (архів, драфти, соціальні мережі, банери, логотипи і т.д)

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

Верхній тайтл (продукт над яким ведеться робота, назва компанії, назва сайту, назва конкретної людини яка відстежуватиме задачу).
Нижній тайтл (назва таски з Jira або Notion, назва фічі над якою ведеться робота, назва конкретного флоу, назва блоку на сайті, назва сторінки сайту), це мінімальний джентльменський набір для обкладинки.

Якщо ваша команда використовує Jira для відслідковування задач, для зручності проставляйте номери таски + прикріплюйте лінку на таску.

2. Статуси задач на обкладинках артбордів`

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

У своїй роботі я використовую статуси, котрі перекочували до нас з Jira: Backlog, In progress, Control, Done, Postponed.

А тепер по порядку.

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

In progress - статус задачі над яким кипить робота, макети в процессі розробки.

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

Done - на цьом етапі макет готовий до розробки, ви узгодили логіку, пропрацювали UI , прив'язали дизайн бібліотеку, розподілили локальні компоненти в сусідню папку, привели макет до порядку, а також включили для кожної секції статус Ready for dev.
Для зручності розробників і учасників процесу, Figma викотила поновлення зі статусом Ready for dev, це величезна можливість швидко та ефективно надавати розробникам те, що їм потрібно.

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

3. Сторінки на артборді. Розділяй і володарюй.

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

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

Закладуй три базові сторінки для кожного артборду: обкладинка (про неї говорили вище, якісно оформлен обкладинка економить час на пошуки необхідного), фінальний макет (те на що орієнтується стейкхолдер, команда; готовий до аналізу макет знаходиться в цій папці ) та драфт, це поле на якому ти працюєш ( ні які рішення по драфтах не приймаються, це інтимне місце дизайнера).

В процесі роботи можуть створюватись додаткові папки: для місцевих UI компонентів, для роботи над певною фічею (до прикладу, пропрацьовуючи сторінку каталогу ти вирішуєш що непогано було б заредизайнити нові картки товару, змінити контент, додати скруглень, перенести кнопку ближче до ціни. Оптимальним являється рішення створення окремої папки "Catalog cards", де ви пропрацюєте власні варіанти карток. До моменту апруву від стейкхолдера, ваш робочій простір над конкретними картками знаходиться тут)

4.Шари. Неймінг шарів. Принцип ієрархії шарів

Коли все розкладено по поличках наше око радіє, а як радіє око коли таку каталогізацію бачить верстальник? Навіщо нам це потрібно?

Це зручно.
Це дає відчуття порядку і краси, ми мінімізуємо витрати на пошуки відповідного шару.

Все треба називати своїми іменами. Якщо це топ — пишіть "top", "sidebar" або "header" , якщо це кнопка з іконкою пишіть назву фрейма "button", а назву групи всередині фрейму text + icon. Якщо це градієнт, називайте його відповідно "gradient", а не залишайте Rectangle 1093.

Вибудовуйте ієрархію груп в тому порядку, як модулі розміщені в макеті. Наприклад: хедер перший в списку груп, а футер останній. Імена груп збігаються з видимою структурою сторінки (каталог- картки товару - картинка товару - тайтл товару - ціна товару - кнопка товару) . Назви груп допомагають зрозуміти поведінку інтерфейсу.

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

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

Дякую!

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

Daryna Kurdysh — Thu, 22 Jun 2023 09:18:14 +0000

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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