Шлях до UI/UX дизайнера та Figma для початківців

Коли вперше у тебе з’явилась думка про те, щоб зайнятись UI/UX дизайном?

— Тривалий час я працювала в компанії Wizardry, де я доросла до артдиректорки, але в компанії я створювала тільки вебдизайн. Коли мені стало нудно, я заглибилася в UI/UX і мобільний дизайн.

Як я починала свій шлях? Після закінчення університету я хотіла спробувати себе в дизайні, адже я з дитинства добре малюю. Спочатку почала працювати в дизайні інтер'єрів, потім пішла в поліграфію як графічна дизайнерка. Але коли я зіпсувала надруковане замовлення на велику суму, зробивши помилку в слові, вирішила перейти на роботу вебдизайнеркою. Це якщо коротко, а так на пошук потрібної мені професії пішло 3 роки й мінус місячної зарплатні. Якби у 2009 році були курси з UI/UX-дизайну, то я б набагато швидше знайшла те, чим хочу займатися.

Спочатку я самостійно черпала знання, які були у вільному доступі в інтернеті. Але у 2016 році самостійної роботи вже не вистачало, щоб рости в роботі, тому я записалась на курси. Спочатку пройшла курс UI digital communications design, потім вивчала art direction у School of visual communication і зрозуміла що так набагато швидше виходить.

Коротка довідка:

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

UX-дизайн розшифровується як user experience design і, як правило, є невидимою або «залаштунковою» стороною дизайну. Це вся робота, яка йде на створення додатка, вебсайту, програмного забезпечення або послуги. UX дизайн охоплює дизайн і дослідження користувачів, інформаційну архітектуру, дизайн взаємодії і юзабіліті-тестування.

UI-дизайн розшифровується як user interface design, який є візуальною або графічною стороною дизайну. Деякі UX-дизайнери також займаються UI, але інші UX-дизайнери обмежуються лише дослідженнями та каркасними схемами.

Що було найскладнішим у новій спеціальності?

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

Коротка довідка:

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

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

Опитування, як і інші дослідження, проводиться з метою отримання даних про користувача. Дані бувають двох видів: кількісні та якісні.

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

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

А що було легко?

– Уся візуальна частина і розуміння процесу.

Війна, блекаути та UI/UX-дизайн. Як тобі вдається працювати в умовах війни та залишитися продуктивною?

– Найголовніше для мене було прибрати новини й відписатися від непотрібних Telegram-каналів. А як тільки почали відключати електроенергію, я багато нервувала, що не встигну зробити вчасно проєкт. Коли вже з'явилися графіки відключень електроенергії, я стала робити собі в цей час перерви в роботі і йшла гуляти або пити каву (якщо зранку відключали) там, де є світло, почала займатися йогою, що добре заспокоює. Не брала з собою ноут, щоб відпочити 2-3 години, коли немає світла. Але так зсувався мій графік, і доводилося працювати до 22-23:00. Приблизно через місяць мій провайдер встановив безперебійне живлення для комутатора, і після вимкнення світла тепер є інтернет і можу далі продовжувати працювати. Але у своєму графіку я залишила ранкову йогу і капучино, щоб почати день продуктивно.

Декілька слів для тих, хто робить свої перші кроки в дизайні

• Не бійтеся починати все з нуля — ви завжди отримаєте результат, головне почати!
• Виберіть цікавий напрямок (дизайн користувацьких інтерфейсів, дизайн мобільних додатків, веб-дизайн, гейм-дизайн) — вивчіть обрану професію, визначтеся, що вам ближче.
• Зберіть усю необхідну інформацію за обраним напрямом (книжки, і сайти, і відео, і групи в соцмережах, шукайте інформацію скрізь, де тільки можна).
• Тепер, коли ви зібрали досить багато інформації, важливо не потонути в ній. Складіть свій план навчання, інакше хаотично кидатиметеся від книги до сайту, від сайту до відео та соцмереж — і проґавити щось важливе. Обов'язково виставте дедлайни, бо можете затягнути із самостійним навчанням.
• Дотримуйтесь поставленого плану і дедлайнів. Якщо важко зосередитися, або плутаєтеся у великій кількості інформації, то рекомендую вибрати курс і не втрачати час.

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

– Figmа — це найпопулярніший графічний редактор у світі для створення дизайн-проєктів. Він простий в освоєнні, є безплатна версія і найголовніше в Figma можна працювати над спільними проєктами. Для мене Figma стала невіддільною частиною робочого процесу, наче моя третя рука.

Як ти зазвичай використовуєш Figma?

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

У Figma дуже багато переваг:

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

Поділись, будь ласка, своїми практиками роботи у Figma?

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

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

Гарячі клавіші (або ж hotkeys) — це кохання з першого вивчення. Вони прискорюють роботу дизайнера в кілька разів. Я без них вже нікуди!

Як ти залишаєшся в курсі нових функцій і найкращих практик у Figma?

– Я підписана на канал Figma в Youtube, де моментально приходять сповіщення про новинки в програмі. Мені дуже подобається працювати в Figma, оскільки програмно вона постійно оновлюється і випускає корисний функціонал, який спрощує мою роботу. Якщо все грамотно побудувати свої робочі процеси, то Figma тільки допомагає їх прискорити.

З твого досвіду, які ключові фактори слід брати до уваги при створенні дизайну за допомогою Figma?

– Порядок в організації проєктів, а також у файлах і шарах, використання компонентів, Auto Layout, стилі, вивчати й використовувати новинки від Figma.

З чого варто почати вивчати Figma новачку?

– Коли я вивчала Figma з нуля, я почала з планування і структури. Також на Youtube знайшла послідовні уроки для новачків (зараз їх величезна кількість), за якими вчилася. Повторюйте за відеоуроками. Сайт, лендінг, банер, візитка, не має сенсу що. Головне завдання — це вивчити Figma на максимум і набити руку. Побачили гарний лендінг — повторіть один в один. Так ви запам'ятаєте, як створюються хороші рішення. Базовий рівень для розуміння і роботи в Figma ви освоїте. Але якщо ви хочете просунутися далі, то краще піти на курс. Так ви набагато швидше просунетеся у вивченні. Ментори допоможуть і поділяться порадою. Плюс за підсумком буде готове портфоліо.

Усі матеріали можна знайти на каналі Figma.

3 речі про дизайн, які ти хотіли б знати раніше?

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

Як проходить навчання UI/U-дизайну в Beetroot Academy?

Борітеся — поборете! Я знаю, наскільки важко пройти навчання і почати працювати за цією спеціальністю, особливо в наш непростий час.

P.S. Нещодавно ми оновили курс з UI/UX-дизайну. Тож чекаємо на тебе серед студентів!