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

date 26.08.2022 category Кар'єра
Хто такий 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 р., США)

 

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

 

 

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

Цей матеріал ще ніхто не прокоментував

Може, ти станеш першим?

Залишити коментар