Хто такий UI/UX-дизайнер та як ним стати

У 2020 році LinkedIn включив UX-дизайн у п’ятірку найзатребуваніших навичок та назвав одним із головних напрямів для вивчення. Водночас без UI-дизайну неможливо уявити жоден цифровий продукт. 

Красивий інтерфейс та зручна навігація сайтів, мобільних і веб-застосунків – справа рук UI/UX-дизайнерів. Вони не кодять, але від них залежить, що саме бачить користувач і як він взаємодіє з продуктом. Тобто продукт починається не з коду – він починається з дизайну.

Чому UI/UX-дизайн не тільки про зовнішній вигляд інтерфейсу та що потрібно, щоб стати дизайнером – розбираємо разом із Senior UI/UX-дизайнером CHI Software Кирилом Хіменком.

Хто такий UI/UX-дизайнер та що він робить?

Дизайн UI (User Interface) – це про візуальне сприйняття продукту, його зовнішній вигляд (кольори, анімації, картинки). Дизайн UX (User Experience) будує зрозумілу для користувача навігацію, «користувацький досвід». 

Таким чином, UI/UX-дизайнер – це спеціаліст, який створює привабливий і до того ж логічно продуманий дизайн сайту або додатку. Головна мета дизайнера – вирішити конкретну проблему користувача (і якомога швидше).

Розглянемо різницю між UI та UX на прикладі. 

Відкриваємо мобільний додаток із доставки їжі.

Якщо в додатка якісний UX-дизайн, ви відразу зрозумієте:

• де розташоване меню;
• як зробити замовлення;
• де кошик з обраними позиціями;
• як провести оплату;
• який статус замовлення;
• як слідкувати за кур’єром на карті та інше.

UI-дизайн забезпечує візуальну складову:

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

Що потрібно знати вебдизайнеру?

Щоб почувати себе комфортно під час роботи та досягти кар’єрних успіхів, UI/UX-дизайнер повинен мати певні технічні знання (hard skills) та особистісні якості (soft skills).

До технічних знань відносяться:

• програми Adobe Photoshop, Adobe Illustrator, Figma, Sketch, Invision, Adobe XD;
• базові знання з HTML, CSS;
• кольори та типографіка;
• методи створення композиції;
• принципи дизайну, їх вплив на досвід користувача;
• основи методологій управління проєктами;
• англійська мова на рівні не нижче Intermediate.

Водночас серед особистісних навичок особливо допоможуть наступні:

Креативність. Мається на увазі нестандартний підхід до вирішення проблем та генерація сміливих ідей.

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

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

Логічне мислення. Без логіки дизайнер не зможе побудувати інтуїтивно зрозумілий інтерфейс.

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

Етапи створення дизайну цифрового продукту

Дизайн – це складний процес, який починається задовго до розробки візуальної частини (UI). Повний перелік етапів виглядає так. :

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

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

Розробка User Flow (з англ. Мапа сценаріїв користувача) та Customer Journey Map (з англ. Мапа шляху користувача). Перш ніж почати роботу над власне макетами, дизайнер створює ці дві мапи-візуалізації:

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

• Customer Journey Map фіксує не тільки кроки, які робить користувач, але і його почуття, болючі точки та моменти задоволення, тобто критично емоційні моменти під час “подорожі” додатком чи сайтом. Тут важливо знаходити рішення, які створюватимуть позитивні емоції в людини. Наприклад, якщо реєстрація в додатку займає доволі багато часу, можна підбадьорити юзера емоційним дизайном – анімацією, текстом.

Створення «кістяка» продукту – Wireframing. Дизайнер створює ескізи всіх екранів, схематично демонструє розташування кнопок, ярликів, зображень тощо. 

Прототипування. Прототип – це ще не кінцева версія, а лише модель майбутнього проєкту, яка виглядає як чорно-біла схема. Вона зазвичай клікабельна та створюється дизайнерами за допомогою програм Figma, InVision та інших. Без цього етапу не обійтись, адже він допомагає перевірити майбутній продукт у роботі, проаналізувати його переваги та недоліки, внести побажання замовника та зібрати зворотний зв’язок потенційних користувачів. 

Візуальне наповнення проєкту. Нарешті переходимо до UI-дизайну, що передбачає:

• добір фірмових шрифтів і кольорів;
• створення композиції продукту;
• розробку елементів: кнопок, іконок, рядків тощо;
• створення анімації.

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

Бліц-інтерв’ю з Senior UI/UX-дизайнером у CHI Software Кирилом Хіменком

Чи можна бути окремо UX або UI дизайнером?

Так, можна. У межах однієї компанії/проєкту можуть працювати спеціалісти з UX та UI дизайну окремо. Обери те, що подобається тобі. Працювати над візуальною частиною дизайну? Тоді тобі в UI. Продумувати логіку роботи продукту та його взаємодії з користувачем? Робити інтерфейс зручним та корисним? Це в UX.

Але знай, що на сьогодні в дизайні більше цінуються саме UI/UX-дизайнери, здатні об’єднати візуал та логіку в одну систему.

Як зрозуміти, що UX-частина продукту працює правильно?

Для цього є етап тестування. Зазвичай використовуються два юзабіліті-дослідження:

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

• Які елементи інтерфейсу привертають увагу користувача?
• Що людина бачить, а що залишається в «сліпій зоні»?
• Наскільки важко користувачеві виконувати ті чи інші задачі?

Скільки заробляють дизайнери?

За даними популярного серед айтівців ресурсу dou.ua, середня заробітна плата дизайнерів навіть на початку кар’єри сягає 900$. Фахівці з кількарічним досвідом роботи отримують від 3000$ і вище.

Як стати вебдизайнером?

Для початку потрібно бажання, потім технічні знання, а після – постійна практика.

Якщо є бажання, то поєднати теорію з практикою можна на спеціалізованих курсах. Ми в CHI IT Academy пропонуємо тобі дізнатися, як створити максимально зручний та візуально досконалий продукт на курсі Web Design (UI/UX). Всього за 2,5 місяці ми даємо можливість не тільки опанувати необхідну базу, але й буквально стартувати свою кар’єру, адже після курсу кращі учні отримають шанс потрапити до оплачуваної інтернатури.

З чого почати вивчати вебдизайн? На це запитання ми відповіли детально в цій статті.

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

Книги:

• User Friendly: How the Hidden Rules of Design are Changing the Way We Live, Work & Play

Автори:Cliff Kuang, Robert Fabricant

• Не змушуйте мене думати 

Автор: Стів Круг

Фільми:

• Абстракція: Мистецтво дизайну/Abstract: The Art of Design (з 2017 р., США)
• Гельветика/Helvetica (2007 р., Велика Британія)
• Драбина до неба: Мистецтво Цай Гоцяна/Sky Ladder: The Art of Cai Guo-Qiang (2016 р., США)

Блоги/платформи

• Behance 
• Dribbble 
• Awwwards  

Рецепту простішого, ніж вірити в себе та впевнено йти до мети, немає. Тож уперед до мрії! Якщо зацікавився нашим курсом та хочеш приєднатися до навчання в CHI IT Academy, напиши нам тут.